waktu tersisa untuk klaim Potongan harga Rp 300.000 dalam program Membership. Klaim Promo!
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Cara Membuat RecyclerView dengan Multiple View Type di Android

Ditulis oleh Yudi Setiawan, dipublikasi pada 23 Jan 2017 dalam kategori Tutorial
Cara Membuat RecyclerView dengan Multiple View Type di Android - CodePolitan.com

Pengantar

Pada tutorial ini, saya akan coba menjelaskan bagaimana caranya membuat View Type yang lebih dari satu pada RecyclerView. Seperti yang kita tahu bahwa RecyclerView merupakan salah satu widget yang hampir mirip seperti ListView namun, fungsinya lebih fleksible. RecyclerView berfungsi sebagai container yang menampilkan sejumlah data-data besar yang bisa di scroll secara efisien. Dan salah satu fungsinya tersebut adalah kita bisa membuat view type yang berbeda-beda atau lebih dari satu.

Persiapan

Adapun beberapa persiapan yang perlu Anda persiapkan adalah sebagai berikut:

  1. Pastikan Anda sudah memasang aplikasi Android Studio dengan versi terbaru di website canary android studio.
  2. Pastikan juga Anda memiliki koneksi internet. Karena, pada tutorial ini kita ada menambahkan library depedency

Pembuatan Project Aplikasi Dan Penambahan Library

  1. Buka aplikasi Android Studio, dan masukkan nama project-nya adalah Codepolitan - RecyclerView Multiple View Types. Selanjutnya, pilih Empty Activity dan selanjutnya pilih next sampai finish.
  2. Kemudian, buka file build.gradle(Module:app) dan tambahkan com.android.support:design:25.1.0 sehingga file build.gradle(Module:app) Anda akan menjadi seperti ini di bagian dependencies nya
    compile 'com.android.support:appcompat-v7:25.1.0'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.1.0'

Pembuatan Layout View Types

Pada tutorial ini kita akan membuat 3 layout view type. Adapun keterangan untuk ketiga view type tersebut adalah sebagai berikut:

  1. View type pertama akan menampilkan widget TextView.
  2. View type kedua akan menampilkan widget TextView dan Button.
  3. View type ketiga akan menampilkan widget TextView, EditText, dan Button.

Layout View Type Pertama

Buat layout baru dengan cara klik kanan di direktori res-layout dan pilih New-Layout resource file. Beri nama layout tersebut adalah item_tipe_pertama.xml. Dan kemudian, isikan kode layout xml berikut.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view_item_tipe_pertama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Layout View Type Kedua

Buat layout baru dan beri nama item_tipe_kedua.xml dan berikut kode layout-nya.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view_item_tipe_kedua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/button_ok_item_tipe_kedua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text_view_item_tipe_kedua"
        android:layout_centerHorizontal="true"
        android:text="OK" />

</RelativeLayout>

Layout View Type Ketiga

Buat layuot baru dan beri nama item_tipe_ketiga.xml dan berikut kode layout-nya.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view_item_tipe_ketiga"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nama lengkap" />

    <EditText
        android:id="@+id/edit_text_nama_lengkap_item_tipe_ketiga"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text_view_item_tipe_ketiga"/>

    <Button
        android:id="@+id/button_ok_item_tipe_ketiga"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/edit_text_nama_lengkap_item_tipe_ketiga"
        android:text="OK" />

</RelativeLayout>

Layout Utama

Kemudian, pada layout utama atau activity_main kita tambahkan widget RecyclerView kedalamnya seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="ysn.codepolitan_recyclerviewwithmultipleviewtypes.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

</RelativeLayout>

Adapter RecyclerView

Buat package baru di Java dan beri nama adapter. Selanjutnya, buat class baru di dalam package tersebut dan beri nama AdapterMain.java. Dan isikan source code berikut.

package ysn.codepolitan_recyclerviewwithmultipleviewtypes.adapter;

import android.content.Context;
import android.support.design.widget.Snackbar;
import android.support.v7.widget.RecyclerView;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

import ysn.codepolitan_recyclerviewwithmultipleviewtypes.R;

/**
 * Created by root on 22/01/17.
 */

public class AdapterMain extends RecyclerView.Adapter<AdapterMain.ViewHolder> {

    public static final int TYPE_1 = 1;
    public static final int TYPE_2 = 2;
    public static final int TYPE_3 = 3;

    Context contetxt;
    ArrayList<Integer> listViewType;

    public AdapterMain(ArrayList<Integer> listViewType, Context contetxt) {
        this.listViewType = listViewType;
        this.contetxt = contetxt;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        switch (viewType) {
            case TYPE_1:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tipe_pertama, null);
                return new ItemPertamaViewHolder(view);
            case TYPE_2:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tipe_kedua, null);
                return new ItemKeduaViewHolder(view);
            case TYPE_3:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tipe_ketiga, null);
                return new ItemKetigaViewHolder(view);
            default:
                return null;
        }
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        int viewType = listViewType.get(position);
        switch (viewType) {
            case TYPE_1:
                ItemPertamaViewHolder itemPertamaViewHolder = (ItemPertamaViewHolder) holder;
                itemPertamaViewHolder.textViewItemPertama.setText("View Type tipe pertama dengan position: " + position);
                break;
            case TYPE_2:
                ItemKeduaViewHolder itemKeduaViewHolder = (ItemKeduaViewHolder) holder;
                itemKeduaViewHolder.textViewItemKedua.setText("View Type tipe kedua dengan position: " + position);
                break;
            case TYPE_3:
                ItemKetigaViewHolder itemKetigaViewHolder = (ItemKetigaViewHolder) holder;
                itemKetigaViewHolder.textViewItemKetiga.setText("Nama lengkap[" + position + "]");
        }
    }

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

    @Override
    public int getItemViewType(int position) {
        return listViewType.get(position);
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public ViewHolder(View itemView) {
            super(itemView);
        }
    }

    class ItemPertamaViewHolder extends ViewHolder {

        //  komponen
        TextView textViewItemPertama;

        public ItemPertamaViewHolder(View itemView) {
            super(itemView);
            textViewItemPertama = (TextView) itemView.findViewById(R.id.text_view_item_tipe_pertama);
        }
    }

    class ItemKeduaViewHolder extends ViewHolder {

        //  komponen
        TextView textViewItemKedua;
        Button buttonOkItemKedua;

        public ItemKeduaViewHolder(final View itemView) {
            super(itemView);
            textViewItemKedua = (TextView) itemView.findViewById(R.id.text_view_item_tipe_kedua);
            buttonOkItemKedua = (Button) itemView.findViewById(R.id.button_ok_item_tipe_kedua);
            buttonOkItemKedua.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(contetxt, textViewItemKedua.getText().toString(), Toast.LENGTH_LONG)
                            .show();
                }
            });
        }
    }

    class ItemKetigaViewHolder extends ViewHolder {

        //  komponen
        TextView textViewItemKetiga;
        EditText editTextItemKetiga;
        Button buttonItemKetiga;

        public ItemKetigaViewHolder(View itemView) {
            super(itemView);
            textViewItemKetiga = (TextView) itemView.findViewById(R.id.text_view_item_tipe_ketiga);
            editTextItemKetiga = (EditText) itemView.findViewById(R.id.edit_text_nama_lengkap_item_tipe_ketiga);
            buttonItemKetiga = (Button) itemView.findViewById(R.id.button_ok_item_tipe_ketiga);
            buttonItemKetiga.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (TextUtils.isEmpty(editTextItemKetiga.getText().toString())) {
                        Toast.makeText(contetxt, textViewItemKetiga.getText().toString() + " belum di isi", Toast.LENGTH_LONG)
                                .show();
                        editTextItemKetiga.setError("Belum di isi");
                    } else {
                        Toast.makeText(contetxt, editTextItemKetiga.getText().toString(), Toast.LENGTH_LONG)
                                .show();
                    }
                }
            });
        }
    }
}

Pada kode diatas, kita beri listener pada button di view type 2 dan 3 sehingga, nanti Anda akan bisa melihat dan tahu button mana yang ditekan oleh user.

public static final int TYPE_1 = 1;
public static final int TYPE_2 = 2;
public static final int TYPE_3 = 3;

Context contetxt;
ArrayList<Integer> listViewType;

Pada kode diatas, kita membuat 3 variable integer dengan modifier static. Hal ini berguna sebagai penanda pada ArrayList listViewType agar RecyclerView bisa menampilkan view type yang berbeda-beda.

MainActivity.java

Dan yang terakhir adalah masukkan kode berikut ke dalam MainActivity.java.

package ysn.codepolitan_recyclerviewwithmultipleviewtypes;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

import ysn.codepolitan_recyclerviewwithmultipleviewtypes.adapter.AdapterMain;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerViewMain;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerViewMain = (RecyclerView) findViewById(R.id.recycler_view_main);

        //  Pada contoh kali ini kita akan membuat 10 item di dalam RecyclerView
        ArrayList<Integer> listViewType = new ArrayList<>();
        listViewType.add(AdapterMain.TYPE_1);
        listViewType.add(AdapterMain.TYPE_2);
        listViewType.add(AdapterMain.TYPE_3);
        listViewType.add(AdapterMain.TYPE_2);
        listViewType.add(AdapterMain.TYPE_3);
        listViewType.add(AdapterMain.TYPE_1);
        listViewType.add(AdapterMain.TYPE_1);
        listViewType.add(AdapterMain.TYPE_3);
        listViewType.add(AdapterMain.TYPE_2);

        //  Buat objek AdapterMain untuk recyclerViewMain
        AdapterMain adapterMain = new AdapterMain(listViewType, this);  //  this adalah mengarah ke Context (MainActivity.this)

        //  Set layout manager recyclerViewMain
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerViewMain.setLayoutManager(layoutManager);

        //  Set adapter recyclerViewMain
        recyclerViewMain.setAdapter(adapterMain);
    }
}

Struktur Direktori Project

Struktur Direktori Project

Output Program

Berikut adalah output program yang kita buat tadi. Memang agak sedikit jelek tampilannya tapi, yang perlu Anda pahami di tutorial ini adalah bahwa Anda sudah bisa membuat 2 view yang berbeda di RecyclerView. Untuk kedepannya, Anda sudah mudah untuk membuat berbagai macam layout yang Anda inginkan seperti membuat layout chat, layout timeline dan lain sebagainya. Output Program


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP