App not retrieving images from firebase realtime database in android studio with Java

Question

Please I want to retrieve images with text from Firebase Realtime Database to a RecyclerView using a CardView which contains ImageView for the image and two TextView for price and title, and I have been able to retrieve the text but the images don't show I'm using glide, only the error holder image shows, I have implemented the dependency and the annotation processor as well but still, the images do not show. Please is there anything else I have to do?

Please this my code in the RecyclerAdapter

 RecyclerArrayAdapter extends RecyclerView.Adapter<RecyclerArrayAdapter.ViewHolder> {
    Context context;
    ArrayList<Data> ImagesArrayList;

    public RecyclerArrayAdapter(Context context) {
        this.context = context;
    }

    public RecyclerArrayAdapter(Context context, ArrayList<Data> imagesArrayList) {
        this.context = context;
        ImagesArrayList = imagesArrayList;
    }

    @NonNull
    @Override
    public RecyclerArrayAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image,parent, false);
        return new RecyclerArrayAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerArrayAdapter.ViewHolder holder, int position) {


Glide.with(context)
  .asBitmap()
  .override(120,120)
  . placeholder 
   (R.drawable.common_image)
  .dontAnimate()
.error(R.drawable.common_second_image)            
 .load(ImagesArrayList.get(position).getImage())
             .into(holder.mImage);

        holder.mTitle.setText(ImagesArrayList.get(position).getTitle());
        holder.mPrice.setText(String.valueOf(ImagesArrayList.get(position).getPrice()));

    }

    @Override
    public int getItemCount() {     
         
   return ImagesArrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        CircleImageView mImage;
        TextView mTitle;
        TextView mPrice;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mImage = (CircleImageView) itemView.findViewById(R.id.image_locate);
            mTitle = (TextView) itemView.findViewById(R.id.title);
            mPrice =(TextView) itemView.findViewById(R.id.price_tag);
        }
   

Please here is the code in the MainActivity.java

Public class Ladies_Dresses_Page extends AppCompatActivity{

private RecyclerArrayAdapter private recyclerArrayAdapter;
private RecyclerView recyclerView;
private ArrayList<Data> modelArrayList;
DatabaseRefrence  = database;
recyclerView = findViewById(R.id.dressRecycler);

 database=FirebaseDatabase.getInstance().getReference("Data");
    database.addValueEventListener(new ValueEventListener() {

        @Override
        public void onDataChange(@NonNull DataSnapshot snapshot) {
            clearAll();

            for (DataSnapshot snapshot1 : snapshot.getChildren()){
                Data data = new Data();
                data.setTitle(snapshot1.child("title").getValue().toString());

                data.setImage(snapshot1.child("image").getValue().toString());
                data.setPrice(Integer.parseInt(snapshot1.child("price").getValue().toString()));
                          modelArrayList.add(data);
            }

            recyclerArrayAdapter = new RecyclerArrayAdapter(getApplicationContext(),modelArrayList);
            recyclerView.setAdapter(recyclerArrayAdapter);



        }

        @Override
        public void onCancelled(@NonNull DatabaseError error) {
           
            Toast.makeText(Ladies_Dresses_Page.this, "ERROR"+ error.getMessage(),Toast.LENGTH_SHORT).show()
}

private void clearAll() {
    if (modelArrayList != null) {
        modelArrayList.clear();

        if (recyclerArrayAdapter != null) {
            recyclerArrayAdapter.notifyDataSetChanged();
        }

    }
    modelArrayList = new ArrayList<>();
}

Below is the code in my Model class

 public class Data {
String title, image;
int price;
public Data(){};

    public Data(String title, String image, int price) {
        this.title = title;
        this.image = image;
        this.price = price;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public int getPrice() {
        return price;
    public void setPrice(int price) {
        this.price = price;
    }

Please here my Database

  "Data": [
    null,
    {
      "image": "gs://apex-shop.appspot.com/IMG-20210119-WA0029.jpg",
      "price": 100,
      "title": "top and down"
    },
    {
      "image": "gs://apex-shop.appspot.com/IMG-20210122-WA0015.jpg",
      "price": 40,
      "title": "top and down"
    },
    {
      "image": "gs://apex-shop.appspot.com/Untitled-1.jpg",
      "price": 200,
      "title": "top and down"
    },
    {
      "image": "gs://apex-shop.appspot.com/first.jpg",
      "price": 70,
      "title": "top and down"
    },
    {
      "image": "gs://apex-shop.appspot.com/image1.jpg",
      "price": 60,
      "title": "top and down"
    },
    {
      "image": "https://www.decathlon.com.gh/academic-soccer-balls/331004-33947-machine-stitched-football-f100-size-5-white.html#/demodelcolor-8619247/demodelsize-1205?queryID=ed99ba460205f743a374af034b56f7d9&objectID=4242708",
      "price": 100,
      "title": "Ball"
    },
    {
      "image": "gs://apex-shop.appspot.com/Untitled-1.png",
      "price": 10,
      "title": "small image"
    },
    {
      "image": "https://www.bing.com/ck/a?!&&p=ac9681f5a082e2f7377e25eea85f356e857939c6da63e291ef95767fde17da0dJmltdHM9MTY1MjAyNzY3MiZpZ3VpZD0yZjM1MjcxZi00MTk5LTRjNDItYTgyNC1mYTg0ZDIzMDA3ZmImaW5zaWQ9NTQyNw&ptn=3&fclid=bcbd5304-ceec-11ec-9502-3b2dcfcefe67&u=a1L2ltYWdlcy9zZWFyY2g_cT1DYXQmRk9STT1JUUZSQkEmaWQ9MDk1QUNDNjY1MTk5RUFDOUEwODM0Qzg1ODI3RUI3MzM3RjA2QzhFMyZtc2Nsa2lkPWJjYmQ1MzA0Y2VlYzExZWM5NTAyM2IyZGNmY2VmZTY3&ntb=1",
      "price": 50,
      "title": "cat"
    }
  ]
}

Answer 1

The problem doesn't lie in the code, but in the database. A URL that looks like this:

gs://apex-shop.appspot.com/IMG-20210119-WA0029.jpg

It's not a valid URL that can use by Glide. To solve this problem, you have to change all children inside your Data node to hold valid URLs, that start with https://... and are pointing directly to the desired image.