How to add headers and footers to a RecyclerView in Kotlin Android

How to add headers and footers to a RecyclerView in Kotlin Android.

Here is a step-by-step tutorial on how to add headers and footers to a RecyclerView in Kotlin Android.

Step 1: Create a new Android project

Start by creating a new Android project in Android Studio. Give it a suitable name and choose the minimum SDK version you want to support.

Step 2: Add RecyclerView dependency

Open the build.gradle file of your app module and add the RecyclerView dependency to the dependencies block:

implementation 'androidx.recyclerview:recyclerview:1.2.0'

Sync your project to add the dependency.

Step 3: Create layout files

Create two layout files for the header and footer views. For example, you can create header_layout.xml and footer_layout.xml in the res/layout directory.

In each layout file, define the UI elements you want to include in the header and footer respectively.

Step 4: Create ViewHolder classes

Create two ViewHolder classes, one for the header and one for the footer. These classes will hold references to the header and footer views.

class HeaderViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    // Initialize header view elements here
}

class FooterViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    // Initialize footer view elements here
}

Step 5: Create Adapter class

Create an Adapter class that extends RecyclerView.Adapter and implements the necessary methods.

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

    private val HEADER_VIEW = 0
    private val FOOTER_VIEW = 1

    // Override getItemViewType to return the correct view type
    override fun getItemViewType(position: Int): Int {
        return when (position) {
            0 -> HEADER_VIEW
            items.size + 1 -> FOOTER_VIEW
            else -> super.getItemViewType(position)
        }
    }

    // Override onCreateViewHolder to inflate the header or footer views
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            HEADER_VIEW -> {
                val headerView = LayoutInflater.from(parent.context).inflate(R.layout.header_layout, parent, false)
                HeaderViewHolder(headerView)
            }
            FOOTER_VIEW -> {
                val footerView = LayoutInflater.from(parent.context).inflate(R.layout.footer_layout, parent, false)
                FooterViewHolder(footerView)
            }
            else -> {
                // Inflate your item view layout here
                val itemView = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
                ItemViewHolder(itemView)
            }
        }
    }

    // Override onBindViewHolder to bind data to the header or footer views
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is HeaderViewHolder -> {
                // Bind header view elements here
            }
            is FooterViewHolder -> {
                // Bind footer view elements here
            }
            else -> {
                // Bind item view elements here
                val itemViewHolder = holder as ItemViewHolder
                val item = items[position - 1]
                itemViewHolder.bind(item)
            }
        }
    }

    // Override getItemCount to include the header and footer views
    override fun getItemCount(): Int {
        return items.size + 2
    }

    // Create an ItemViewHolder class for your items
    class ItemViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // Initialize item view elements here
        fun bind(item: String) {
            // Bind item data to the view elements here
        }
    }
}

Step 6: Set up RecyclerView in your activity

In your activity layout file, add a RecyclerView element.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

In your activity class, find the RecyclerView by its ID and set up the adapter and layout manager.

val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
recyclerView.adapter = MyAdapter(items)
recyclerView.layoutManager = LinearLayoutManager(this)

Step 7: Run the app

Build and run your app on an emulator or a physical device. You should now see the header and footer views displayed above and below the list of items in the RecyclerView.

That's it! You have successfully added headers and footers to a RecyclerView in Kotlin Android.