I Can't Load Images Retrieved From Firebase Into A Viewpager

I have uploaded some images using an android application into Firebase storage, now I want to be able to display those images inside a ViewPager in that same application. I have fo

Solution 1:

You can use Glide to load the image. For now, you are not loading the image into image view that's why it's not working here is the code...

@Overridepublic Object instantiateItem( ViewGroup container, int position) {
    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    Viewview= layoutInflater.inflate(R.layout.custom_layout, container, false);
    SliderUtilsutils= sliderImg.get(position);
    ImageViewimageView=  view.findViewById(R.id.imageView);

    // FIXED USING THIS
    Glide.with(context).load(**utils.getImageUrl**).into(imageView);
    container.addView(view);
    return view;
     }

EDIT

Also, you need to add the dependencies into your gradle file

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

Solution 2:

I made it without glide and used image bytes instead of URL (Image is also stored as bytes on FirebaseStorage). Inside the constructor, I passed ArrayList of String containing the path of the image in Firebase Storage.

// Constructor    public ViewPageAdapter(Context context, ArrayList<String> images) {
        this.context = context;
        this.images = images;
        mLayoutInFlater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

Here is my instantiateItem() calling images from Firebase and upon receiving success set bitmap to imageView

public Object instantiateItem(@NonNull ViewGroup container, int position) {

    //Inflating the image in XMLViewitemView= mLayoutInFlater.inflate(R.layout.pager_image_item, container, false);
    //Referencing to ImageViewImageViewimageView= itemView.findViewById(R.id.pagerImageViewMain);
    //Get Image from Firebase
    StorageReference photoReference= storageReference.child(String.valueOf(images.get(position)));
    Log.d("TAGS", images.get(position));
    photoReference.getBytes(ONE_MEGABYTE).addOnSuccessListener(newOnSuccessListener<byte[]>() {
        @OverridepublicvoidonSuccess(byte[] bytes) {
            Log.d("TAGS", "Got image :" + position);
            //Set Bitmap Image to ViewBitmapbitmap= BitmapFactory.decodeByteArray(bytes,0, bytes.length);
            imageView.setImageBitmap(bitmap);
            
        }

    }).addOnFailureListener(newOnFailureListener() {
        @OverridepublicvoidonFailure(@NonNull Exception e) {
            Toast.makeText(context.getApplicationContext(), e.toString(), Toast.LENGTH_SHORT).show();
        }
    });

    //Adding the View
    Objects.requireNonNull(container).addView(itemView);
    return itemView;
}

This is my first answer on StackOverflow hope this will help someone