How to upload images from a server and switch images with a seekbar without the previous image disappearing?

Question

I have been commissioned by the Autonomous University of Barcelona to make an app that shows images of the microscope stage of a mineral sample.

Specifically I have photos of the same sample spaced by a five degree turn (72 images). Downloaded from the AUB website.

Below the image there has to be a seekbar and the images have to be loaded as it moves, giving the impression that the microscope stage is rotating.

I have tried it with Picasso:

public class FichaOpacos extends AppCompatActivity {
private String urlParalelos;
private ImageView platina;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_ficha_opacos);
    Intent intent = getIntent();
    String id = intent.getStringExtra("id");
    Database myDb = new Database(this);
    String mineral = myDb.getMineral(id);
    platina = (ImageView) findViewById(R.id.platina);
    urlParalelos = myDb.getURL1(mineral);
    myDb.closeDatabase();
    String urlInicialParalelos= urlParalelos+ "1.jpg";
    Picasso.get().load(urlInicialParalelos).into(platina);
    SeekBar seekBar = findViewById(R.id.seek);
    seekBar.setProgress(0);
    seekBar.incrementProgressBy(1);
    seekBar.setMax(71);
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            // TODO Auto-generated method stub
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            // TODO Auto-generated method stub
        }

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {
            // TODO Auto-generated method stub
            String urlFinalParalelos = urlParalelos+ String.valueOf(progress+1) + ".jpg";
            Picasso.get().load(urlFinalParalelos).into(platina);

        }
    });


}
}

The problem is that in the transition between images the image disappears and then after milliseconds the next one appears, not giving the impression that you are looking at a rotating microscope stage.

How could I get the desired effect?

I imagine I need an animation that keeps the previous image until the next image is displayed, but I have never worked with animations and would not know how to implement it.

Answer 1

The solution I have found that produces the expected result is to download the 72 images at the start of the activity.

In this way the images are available and load quickly and it seems that the microscope stage rotates.

The only drawback is that the user has to wait a few seconds to load the activity.

public class FichaOpacos extends AppCompatActivity {
private String urlParalelos;
private ImageView platina;
private ArrayList<Drawable> imagenes;
private ProgressDialog progress;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_ficha_opacos);
    Intent intent = getIntent();
    String id = intent.getStringExtra("id");
    Database myDb = new Database(this);
    String mineral = myDb.getMineral(id);
    platina = (ImageView) findViewById(R.id.platina);
    urlParalelos = myDb.getURL1(mineral);
    myDb.closeDatabase();
    String urlInicialParalelos = urlParalelos + "1.jpg";
    Picasso.get().load(urlInicialParalelos).into(platina);
    SeekBar seekBar = findViewById(R.id.seek);
    seekBar.setProgress(0);
    seekBar.incrementProgressBy(1);
    seekBar.setMax(71);
    imagenes = new ArrayList<>();
    progress = new ProgressDialog(this);
    progress.setMessage("Loading images....");
    progress.show();
    new Thread(new Runnable() {
        @Override
        public void run() {
            //doing long task
            try {
                for(int i= 0 ;i < 72; i++) {
                    imagenes.add(drawableFromUrl(urlParalelos + String.valueOf(i + 1) + ".jpg"));
                    float tantoporuno = (float)(i+1)/(float)72;
                    int porcentaje = Math.round(tantoporuno*100);
                    progress.setMessage("Loading..." + String.valueOf(porcentaje) + "%");
                    if (i==71) {
                        progress.dismiss();
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }).start();
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            // TODO Auto-generated method stub
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            // TODO Auto-generated method stub
        }

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    platina.setImageDrawable(imagenes.get(progress));
                }
            }).start();
        }
    });
}
public static Drawable drawableFromUrl(String url) throws IOException {
    Bitmap x;
    HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection();
    connection.connect();
    InputStream input = connection.getInputStream();
    x = BitmapFactory.decodeStream(input);
    return new BitmapDrawable(Resources.getSystem(), x);
}
}