How to retrieve Images from firebase in listview

Question

I trying to retrieve images in listview using Firebase list adapter.I am using POJO class for saving and retriving images from firebase.

Below is my POJO class: Data.java

public class Data {

String imag;

public Data(){

}

public Data(String imag){

    this.imag = imag;
}

public String getImag() {
    return imag;
}

public void setImag(String imag) {
    this.imag = imag;
  }
}

Code for storing images:

 Firebase ref = new Firebase("https://imaglist.firebaseio.com");

 Bitmap bm = BitmapFactory.decodeFile(imgDecodableString);
 ByteArrayOutputStream baos = new ByteArrayOutputStream();
 bm.compress(Bitmap.CompressFormat.JPEG,100,baos);
 byte[] byteArray = baos.toByteArray();
 encodedImage = Base64.encodeToString(byteArray, Base64.DEFAULT);

          Data d = new Data();

          d.setImag(encodedImage);

 ref.child("Photo").push().setValue(d, new Firebase.CompletionListener() {

     @Override
     public void onComplete(FirebaseError firebaseError, Firebase firebase) {       
 if(firebaseError != null){
                                   Toast.makeText(getApplicationContext(),firebaseError.getMessage(),Toast.LENGTH_SHORT).show();
                              }
                              else{
                                  Toast.makeText(getApplicationContext(),"Image Saved",Toast.LENGTH_SHORT).show();
                              }
                          }
                      });

Code for retriving Images:

list  = (ListView)findViewById(R.id.list);
img = (ImageView)findViewById(R.id.img);

 FirebaseListAdapter<Data> ad = new FirebaseListAdapter<Data>(MainActivity.this,Data.class,R.layout.row,ref) {
        @Override
        protected void populateView(View view, Data data, int i) {

            Data d = new Data();

            byte[] dec = Base64.decode(encodedImage,Base64.DEFAULT);
            Bitmap decodeByte = BitmapFactory.decodeByteArray(dec, 0, dec.length);
            img.setImageBitmap(decodeByte);

        }
    };
              list.setAdapter(ad);

how to set getter in firebase list adapter to fetch images.

I recommend to you to use Pictures as String(url), and then use **Glide** framework to show them ;) — M. Mariscal, May 12 '16 at 09:07
How can i do it using getter method in my above code as i have converted images in Base64 string. — Digvijay Singh Thakur, May 12 '16 at 09:10
Could you provide a code how to retrieve images from firebase using glide. — Digvijay Singh Thakur, May 13 '16 at 04:30
*Firebase just released a new feature called [Firebase Storage](https://firebase.google.com/docs/storage/). This allows you to upload images and other non-JSON data to a dedicated storage service. We highly recommend that you use this for storing images, instead of storing them as base64 encoded data in the JSON database.* The Android documentation also contains an example of how to show these images using Glide. — Frank van Puffelen, May 20 '16 at 04:29

score 3 · Answer 1 · answered May 13 '16 at 10:03

3

You could use a JSON stored on Firebase, saving url-images (located for example on Imgur) and then use Glide for retrieving as image without any kind of complication, futurestud.io website e.g.:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);
String internetUrl = "http://i.imgur.com/DvpvklR.png";

Glide
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

Trust me, it's very simple with Firebase

answered May 13 '16 at 10:03

M. Mariscal

1,226
3
17
46

But how can i get all those images from users and save them to imgur before i get them into my app from firebase. – Digvijay Singh Thakur May 14 '16 at 04:42
http://stackoverflow.com/questions/26292969/can-i-store-image-files-in-firebase-using-java-api is it what you are looking for? – M. Mariscal May 14 '16 at 15:07
I have tried this but it is showing exception in lines: `FirebaseListAdapter ad = new FirebaseListAdapter(MainActivity.this,Data.class,R.layout.row,ref) and img.setImageBitmap(decodeByte) ` i am facing problem in retrieving images. – Digvijay Singh Thakur May 15 '16 at 06:58
I know that firebase need just the default constructor, could it be? – M. Mariscal May 16 '16 at 22:16

score 0 · Answer 2 · answered Dec 03 '16 at 00:19

Create another xml file called listset:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:weightSum="1">

 <LinearLayout
     android:id="@+id/linear1"
      android:layout_width="382dp"
        android:layout_height="match_parent"
      android:layout_alignParentRight="true"
      android:layout_marginLeft="@dimen/pad_10dp"

      android:gravity="center_vertical"
      android:orientation="vertical"
      android:paddingBottom="@dimen/pad_5dp"
      android:paddingLeft="@dimen/pad_15dp"
      android:paddingRight="@dimen/pad_chat_item"
      android:paddingTop="@dimen/pad_5dp"
      android:weightSum="1">


 ImageView
      android:layout_width="366dp"
      android:layout_height="wrap_content"
      android:id="@+id/image1"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0.06" />


</LinearLayout>

You made a mistake in your firebase list adapter! Now use listset as a template for your firebase list adapter, USE THIS CODE:

 FirebaseListAdapter<Data> ad = new FirebaseListAdapter<Data>(MainActivity.this,Data.class,R.layout.listset,ref) {
    @Override
    protected void populateView(View view, Data data, int i) {



        byte[] dec = Base64.decode(data.getImag,Base64.DEFAULT);
        Bitmap decodeByte = BitmapFactory.decodeByteArray(dec, 0, dec.length);
        img.setImageBitmap(decodeByte);

    }
};

How to retrieve Images from firebase in listview

2 Answers2