How to retrieve data from firebase into a recycler view using Kotlin (including images)? - firebase

Question

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

Answer 1

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