This article is the introduction of RecyclerView entry base series of the fourth article. If you already have some knowledge of creating RecyclerView, read on. If you are not already familiar with it, I suggest you read the first article in this series.

You can add context information to your application data by adding headers to RecyclerView. Although you can also simulate the header effect by placing TextView on top of RecyclerView in the LinearLayout, the simulated header will still reside on the screen when the user slides or even slides to the bottom of the list. With a real header element, you can move the header out of the screen as the user swipes RecyclerView.

The example in this article adds headers to RecyclerView and displays different types of flowers in the list. The Header shows “Flower Finder” and shows the number of flowers in the list.

Creating the header layout

Create a layout file that defines the display effect of the Header.

<! -- Copyright2019 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>
Copy the code

Create a HeaderAdapter and a HeaderViewHolder

Create a new file to request and bind the Header’s view.

Header Adapter inherits recyclerView. Adapter< recyclerview.viewholder >().

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

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

}
Copy the code

Add a ViewHolder inherited from RecyclerView.ViewHolder to the Adapter of the Header. If you need to update the text dynamically, add a variable that represents the TextView whose content you want to update. Create a bind() function to update the TextView with the string passed in.

<! -- Copyright2019 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()
  }
}
Copy the code

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

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

class HeaderAdapter: RecyclerView.Adapter<HeaderAdapter.HeaderViewHolder>() {}Copy the code

Because Adapter inherits recyclerView.adapter, it needs to implement onCreateViewHolder(), onBindViewHolder(), and getItemCount().

  • onCreateViewHolder()Responsible for populating the view and returningHeaderViewHolder
  • getItemCount()Only the value 1 is returned, because there is only oneHeaderThe element
  • onBindViewHolder()Bind data toHeader 上
<! -- Copyright2019 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(a): Int {
    return 1
}
Copy the code

Use a ConcatAdapter in the Activity class

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

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

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

Then use ConcatAdapter to add the two adapters to RecyclerView. ConcatAdapter displays the contents of multiple adapters in turn. Add a headerAdapter before a flowersAdapter.

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

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

Run the code. And you’re done! Adding headers is as simple as that.

The next step

For complete sample code for the Header, see: github.com/android/vie…

Thanks for reading the last of RecyclerView’s series. If you haven’t read the other articles in this series, check out the list below and read it.

  • Actual combat RecyclerView | know
  • RecyclerView | use in RecyclerView ListAdapter
  • In the RecyclerView | processing RecyclerView click events