Tutorial Learn to Make RecyclerView on Android (Material Design)

Hi all, to complete the series Desain Learning Materials on Android I made, this time I will share how to make Android RecyclerView using Android Studio. Yup RecyclerView is a component of Android Material Desain, which replaces and ListView GridView. RecyclerView already well known, (not like the old days of 2014, when I learned first RecyclerView even some who use it) and is used to display a list of almost all applications.

RecyclerView also has a default animation according to the standard Google Material Design when adding or removing components. Meanwhile, to set the position of the items on the list, RecyclerView LayoutManagers use, and there is some kind of layout manager that can be used.

Then, using ViewHolder RecyclerView to keep a reference ditir- view, which used to be a point RecyclerView: ViewHolder a static class in adapter that holds the view the view that will be used to display one item of data. By using ViewHolder, initinya you can save time by using findViewById (), when you want to update the list with new data.

The last element is RecyclerView Adapter. Adapter allows you to configure how the data will appear in the data model RecyclerView as a separate item. Adapter can accept data in any form, depending on the model data is used. But usually the data stored in the ArrayList.

Create new android project

Open file dependencies build.gradle and enter the following:

The next step is to create a device for RecyclerView adapter. We will design so that the RecyclerView entry will look like in the picture above. Can I create a new XML file in res / layout, then enter the following code, the file

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:design:24.2.1'
compile 'com.android.support:support-v4:24.2.1'
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:palette-v7:24.2.1'
compile 'com.android.support:cardview-v7:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.1'
}

item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="10dip" >
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="6dip"
        android:contentDescription="TODO"
        android:src="@mipmap/ic_launcher" />
 
    <TextView
        android:id="@+id/tv_subtitle"
        android:layout_width="fill_parent"
        android:layout_height="26dip"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@id/icon"
        android:ellipsize="marquee"
        android:singleLine="true"
        android:textColor="@android:color/black"
        android:text="Description"
        android:textSize="12sp" />
 
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_subtitle"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_alignWithParentIfMissing="true"
        android:layout_toRightOf="@id/icon"
        android:gravity="center_vertical"
        android:text="Example application"
        android:textColor="@android:color/black"
        android:textSize="16sp" />
 
</RelativeLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />
 
</LinearLayout>

MyAdapter.java

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import java.util.ArrayList;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
 
    private ArrayList<String> rvData;
 
    public RecyclerViewAdapter(ArrayList<String> inputData) {
        rvData = inputData;
    }
 
    public class ViewHolder extends RecyclerView.ViewHolder {
 
        // di tutorial ini kita hanya menggunakan data String untuk tiap item
        public TextView tvTitle;
        public TextView tvSubtitle;
 
        public ViewHolder(View v) {
            super(v);
            tvTitle = (TextView) v.findViewById(R.id.tv_title);
            tvSubtitle = (TextView) v.findViewById(R.id.tv_subtitle);
        }
    }
 
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // membuat view baru
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_item, parent, false);
        // mengeset ukuran view, margin, padding, dan parameter layout lainnya
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }
 
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - mengambil elemen dari dataset (ArrayList) pada posisi tertentu
        // - mengeset isi view dengan elemen dari dataset tersebut
        final String name = rvData.get(position);
        holder.tvTitle.setText(rvData.get(position));
        holder.tvSubtitle.setText("Frau " + position);
    }
 
    @Override
    public int getItemCount() {
        // menghitung ukuran dataset / jumlah data yang ditampilkan di RecyclerView
        return rvData.size();
    }

MainActivity.java

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
 
import java.util.ArrayList;
 
/**
 * Created by Herdi_WORK on 15.09.16.
 */
public class MainActivity extends AppCompatActivity {
 
    private RecyclerView rvView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private ArrayList<String> dataSet;
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recyclerview);
        dataSet = new ArrayList<>();
        initDataset();
 
        rvView = (RecyclerView) findViewById(R.id.rv_main);
        rvView.setHasFixedSize(true);
 
        /**
         * Kita menggunakan LinearLayoutManager untuk list standar
         * yang hanya berisi daftar item
         * disusun dari atas ke bawah
         */
        layoutManager = new LinearLayoutManager(this);
        rvView.setLayoutManager(layoutManager);
 
        adapter = new RecyclerViewAdapter(dataSet);
        rvView.setAdapter(adapter);
 
    }
 
    private void initDataset(){
 
        /**
         * Tambahkan item ke dataset
         * dalam prakteknya bisa bermacam2
         * tidak hanya String seperti di kasus ini
         */
        dataSet.add("Karin");
        dataSet.add("Ingrid");
        dataSet.add("Helga");
        dataSet.add("Renate");
        dataSet.add("Elke");
        dataSet.add("Ursula");
        dataSet.add("Erika");
        dataSet.add("Christa");
        dataSet.add("Gisela");
        dataSet.add("Monika");
 
    }
}