Learn to make list using RecyclerView
Tags: android, java, tutorial, recyclerview
Published: 2020-05-31 10:05:08

### 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 :

<img src="https://developer.android.com/training/material/images/RecyclerView.png"/>

### 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](https://codelabs.developers.google.com/android-training/) 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 :

```xml
   <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:
```xml
	  <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](https://codelabs.developers.google.com/android-training/) 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 :
```java
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 :


   ```java
    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 :

   ```java 
    // 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 :
   ```java 
	// 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.