0

I'm retrieving data from firebase into a recycler view using Kotlin. I'm able to load the text easily but unable to load the images. I have used Picasso library for the same. There is no error in the code, can anyone suggest something?

Following is my code:

1) This is the main activity class

   class MainActivity : AppCompatActivity() 
    {   
        lateinit var recyclerView: RecyclerView
    
        lateinit var ref:DatabaseReference
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    
            recyclerView=findViewById(R.id.rvFirebase)
            ref= FirebaseDatabase.getInstance().reference.child("Restaurants")
            recyclerView.layoutManager=LinearLayoutManager(this)
    
            val option=FirebaseRecyclerOptions.Builder<ResModel>().setQuery(ref,ResModel::class.java).build()
    
            val firebaseRecyclerAdapter= object :FirebaseRecyclerAdapter<ResModel,RViewHolder>(option){
    
                override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RViewHolder {
                    val itemView= LayoutInflater.from(this@MainActivity).inflate(R.layout.single_row,parent,false)
                    return RViewHolder(itemView)
                }
    
                override fun onBindViewHolder(holder: RViewHolder, position: Int, model: ResModel) {
                   val refId = getRef(position).key.toString()
                    ref.child(refId).addValueEventListener(object:ValueEventListener{
                        override fun onCancelled(error: DatabaseError) {
    
                        }
    
                        override fun onDataChange(snapshot: DataSnapshot) {
                            holder.rCost.text = model.resCost
                            holder.rName.text = model.resName
                          Picasso.get().load(model.resImage).into(holder.rImage)
                            holder.rRating.text=model.resRating
                        }
                    })
                }
            }
    
           recyclerView.adapter=firebaseRecyclerAdapter
            firebaseRecyclerAdapter.startListening()
        }
    
         class RViewHolder(itemView:View):RecyclerView.ViewHolder(itemView) {
             
            var rImage:ImageView=itemView.findViewById(R.id.imgRestaurant)
            var rName:TextView=itemView.findViewById(R.id.txtRestaurantName)
            var rCost:TextView=itemView.findViewById(R.id.txtCost)
            var rRating:TextView=itemView.findViewById(R.id.txtResRating)
        }
    }

2) This is the model class

class ResModel
 {
    var resCost: String =" "
    var resImage: String=" "
    var resName: String=" "
    var resRating: String=" "
    constructor():this("","","",""){       
    }
    constructor(resCost:String,resImage: String,resName:String,resRating:String){
        this.resCost=resCost
        this.resImage=resImage
        this.resName=resName
        this.resRating=resRating
    }
}

3)This is the main activity xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:id="@+id/rvFirebase"/>
</RelativeLayout>

4) This is the card view xml file which is being used in recycler view

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/carViewXml">

    <LinearLayout
        android:id="@+id/llContent"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        android:background="#ffffff"
        android:weightSum="6">


        <ImageView
            android:layout_marginTop="6dp"
            android:layout_weight="1.7"
            android:id="@+id/imgRestaurant"
            android:layout_width="0dp"
            android:layout_height="90dp"
            android:src="@drawable/ic_food"
            android:padding="5dp"
            android:layout_marginStart="10dp"
            android:scaleType="centerCrop"
            android:fadingEdge="vertical"
            android:background="@drawable/rounded_image"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginTop="8dp"
            android:layout_weight="3.3"
            android:layout_marginStart="5dp">

            <TextView
                android:id="@+id/txtRestaurantName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="6dp"
                android:text="name_of_the_restaurant"
                android:textColor="#000000"
                android:textSize="16sp"
                android:textStyle="bold"/>


            <TextView
                android:id="@+id/txtCost"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_below="@id/txtRestaurantName"
                android:layout_alignParentBottom="true"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="0dp"
                android:padding="8dp"
                android:text="Rs. 299"
                android:textSize="18sp"
                android:textStyle="bold" />

        </RelativeLayout>
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginTop="9dp"
            android:layout_weight="1"
            android:layout_marginStart="3dp">

            <ImageView
                android:id="@+id/imgFavResIcon"
                android:layout_width="match_parent"
                android:layout_height="23dp"
                android:layout_alignParentTop="true"
                android:layout_marginTop="11dp"
                android:src="@drawable/ic_favorite_res" />

            <TextView
                android:id="@+id/txtResRating"
                android:layout_width="match_parent"
                android:layout_height="53dp"
                android:layout_below="@id/imgFavResIcon"
                android:layout_marginTop="22dp"
                android:padding="4dp"
                android:text="4.5"
                android:textAlignment="center"
                android:textColor="#FB8C00"
                android:textSize="14sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </LinearLayout>
</androidx.cardview.widget.CardView>

4) This is the image of how I stored data on firebase database and storage

Firebase Databse

Firebase storage

1 Answers1

0

Not sure how Picasso can handle Firebase ui storage but with glide you do something like this:

implementation 'com.firebaseui:firebase-ui-storage:6.3.0' add firebase UI Storage

Then:

val storageReference: StorageReference = model.resImage //not sure about the reference here - eg FirebaseStorage.getInstance().getReference().child("yourImageReferencePath")

Glide.with(this /* context */)
        .using(FirebaseImageLoader())
        .load(storageReference)
        .into(holder.rImage)

Also please take a look at other resources

Sylwek845
  • 145
  • 9