Learn to make list using RecyclerView

Rifqi Muttaqin — Sun, 31 May 2020 10:05:08 +0000

Definition

Firstly before we use that component, we must know what is RecyclerView? , and why we need that? And what the purpose of implementing this component to our app. What is RecyclerView? As references from Android documentation, RecyclerView is a similar way with ListView but with extra features, a good performance approach to displaying the list, and more benefits for displaying a large amount of data. Why we must use RecyclerView instead using ListView?, honestly is depending on yourself, some cases in our app just need ListView because the data for the list to display on the app are small, just bunch of text from the list, and implementing are simple that way, but RecyclerView more way modern and flexible, and for implementation, we need an understanding concept of RecyclerView. Here the diagram :

Dataset

All type of data we can show to the RecyclerView like :

Text
Picture
Icon

The data can become from anywhere, like :

Local database
Direct data with programmatically way
response request from API

Adapter

The Adapter has a purpose to helping interface with have no compatible for work correctly. In the RecyclerView the Adapter is ‘bridge’ for data and interface. An adapter is a carrier between the data and interface, it can receive or take the data.

RecyclerView

As the earlier article explained, RecyclerView is the component to create a list on the app, with flexible and good performance. The LayoutManager is positioning an item to the app to manage reuse items if the item not seeing by a user.

Add Dependency and Implement Component

For early guys who still learning about fundamentals, I will try to explain what I learned. Hopefully, the reader understands this implementation, otherwise, you can deeply understand using codelabs from google. For dependency you just add implementation “androidx.recyclerview:recyclerview:1.1.0 on your build.gradlew file. and for implementation into your layout, you just add using this code :

   <androidx.recyclerview.widget.RecyclerView
    android:id=“@+id/main_menu”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content” />

for android:layout_width and android:layout_height is depending on your case, which is your design or your parent component. After you call the main component of recyclerview, we need to create another layout for an item, for example, we create an item with icon on the left and item name in the right, the code looks like this:

      <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android=“http://schemas.android.com/apk/res/android”
        xmlns:app=“http://schemas.android.com/apk/res-auto”
        xmlns:tools=“http://schemas.android.com/tools”
        android:layout_width=“match_parent”
        android:layout_height=“wrap_content”
        android:background=“?attr/selectableItemBackground”
        android:clickable=“true”
        android:orientation=“horizontal”
        android:paddingVertical=“15dp”
        android:focusable=“true”>

        <ImageView
            android:id=“@+id/menu_icon”
            android:layout_width=“0dp”
            android:layout_height=“wrap_content”
            android:layout_weight=“1”
            android:contentDescription=“@string/menu_desc”
            android:paddingStart=“12dp”
            android:paddingLeft=“12dp”
            android:paddingEnd=“12dp”
            android:tint=“@android:color/white”
            app:layout_constraintStart_toStartOf=“parent”
            app:layout_constraintTop_toTopOf=“parent” />

        <TextView
            android:id=“@+id/menu_item”
            android:layout_width=“wrap_content”
            android:layout_height=“wrap_content”
            android:textSize=“14sp”
            android:textStyle=“bold”
            android:textColor=“@android:color/white”
            app:layout_constraintBottom_toBottomOf=“parent”
            app:layout_constraintStart_toEndOf=“@+id/menu_icon”
            app:layout_constraintTop_toTopOf=“parent” />
    </androidx.constraintlayout.widget.ConstraintLayout>

Create Adapter and Model

In the codelabs tutorial, you can directly insert data without using Model, but for good design and easy to understand and maintain in the future, we create an adapter and model class, surely in a different file. Here the example of Model I used to this article :

public class MenuModel {
    private String menuName;
    private int iconName;

    // constructor
    public MenuModel(String menuNameParam, int iconNameParam) {
        menuName = menuNameParam;
        iconName = iconNameParam;
    }

    // getter
    public String getMenuName() {
        return menuName;
    }

    // setter
    public void setMenuName(String menuNameParam) {
       this.menuName = menuNameParam;
    }

    // getter
    public int getIconName() {
        return iconName;
    }

    // setter
    public void setIconName(int iconNameParam) {
        this.iconName = iconNameParam;
    }
 }

Wait, why you use Java ? not using Kotlin? Why ?, I think is a personal, Java programming language that has a lot of references on the internet, and if you want to use Kotlin, I recommend understanding Java in Android then try to implement it in Kotlin way. Anyway, the code adapter looks like this :

    public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.MenuViewHolder> {

    // storing data in adapter
    private final LinkedList<MenuModel> containMenuList; // hold data in list
    private LayoutInflater mInflater; // read layout item

    class MenuViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        // define variable
        public final TextView menuTextItemView; // for display data by TextView
        public final ImageView menuImageItemView; // for display data by ImageView
        final ModelAdapter mAdapter;

        // constructor
        public MenuViewHolder(View itemView, MenuAdapter adapter) {
            super(itemView);
            menuTextItemView = itemView.findViewById(R.id.menu_item); // menu text
            menuImageItemView = itemView.findViewById(R.id.menu_icon); // menu icon
            this.mAdapter = adapter;
            // connect onClickListener
            itemView.setOnClickListener(this);
        }
        @Override
        public void onClick(View view) {
            // when item click do something...
        }
     }

     // constructor  
     // fill constructor with inflater variable, and set LinkedList to passed data  
     public MenuAdapter(Context context, LinkedList<MenuModel> paramMenuMenuList) {  
         mInflater = LayoutInflater.from(context);  
         this.menuMenuList = paramMenuMenuList;  
     }

     // recyclerview method  
     // after fill constructor adapter, then fill recyclerview method  
     @Override  
     public MenuAdapter.MenuViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
         View menuItemView = mInflater.inflate(R.layout.item_menu, parent, false);  // item layout
         return new MenuViewHolder(menuItemView, this);  
     }

     @Override  
     public void onBindViewHolder(MenuAdapter.MenuViewHolder holder, int position) {  
         // get the data model based on position  
         MenuModel menu = containMenuList.get(position);  
         // set item views  
         holder.menuTextItemView.setText(menu.getMenuName());
         holder.menuImageItemView.setImageResource(menu.getIconName());  
     }

     @Override
     public int getItemCount() {
         return containMenuList.size();
     }

Implement Adapter, and Model into Main Class

To doing this, we must assume in adapter class have holder methods, and the model class has getter and setter class including constructor, after that we declare the variable in our class like this :

    // initialize list/array for recyclerview
    private final LinkedList<MenuModel> containMenuList = new LinkedList<>();
    // call member variable from adapter
    private RecyclerView mRecyclerView;
    private MenuAdapter mAdapter;

And then implement to the main function like this, in this I’m using fragment instead Activity :

    // define root view for inflate, and call findViewById
    View rootView = inflater.inflate(R.layout.fragment_menu, container, false);

    // implement recyclerview
    // insert data into list
    containMenuList.add(new MenuModel(“History”, R.drawable.ic_history));
    containMenuList.add(new MenuModel(“Download”, R.drawable.ic_download));
    containMenuList.add(new MenuModel(“My List”, R.drawable.ic_list));

    // define adapter
    // Get a handle to the RecyclerView.
    mRecyclerView = rootView.findViewById(R.id.main_menu);
    // Create an adapter and supply the data to be displayed.
    mAdapter = new AccountAdapter(getActivity(), containMenuList);
    // Connect the adapter with the RecyclerView.
    mRecyclerView.setAdapter(mAdapter);
    // Give the RecyclerView a default layout manager.
    mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
    // add divider
    mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL));

Conclusion

Recyclerview is useful for displaying a list, the way we create a list is far different from others like react-native and flutter, but performance in the device is much great. Well, that’s a long journey for me, anyway, this is my first post on this website, and I'm sorry if my article has a bad language because English is not my primary language. Thank you and hopefully, you guys keep learning, and don't forget to stay healthy.

DEV Community: Rifqi Muttaqin