### 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](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 ``` 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 ``` ### 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 { // storing data in adapter private final LinkedList 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 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 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.

rifqi31

Learn to make list using RecyclerView

Join Our Newsletter. No Spam, Only the good stuff.