Retrieve images from firebase realtime database and show in image slider using picasso

Question

I trying to retrieve images from firebase realtime database and show these image back as an image slider(slideshow) using picasso.

This only allows me to retrieve the last image stored in firebase. Any help would be very much appreciated!

enter code here
public void update(View view) {

        DatabaseReference mDatabaseRef = FirebaseDatabase.getInstance().getReference().child("uploads");
        mDatabaseRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot snapshot) {

                // TODO Auto-generated method stub
                if(snapshot.exists()) {
                    for(DataSnapshot s:snapshot.getChildren()) {
                        //For Image1

                        StringBuilder img1=new StringBuilder();
                        Upload t = s.getValue(Upload.class);
                        img1.append(t.getImageUrl());
                        image1.setText(img1.toString());
                        String image1url=image1.getText().toString();
                        Picasso.get().load(image1url).into(imageView1);

                        StringBuilder img2=new StringBuilder();
                        Upload a = s.getValue(Upload.class);
                        img2.append(a.getImageUrl());
                        image2.setText(img1.toString());
                        String image2url=image2.getText().toString();
                        Picasso.get().load(image2url).into(imageView2);
}

This is my database structure

Firebase-root
       |
       --- uploads
             |
             --- LZ6KO5TaHGaIthbhbnj
             |     |
                   --- imageUrl1: "https://..."
             |     |
                   --- name: "firstpic" 
             |
             --- LZ6NKm-zZg5EW1hvhvh
                   |
                   --- imageUrl2: "https://..."
                   |
                   --- name: "secondpic" 

Answer 1

This solution implements viewflipper, picasso and firebase database;

If simple image slider(slideshow) is to be implemented then you can use viewflipper.

I) First you can use firebase database to access all the imageUrl as:

databaseReference.child("uploads")
            .addListenerForSingleValueEvent(new ValueEventListener() {
                @Override
                public void onDataChange(DataSnapshot dataSnapshot) {
                    if (dataSnapshot.exists()) {
                        slideLists.clear();    //slideLists is an ArrayList
                        for (DataSnapshot snapshot : dataSnapshot.getChildren()) {
                            SlideModel model = snapshot.getValue(SlideModel.class);

                            slideLists.add(model);
                        }
                        Toast.makeText(SlideShowActivity.this, "All data fetched", Toast.LENGTH_SHORT).show();
                        usingFirebaseImages(slideLists);    //this method is for calling viewflipper method
                    } else {
                        Toast.makeText(SlideShowActivity.this, "No images in firebase", Toast.LENGTH_SHORT).show();
                    }
                }

                @Override
                public void onCancelled(DatabaseError databaseError) {
                    Toast.makeText(SlideShowActivity.this, "NO images found \n" + databaseError.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });

II) Second load those images to a imageView via Picasso as:

Picasso.with(SlideShowActivity.this).load(imageUrl).into(imageView); 

III) Implement viewflipper for slideshow animation of images as:

    ImageView imageView = new ImageView(this);
    Picasso.with(SlideShowActivity.this).load(imageUrl).into(imageView);

    viewFlipper.addView(imageView);

    viewFlipper.setFlipInterval(2500);
    viewFlipper.setAutoStart(true);

    viewFlipper.startFlipping();
    viewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
    viewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);

Finally a full code would look something like this:

A) Your xml file should contain this:

<ViewFlipper
    android:id="@+id/viewFlipper_slide_show"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true" />

B) Your activity class should contain this: (say SlideShowActivity.java)

public class SlideShowActivity extends AppCompatActivity {

private ViewFlipper viewFlipper;
private DatabaseReference databaseReference;
private List<SlideModel> slideLists;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_slide_show);

    initialize();

    databaseReference = FirebaseDatabase.getInstance().getReference();
    slideLists = new ArrayList<>();
}

@Override
protected void onStart() {
    super.onStart();
    usingFirebaseDatabase();
}

private void initialize() {
    viewFlipper = findViewById(R.id.viewFlipper_slide_show);
}

private void usingFirebaseDatabase() {
    databaseReference.child("uploads")
            .addListenerForSingleValueEvent(new ValueEventListener() {
                @Override
                public void onDataChange(DataSnapshot dataSnapshot) {
                    if (dataSnapshot.exists()) {
                        slideLists.clear();
                        for (DataSnapshot snapshot : dataSnapshot.getChildren()) {
                            SlideModel model = snapshot.getValue(SlideModel.class);

                            slideLists.add(model);
                        }
                        Toast.makeText(SlideShowActivity.this, "All data fetched", Toast.LENGTH_SHORT).show();
                        usingFirebaseImages(slideLists);
                    } else {
                        Toast.makeText(SlideShowActivity.this, "No images in firebase", Toast.LENGTH_SHORT).show();
                    }
                }

                @Override
                public void onCancelled(DatabaseError databaseError) {
                    Toast.makeText(SlideShowActivity.this, "NO images found \n" + databaseError.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
}

private void usingFirebaseImages(List<SlideModel> slideLists) {
    for (int i = 0; i < slideLists.size(); i++) {
        String downloadImageUrl = slideLists.get(i).getImageUrl();
        flipImages(downloadImageUrl);
    }
}

public void flipImages(String imageUrl) {
    ImageView imageView = new ImageView(this);
    Picasso.with(SlideShowActivity.this).load(imageUrl).into(imageView);

    viewFlipper.addView(imageView);

    viewFlipper.setFlipInterval(2500);
    viewFlipper.setAutoStart(true);

    viewFlipper.startFlipping();
    viewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
    viewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);

}
}

C) Finally as per your database structure a model should be: (say SlideModel.java)

public class SlideModel {
private String imageUrl, name;

public SlideModel() {
}

public SlideModel(String imageUrl, String name) {
    this.imageUrl = imageUrl;
    this.name = name;
}

public String getImageUrl() {
    return imageUrl;
}

public void setImageUrl(String imageUrl) {
    this.imageUrl = imageUrl;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}
}

Good luck!