RecyclerView in Android

activity_recycler_view.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    tools:context=".learning.RecylerViewActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_surfer_posts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

RecylerViewActivity.kt

package com.maple.kashin.learning

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.maple.kashin.databinding.ActivityRecylerViewBinding
import com.maple.kashin.learning.adapters.SurferPostsRecyclerViewAdapter

data class RecyclerViewSurferPost(
    val profilePicUrl: String?,
    val postUrl: String?,
    val name: String?,
    val postedOn: String?,
    val likeCount: Int?,
    val title: String?,
    val location: String?,
)

class RecylerViewActivity : AppCompatActivity() {

    private lateinit var binding: ActivityRecylerViewBinding
    private var surferPosts: ArrayList<RecyclerViewSurferPost> =
        arrayListOf<RecyclerViewSurferPost>()

    private lateinit var mSurferPostsRecyclerViewAdapter: SurferPostsRecyclerViewAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityRecylerViewBinding.inflate(layoutInflater)
        setContentView(binding.root)

        setSurferPostsData()
        mSurferPostsRecyclerViewAdapter = SurferPostsRecyclerViewAdapter(surferPosts, this)
        binding.rvSurferPosts.adapter = mSurferPostsRecyclerViewAdapter
        binding.rvSurferPosts.layoutManager =
            LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)

    }

    private fun setSurferPostsData() {
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/44/3e/cb/443ecb7f724bc99256cec196a881cce1.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Amaar",
                "3 hrs ago",
                20,
                "Today i surfed at Karnatka",
                "Karnatka"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
                RecyclerViewSurferPost(
                    "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                    "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                    "Zakir",
                    "1 hrs ago",
                    30,
                    "Today i surfed at London",
                    "London"
                )
                )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )


    }
}

row_single_surfer_post.xml

<?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"
    app:cardCornerRadius="30dp"
    android:background="@drawable/bg_top_right_rounded_corner"
    android:layout_marginVertical="@dimen/_12dp"
    android:layout_marginHorizontal="@dimen/_12dp"
    android:paddingVertical="@dimen/_10dp"
    android:paddingHorizontal="@dimen/_12dp"
    android:layout_height="280dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="280dp">

        <com.google.android.material.imageview.ShapeableImageView
            app:shapeAppearance="@style/surfer_top_cornered_radius"
            android:scaleType="centerCrop"
            android:id="@+id/iv_post_image"
            android:layout_width="wrap_content"
            android:layout_height="280dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/dev_amaar" />

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_surfer"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginStart="12dp"
            android:layout_marginTop="8dp"
            android:src="@drawable/founder_ikhlaq"
            app:civ_border_color="#2196F3"
            app:civ_border_width="3dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:textColor="@color/black"
            android:textStyle="bold"
            android:id="@+id/tv_post_by"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginTop="8dp"
            android:text="Amaar Amin Bhat"
            app:layout_constraintStart_toEndOf="@+id/civ_surfer"
            app:layout_constraintTop_toTopOf="@+id/civ_surfer" />

        <TextView
            android:id="@+id/tv_posted_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2 hrs ago"
            app:layout_constraintStart_toStartOf="@+id/tv_post_by"
            app:layout_constraintTop_toBottomOf="@+id/tv_post_by" />

        <ImageView
            android:id="@+id/imageView15"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginTop="18dp"
            app:layout_constraintEnd_toEndOf="@+id/civ_surfer"
            app:layout_constraintStart_toStartOf="@+id/civ_surfer"
            app:layout_constraintTop_toBottomOf="@+id/civ_surfer"
            app:srcCompat="@drawable/ic_baseline_heart_broken_24"
            app:tint="@color/black" />

        <TextView
            android:id="@+id/tv_like_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1.2k"
            android:textColor="@color/black"
            android:layout_marginStart="10dp"
            app:layout_constraintBottom_toBottomOf="@+id/imageView15"
            app:layout_constraintStart_toEndOf="@+id/imageView15"
            app:layout_constraintTop_toTopOf="@+id/imageView15" />

        <ImageView
            android:id="@+id/imageView16"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"
            app:tint="@color/black"
            app:layout_constraintEnd_toEndOf="@+id/imageView15"
            app:layout_constraintStart_toStartOf="@+id/imageView15"
            app:layout_constraintTop_toBottomOf="@+id/imageView15"
            app:srcCompat="@drawable/ic_baseline_bookmark_24" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginStart="16dp"
            android:backgroundTint="@color/white"
            android:clickable="true"
            android:contentDescription="@string/_0"
            android:focusable="true"
            android:padding="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/iv_post_image"
            app:layout_constraintStart_toStartOf="parent"
            app:maxImageSize="@dimen/_44dp"
            app:srcCompat="@drawable/ic_baseline_play_arrow_24"
            app:tint="@color/black" />

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="0dp"
            android:layout_height="103dp"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="12dp"
            android:layout_marginStart="12dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/floatingActionButton"
            app:layout_constraintTop_toTopOf="@+id/floatingActionButton"
            app:layout_constraintVertical_bias="0.0">

            <TextView
                android:id="@+id/tv_post_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Considered as the pro father of pro surfing, don't compare him"
                android:textColor="@color/white"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tv_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Akhran, Mir Bazar"
                android:textAllCaps="true"
                android:textColor="@color/white"
                android:textSize="16sp" />
        </LinearLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>

</RelativeLayout>

Steps.txt

- Activity Creation
- Intialised the binding
- Added recyclerview in actvity xml
- Added the design of the single item layout
- Added the Post data class model
- Added the arrayList of Post data models and added its data

- Maded the recyclerView Adapter class
   - added the arraylist of post and context in its parameters
   - Extended the class with  RecyclerView.Adapter<ViewHolder>
   - Make the ViewHolder inner class
   - Override the all member functions, onCreateViewHolder, onBindViewHolder, getItemCount
   - add the size to getItemCount
   - Add the rowLayout binding and return the itemViewHolder instance by paasing the rowLayout binding
   - Add the onBindViewHolder functionality by accesing the posts by positon and adding the holder.bind(postModel) 
   - Make the bind function in ViewHolder and add its data
   
-  Now make the lateinit object of adapter
-  Intialize the adapter with arraylist and context
-  Now add the adpter to recyclerview
-  Now add the layout manager to recyclerview
   
   

SurferPostsRecyclerViewAdapter.kt

package com.maple.kashin.learning.adapters

import android.content.Context
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide
import com.maple.kashin.databinding.RowSingleSurferPostBinding
import com.maple.kashin.learning.RecyclerViewSurferPost

class SurferPostsRecyclerViewAdapter(
    private var surferPosts: ArrayList<RecyclerViewSurferPost>,
    private var context: Context
) : RecyclerView.Adapter<SurferPostsRecyclerViewAdapter.SurferPostItemViewHolder>() {

    inner class SurferPostItemViewHolder(private val rowSingleSurferPostBinding: RowSingleSurferPostBinding) :
        RecyclerView.ViewHolder(rowSingleSurferPostBinding.root) {

        fun bind(surferPost: RecyclerViewSurferPost) {
            Glide.with(context)
                .load(surferPost.profilePicUrl)
                .into(rowSingleSurferPostBinding.civSurfer)
            Glide.with(context)
                .load(surferPost.postUrl)
                .into(rowSingleSurferPostBinding.ivPostImage)

            rowSingleSurferPostBinding.tvPostBy.text = surferPost.name
            rowSingleSurferPostBinding.tvPostedOn.text = surferPost.postedOn
            rowSingleSurferPostBinding.tvPostTitle.text = surferPost.title
            rowSingleSurferPostBinding.tvLocation.text = surferPost.location
            rowSingleSurferPostBinding.tvLikeCount.text = "${surferPost.likeCount} likes"
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SurferPostItemViewHolder {

        val rowSingleSurferPostBinding: RowSingleSurferPostBinding =
            RowSingleSurferPostBinding.inflate(
                LayoutInflater.from(context),
                parent,
                false
            )

        return SurferPostItemViewHolder(rowSingleSurferPostBinding)
    }

    override fun onBindViewHolder(holder: SurferPostItemViewHolder, position: Int) {
        val surferPost = surferPosts[position]
        holder.bind(surferPost)
    }

    override fun getItemCount(): Int {
        return surferPosts.size
    }


}