RecyclerView is a very powerful widget that helps you display list data flexibly. When I began to learn RecyclerView, I found that there were many resources available for reference for complex list interface, but few resources available for simple list presentation. Although the structure of RecyclerView looks complicated at first glance, you will find that it is very simple and clear after in-depth understanding.

This article implements a list of different flower names by creating a simple RecyclerView. In the process of realization, I will also knead every part of RecyclerView to show you, so that you can achieve in their own applications.

RecyclerView is what? Why did you choose it?

RecyclerView is a container for displaying data in a list or grid form, such as text or photos.

When the list slides, only a few neighboring views actually appear on the screen. As the view slides off the screen, RecyclerView reuses it and populates it with new data. Because it recycles existing structures rather than constantly creating new list items, it can improve the time and space efficiency of the application.

The pink squares show the entries that are being displayed on the screen, and the yellow squares show how entries that are not visible on the screen are recycled and converted into new views

Why do you need to use RecyclerView?

  • RecyclerView uses ViewHolder, which improves performance because it can access the view of an entry without frequently calling the findViewById() method;
  • RecyclerView uses LayoutManager, which supports scrolling and scrolling lists, as well as staggered and grid lists. You can also create custom LayoutManagers;
  • RecyclerView provides the default entry animation and custom animation entry.

In short, RecyclerView combines flexibility and personalization, so it is a powerful tool.

Implement RecyclerView

This article will show you how to implement a simple RecyclerView, using it to display the names of different kinds of flowers. The following code uses Kotlin, but RecyclerView can also be used in the Java language.

Start by creating a project in Android Studio and using the Empty Activity template. Set the project name, and select Kotlin as the language for the project.

Then add the latest RecyclerView dependency to the build.gradle file at app level.

2019 Google LLC. SPDX-License-Identifier: Apache 2.0 -- > / / in the https://developer.android.google.cn/jetpack/androidx/releases/recyclerview for the latest version number def Recyclerview_version = "1.1.0" implementation 'androidx. Recyclerview: recyclerview: $recyclerview_versionCopy the code

RecyclerView data

One of the most important components of RecyclerView is the data that needs to be displayed. For more complex applications, the data may come from a database or from the network, but here we simply use string resource files as the data source for the application.

In the strings. XML file, create an array of strings to hold the names of the flowers.

 <! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 -->

<resources>
    <string name="app_name">RecyclerSample</string>
    <string-array name="flower_array">
        <item>Lily</item>
        <item>Poppy</item>
        <item>Sunflower</item>
        <item>Freesia</item>
        <item>Daisy</item>
        <item>Rose</item>
        <item>Daffodil</item>
        <item>Lavender</item>
        <item>Peony</item>
        <item>Lilac</item>
        <item>Dahlia</item>
        <item>Tulip</item>
        <item>Dandelion</item>
        <item>Geranium</item>
        <item>Gardenia</item>
        <item>Rhododendron</item>
        <item>Azalea</item>
    </string-array>

</resources>
Copy the code

Then, create a class named Datasource that accepts a Context parameter. Create a function called getFlowerList() that returns a list of flower names.

<! -- Copyright 2019 Google LLC. Spdx-license-identifier: apache-2.0 --> Class Datasource(val context: Context) { fun getFlowerList(): Array<String> { return context.resources.getStringArray(R.array.flower_array) } }Copy the code

In mainActivity.onCreate (), create a variable called flowerList and assign the return result from getFlowerList() to it.

<! -- Copyright 2019 Google LLC.spdx-license-Identifier: apache-2.0 --> Override fun onCreate(savedInstanceState: Copyright 2019 Google LLC.spdx-license-Identifier: apache-2.0 --> Override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val flowerList = Datasource(this).getFlowerList() }Copy the code

RecyclerView layout

Next, replace TextView with RecyclerView in the Activity_main layout file and set its layoutManager to The LinearLayoutManager. Using the LinearLayoutManager means that the future data will be displayed as a vertical or horizontal list (the default is vertical).

 <! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 -->

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layoutManager="LinearLayoutManager"/>
</FrameLayout>
Copy the code

Item table layout

The diagram above shows a RecyclerView that contains data entries. Here, RecyclerView entries (items) will contain the name of the flower.

Create a new layout file called flower_item that determines the display layout of each entry. In this case, the layout only needs to display the name of a flower, so all you need is a TextView.

<! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 -->

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

    <TextView
        android:id="@+id/flower_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="32sp" />
</FrameLayout>
Copy the code

Break up the Adapter classes

Now comes the RecyclerView, which is the ViewHolder and Adapter classes. The ViewHolder is responsible for storing the information needed to display each individual entry in the RecyclerView. RecyclerView simply needs to create ViewHolder for the number of entries currently displayed plus a few Viewholders in the cache. As the user swipes the screen, the ViewHolder is reclaimed (populated with new data), the existing entry disappears on one end, and a new entry is displayed on the other. The Adapter class gets the data from the data source and passes it to the ViewHolder that is updating the view it is holding. The following figure shows the collaboration between RecyclerView, Adapter, ViewHolder, and data.

Create the Adapter

Create a class called FlowerAdapter with the list data that you want to display as its parameters.

<! -- Copyright 2019 Google LLC. Spdx-license-identifier: Apache-2.0 --> Class FlowerAdapter(val flowerList: Array<String>) { }Copy the code

Create the ViewHolder

Create an inner class called FlowerViewHolder that can accept an itemView as an argument. In the ViewHolder, create a variable to reference the TextView and point it to the corresponding view in the entry layout. Then create bind(), which associates the name of the flower (string) with the UI carrying the data (flowerTextView). The bind() function takes the string passed in and treats it as the text content of the flowerTextView.

<! Copyright 2019 Google LLC. spdx-license-Identifier: apache-2.0 --> class FlowerViewHolder(itemView: View) : Copyright 2019 Google LLC. spdx-license-Identifier: apache-2.0 --> Class FlowerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){ private val flowerTextView:TextView = itemView.findViewById(R.id.flower_text) fun bind(word: String){ flowerTextView.text = word } }Copy the code

Inheritance RecyclerView. Adapter

Update the FlowerAdapter class definition to inherit the RecyclerView.Adapter class and pass the FlowerViewHolder as a parameter.

<! -- Copyright 2019 Google LLC. Spdx-license-identifier: Apache-2.0 --> Class FlowerAdapter(val flowerList: Array<String>) : RecyclerView.Adapter<FlowerAdapter.FlowerViewHolder>() { }Copy the code

Rewriting the recyclerView.adapter class requires rewriting three methods onCreateViewHolder(), onBindViewHolder(), and getItemCount().

Rewrite onCreateViewHolder ()

This method is called when ViewHolder is created. In this method initialization and fill RecyclerView in the table view. This view uses the layout we created earlier to display the text.

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

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FlowerViewHolder {
  val view = LayoutInflater.from(parent.context)
  .inflate(R.layout.flower_item, parent, false)
  return FlowerViewHolder(view)
}
Copy the code

Rewrite onBindViewHolder ()

OnBindViewHolder () is called with the ViewHolder argument and a position that represents the position of the bound entry in the flowerList. This location can be used to extract the data needed for the table entry and pass the data to the ViewHolder to bind the data to the corresponding UI.

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

override fun onBindViewHolder(holder: FlowerViewHolder, position: Int) {
  holder.bind(flowerList[position])
}
Copy the code

Rewrite getItemCount ()

RecyclerView displays a list, so it needs to know how many items there are in the list. Since the flowerList is the data source, simply return its length.

<! Copyright 2019 Google LLC.spdx-license-Identifier: apache-2.0 --> Override fun getItemCount(): Copyright 2019 Google LLC.spdx-license-Identifier: apache-2.0 --> Override fun getItemCount(): Int { return flowerList.size }Copy the code

Complete the Adapter code

<! -- Copyright 2019 Google LLC. Spdx-license-identifier: Apache-2.0 --> Class FlowerAdapter(val flowerList: Array<String>) : RecyclerView. Adapter < FlowerAdapter. FlowerViewHolder > () {/ / item description table view and put it in class in the RecyclerView FlowerViewHolder (itemView:  View) : RecyclerView.ViewHolder(itemView) { private val flowerTextView: TextView = itemView.findViewById(R.id.flower_text) fun bind(word: String) {flowerTextView.text = word}} // Return a new ViewHolder override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FlowerViewHolder { val view = LayoutInflater.from(parent.context) .inflate(R.layout.flower_item, parent, Return FlowerViewHolder(view)} Override fun getItemCount(): Int {return flowerList.size} // Display a specified position of data override fun onBindViewHolder(holder: FlowerViewHolder, position: Int) { holder.bind(flowerList[position]) } }Copy the code

Connect to the MainActivity

We have created the layout, data list, and Adapter. Now we can add RecyclerView to the MainActivity and assign Adapter to it.

Define a variable called recyclerView and assign recyclerView from Activity_main to recyclerView. Use the FlowerAdapter as the adapter for your recyclerView.

<! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Class MainActivity: Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Class MainActivity: AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val flowerList = Datasource(this).getFlowerList() val recyclerView: RecyclerView = findViewById(R.id.recycler_view) recyclerView.adapter = FlowerAdapter(flowerList) } }Copy the code

Now let’s run it and see how it works:

The next step

The full code can be found here.

The example above shows how to implement several components of RecyclerView to display simple text elements. Of course, RecyclerView can contain more interesting and complex elements, which we will show in future articles and examples.

For more resources, please see:

  • RecyclerView Sample — Kotlin
  • RecyclerView Sample — Java
  • RecyclerView Documentation
  • Create a List with RecyclerView