How to implement sticky footer with parallax effect in a RecyclerView in Kotlin Android

How to implement sticky footer with parallax effect in a RecyclerView in Kotlin Android.

Here is a detailed step-by-step tutorial on how to implement a sticky footer with a parallax effect in a RecyclerView in Kotlin Android:

1. Create a new Android project in Kotlin and add the necessary dependencies for RecyclerView and CardView in your app's build.gradle file:

dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.2.0'
    implementation 'androidx.cardview:cardview:1.0.0'
}

2. Create a new XML layout file for the item in your RecyclerView. This layout will contain the content for each item in the list, including the footer view. For example, you can create a file called item_layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- Add your item content here -->

    <TextView
        android:id="@+id/footerTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Footer Text"
        android:gravity="center"
        android:padding="16dp"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white" />

</LinearLayout>

3. Create a new class for your RecyclerView adapter, which extends RecyclerView.Adapter. Inside the adapter, define a ViewHolder class that extends RecyclerView.ViewHolder and holds references to the views in the item layout:

class MyAdapter(private val items: List<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.bind(item)
    }

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

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val footerTextView: TextView = itemView.findViewById(R.id.footerTextView)

        fun bind(item: String) {
            // Bind your item data to the views here
            footerTextView.text = item
        }
    }
}

4. In your activity or fragment, create an instance of the RecyclerView and set its layout manager and adapter:

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
val layoutManager = LinearLayoutManager(this)
recyclerView.layoutManager = layoutManager

val items = listOf("Item 1", "Item 2", "Item 3") // Replace with your actual data
val adapter = MyAdapter(items)
recyclerView.adapter = adapter

5. To implement the sticky footer effect, create a custom RecyclerView.ItemDecoration that offsets the footer view based on the scroll position of the RecyclerView. Create a new class called StickyFooterItemDecoration:

class StickyFooterItemDecoration(private val footerView: View) : RecyclerView.ItemDecoration() {

    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)
        
        val lastChild = parent.getChildAt(parent.childCount - 1)
        val lastChildAdapterPosition = parent.getChildAdapterPosition(lastChild)
        
        // Check if the last visible item is the footer view
        if (lastChildAdapterPosition == parent.adapter?.itemCount?.minus(1)) {
            val top = lastChild.bottom.toFloat()
            val bottom = top + footerView.height
            c.drawRect(0f, top, parent.width.toFloat(), bottom, footerView.background)
            footerView.translationY = top
        }
    }
}

6. Apply the StickyFooterItemDecoration to your RecyclerView:

val footerView: View = findViewById(R.id.footerView)
val itemDecoration = StickyFooterItemDecoration(footerView)
recyclerView.addItemDecoration(itemDecoration)

7. Lastly, add a parallax effect to the footer view. In your activity or fragment, add a scroll listener to the RecyclerView and update the translationY of the footer view based on the scroll position:

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        
        val offset = recyclerView.computeVerticalScrollOffset()
        footerView.translationY = offset / 2f // Adjust the parallax effect speed as desired
    }
})

That's it! You have successfully implemented a sticky footer with a parallax effect in a RecyclerView in Kotlin Android. Run your app to see the result.