Cara Mudah Membuat RecyclerView dengan Multiple View Type di android

  1. Home
  2. Blog
  3. Cara Mudah Membuat RecyclerView dengan Multiple View Type di android
BlogTutorial Komputer

Cara Mudah Membuat RecyclerView dengan Multiple View Type di android

WarungKomputer.com-Pada tutorial ini, saya akan coba menjelaskan bagaimana Cara Mudah Membuat RecyclerView dengan Multiple View Type di android. 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.

Cara Mudah Membuat RecyclerView dengan Multiple View Type di android

Cara Mudah Membuat RecyclerView dengan Multiple View Type di android

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

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.

Akhir kata:

Semoga artikel Cara Mudah Membuat RecyclerView dengan Multiple View Type di android bisa bermanfaat untuk kalian semua

SUMBER:
codepolitan.com

Tags: , , ,
Warung Komputer menyediakan layanan Jasa Pembuatan Website, SEO, Digital Marketing dan Jasa Service Laptop/Komputer yang memiliki tenaga ahli professional dan berpengalaman.

Warung Komputer | Your Trusted IT Partner
Telpon/WhatsApp : 0811-1014-930
Email : mail@warungkomputer.co.id
Website : warungkomputer.com

Artikel Terkait

Cara Membuat Login User dan Session Check untuk Mobile Aplikasi
Cara Mudah Membuat Chat Bot Sederhana di Android

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Kategori Artikel

Archives

Menu