### 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](http://tools.android.com/download/studio/canary/latest).
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](https://i.imgsafe.org/4442f3ad50.png)

### 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](https://i.imgsafe.org/443fc730f7.png)

Cara Membuat RecyclerView dengan Multiple View Type di Android

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Cara Membuat RecyclerView dengan Multiple View Type di Android

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hello Java

Class Interface

Algoritma Bubble Sort dengan Java

Enkripsi Caesar Cipher dengan Java

Algoritma Binary Searching dengan Java

Tutorial Android - Cara Membuat Aplikasi Lampu di Android