RecyclerView | Use headers in RecyclerView to be one step faster

This article is to introduce RecyclerView Start Basics series Part IV of. If you already have a certain understanding of creating RecyclerView, please continue reading this article. If you are not already familiar with it, I suggest you read first article .

You can by RecyclerView adding the Header to supplement context information for the application data. Although you can also LinearLayout TextView on RecyclerView of 060c2cab342043 in 060c2cab342040 to simulate the effect of the header, this simulated header will still stay on the screen when the user swipes the screen or even when the user slides to the bottom of the list. Using the real header element, you can realize that when the user slides RecyclerView , the header moves out of the screen.

Examples in this article will RecyclerView added in Header , the list will display different types of flowers. Header displays "Flower Finder" and displays the number of flowers in the list.

Create header layout

Create a layout file, which defines the display effect of the Header.

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

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

  <TextView
    android:id="@+id/header_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/flower_finder"
    android:textAppearance="?attr/textAppearanceHeadline3" />

  <TextView
    android:id="@+id/flower_number_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
    android:id="@+id/flower_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/flower_string"
    android:textAppearance="?attr/textAppearanceHeadline6" />

</LinearLayout>

Create HeaderAdapter and HeaderViewHolder

Create a new file to request and bind the view of Header

Header of Adapter inherited from RecyclerView.Adapter<RecyclerView.ViewHolder>() .

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

class HeaderAdapter: RecyclerView.Adapter<RecyclerView.ViewHolder>(){

}

In Header of Adapter , add a RecyclerView.ViewHolder ViewHolder . If you need to update the text dynamically, add a variable representing TextView needs to be updated. Create the bind() function to update the TextView with the incoming string.

 <!-- Copyright 2019 Google LLC. 
    SPDX-License-Identifier: Apache-2.0 -->
 
 class HeaderViewHolder(view: View) : RecyclerView.ViewHolder(view){
   private val flowerNumberTextView: TextView = itemView
     .findViewById(R.id.flower_number_text)
 
   fun bind(flowerCount: Int) {
     flowerNumberTextView.text = flowerCount.toString()
  }
}

In the class definition, modify Adapter parameter table to receive HeaderViewHolder .

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

class HeaderAdapter: RecyclerView.Adapter<HeaderAdapter.HeaderViewHolder>() {

}

Since Adapter inherits from RecyclerView.Adapter , it needs to implement onCreateViewHolder() , onBindViewHolder() and getItemCount() .

• onCreateViewHolder() is responsible for filling the view and returns HeaderViewHolder
• getItemCount() only returns the value 1, because there is only one Header element
• onBindViewHolder() binds data to Header

 <!-- Copyright 2019 Google LLC. 
    SPDX-License-Identifier: Apache-2.0 -->
 
 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HeaderViewHolder {
     val view = LayoutInflater.from(parent.context)
         .inflate(R.layout.header_item, parent, false)
     return HeaderViewHolder(view)
 }
 
override fun onBindViewHolder(holder: HeaderViewHolder, position: Int) {
    holder.bind(flowerCount)
}

override fun getItemCount(): Int {
    return 1
}

in the Activity class

In the Activity class, create a variable representing HeaderAdapter() and place it on the Adapter of RecyclerView.

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

val headerAdapter = HeaderAdapter()
val flowersAdapter = FlowersAdapter { flower -> adapterOnClick(flower) }

Then use ConcatAdapter to add these two RecyclerView to 060c2cab3422fb. ConcatAdapter will display the contents of multiple Adapters in sequence. In flowersAdapter added before headerAdapter .

<!-- Copyright 2019 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 -->

val concatAdapter = ConcatAdapter(headerAdapter, flowersAdapter)
recyclerView.adapter = concatAdapter

Run the code. That's it! Adding Header is as simple as that.

Next

For the complete sample code of Header, please refer to: https://github.com/android/views-widgets-samples/tree/main/RecyclerViewKotlin

Thanks for reading the last article of RecyclerView series If you have not read the other articles in this series, please refer to the following list and read.

• Actual Combat | Meet RecyclerView
• RecyclerView | Use ListAdapter in RecyclerView
• RecyclerView | Handling click events in RecyclerView