news

Minggu, 14 Juni 2020

Belajar Recycler View Dalam Pembuatan Aplikasi Android


RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih ketimbang pendahulunya listview. 

Ia bersifat lebih fleksibel. RecyclerView memiliki kemampuan untuk menampilkan data secara efisien dalam jumlah yang besar. Terlebih jika Anda memiliki koleksi data dengan elemen yang mampu berubah-ubah sewaktu dijalankan (runtime).
201706051440121b186ca7c9c9817ed4f1d51f4e31b09c.png

Gambar di atas menerangkan beberapa komponen yang harus Anda ketahui sebelum menggunakan recyclerview.
  1. RecyclerView dan LayoutManager: Komponen antarmuka yang bertugas untuk menampilkan data set yang dimiliki di dalamnya. Layoutmanager akan mengatur posisi tampilan data baik itu secara list (vertikal), grid (baris dan kolom) atau staggered grid (grid yang memiliki susunan tak seragam / tak beraturan).
  2. Adapter: Komponen yang akan mengatur bagaimana menampilkan data set ke dalam RecyclerView. Di sinilah terjadi proses pengisian tampilan (ViewInflate) dari file layout xml untuk tiap elemen dari data yang sebelumnya terpasang (bind) ke dalam RecyclerView.
  3. Dataset: Kumpulan data yang dimiliki dan ingin ditampilkan. Bisa berupa array, list maupun obyek map.
  4. Item Animator: Ini yang spesial. Kita bisa pasang animasi untuk tiap item di dalamnya. Contoh animasi yang umum seperti penambahan (add) dan penghapusan (removal) item. Kita akan mempelajari hal ini pada materi terpisah.

Langkah-langkah mengimplementasikan recyclerview sebagai berikut :
  1. Tambahkan dependencies komponen recyclerview pada file build.gradle  level modul.
  2. Tambahkan obyek RecyclerView di berkas layout xml dari activity / fragment.
  3. Definisikan model kelas (POJO) yang akan digunakan sebagai data source.
  4. Buat berkas layout xml untuk baris item di RecyclerView.
  5. Buat sebuah kelas adapter yang inherit ke RecyclerView.Adapter dan ViewHolder untuk menampilkan tiap elemen data.
  6. Definisikan obyek RecyclerView berikut dengan bentuk yang diinginkan (bisa dalam bentuk list, grid, atau staggered) dan selanjutnya pasang obyek adapter (binding) agar bisa menampilkan koleksi data ke dalam RecyclerView.

Anda dapat memahami lebih dalam materi recyclerview dengan membaca tautan berikut ini:

Tujuan

Pada codelab kali ini kalian akan mempelajari cara menampilkan data Pahlawan ke dalam sebuah RecyclerView. Beberapa poin yang akan diulas dalam materi ini adalah :
  1. Bagaimana menggunakan Recyclerview?
  2. Berbagai macam Recyclerview seperti list, grid, dan card.
  3. Membuat onClick pada Recyclerview.
  4. Menambahkan menu pada Action Bar.

Contoh dari RecyclerView yang akan kita buat dalam dalam bentuk list, grid dan list dengan bentuk kartu menggunakan cardview di mana semuanya berada dalam satu halaman saja.
201901290940134a81dceb25a4aa5fad7ec46b00c74453.gif

Logika Dasar

Melakukan klik ke button → memanggil fragment atau activity dengan atau tanpa data → menampilkan activity atau fragment yang dituju.

Codelab RecyclerView Mode List

  1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:
    Nama ProjectMyRecyclerView
    Target & Minimum Target SDKPhone and Tablet, Api level 21
    Tipe ActivityEmpty Activity
    Activity NameMainActivity
    Use AndroidX artifactsTrue
    LanguageJava / Kotlin

  2. Setelah terbentuk, tambahkan beberapa dependensi yang akan kita gunakan pada berkas build.gradle (module: app) di bagian dependencies seperti berikut:


    1. implementation 'androidx.recyclerview:recyclerview:1.0.0'

    2. implementation 'androidx.cardview:cardview:1.0.0'

    3. implementation 'de.hdodenhof:circleimageview:3.0.0'

    4. implementation 'com.github.bumptech.glide:glide:4.9.0'


    Sehingga secara keseluruhan berkas build.gradle(module: app) Anda akan seperti ini:
  1. apply plugin: 'com.android.application'
  2.  
  3. android {
  4.     compileSdkVersion 29
  5.     defaultConfig {
  6.         applicationId "com.dicoding.myrecyclerview"
  7.         minSdkVersion 15
  8.         targetSdkVersion 29
  9.         versionCode 1
  10.         versionName "1.0"
  11.         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  12.     }
  13.     buildTypes {
  14.         release {
  15.             minifyEnabled false
  16.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  17.         }
  18.     }
  19. }
  20. dependencies {
  21.     implementation fileTree(dir: 'libs', include: ['*.jar'])
  22.     implementation 'androidx.appcompat:appcompat:1.0.2'
  23.     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
  24.     testImplementation 'junit:junit:4.12'
  25.     androidTestImplementation 'androidx.test:runner:1.2.0'
  26.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
  27.  
  28.     implementation 'androidx.recyclerview:recyclerview:1.0.0'
  29.     implementation 'androidx.cardview:cardview:1.0.0'
  30.     implementation 'de.hdodenhof:circleimageview:3.0.0'
  31.     implementation 'com.github.bumptech.glide:glide:4.9.0'
  32. }



Selanjutnya pada activity_main.xml lengkapi kodenya menjadi seperti berikut


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:id="@+id/activity_main"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent">
  7.  
  8.     <androidx.recyclerview.widget.RecyclerView
  9.         android:id="@+id/rv_heroes"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         tools:listitem="@layout/item_row_hero" />
  13. </RelativeLayout>



  1. Akan ada tanda merah di @layout/item_row_hero. Ini karena layout item_row_hero belum ditambahkan.
  2. Saatnya kita membuat sebuah item tampilan dalam bentuk berkas layout xml yang akan ditampilkan di RecyclerView. Karena data pertama kali akan ditampilkan dalam bentuk list, maka kita buat layout dengan cara klik kanan pada direktori layout → new → layout resource file dan kemudian beri nama item_row_hero.

20190125103707c2b4be9dcc3e6112a2367dcc8953e4c4
  1. Setelah terbentuk kita lengkapi tampilan tersebut menjadi seperti ini:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:orientation="horizontal"
  7.     android:padding="16dp">
  8.  
  9.     <de.hdodenhof.circleimageview.CircleImageView
  10.         android:id="@+id/img_item_photo"
  11.         android:layout_width="55dp"
  12.         android:layout_height="55dp"
  13.         android:layout_marginEnd="16dp"
  14.         android:layout_marginRight="16dp"
  15.         tools:src="@android:color/darker_gray" />
  17.     <LinearLayout
  18.         android:layout_width="match_parent"
  19.         android:layout_height="wrap_content"
  20.         android:layout_centerVertical="true"
  21.         android:layout_toEndOf="@id/img_item_photo"
  22.         android:layout_toRightOf="@id/img_item_photo"
  23.         android:orientation="vertical">
  25.         <TextView
  26.             android:id="@+id/tv_item_name"
  27.             android:layout_width="match_parent"
  28.             android:layout_height="wrap_content"
  29.             android:layout_marginBottom="8dp"
  30.             android:textSize="16sp"
  31.             android:textStyle="bold"
  32.             tools:text="@string/heroes_name" />
  34.         <TextView
  35.             android:id="@+id/tv_item_detail"
  36.             android:layout_width="match_parent"
  37.             android:layout_height="wrap_content"
  38.             android:ellipsize="end"
  39.             android:maxLines="2"
  40.             tools:text="@string/detail" />
  41.     </LinearLayout>
  42. </RelativeLayout>


tools:text bisa kita gunakan untuk placeholder di dalam editor layout. Atribut ini tidak akan terbawa saat run-time dan hanya akan nampak di dalam preview editor saja.

Catatan:Pastikan untuk ukuran android:layout_height menggunakan wrap_content semua, supaya ketika dijalankan tidak ada layout kosong / space lebar karena menggunakan match_parent, hal ini karena 1 item nya dihitung 1 layar.
Akan ada yang eror pada bagian @string/heroes_name dan @string/from. Seperti pada modul sebelumnya, Anda perlu menambahkan data String pada bagian res → values → strings.xml.



  1. <resources>
  2.     <string name="app_name">My Application</string>
  3.     <string name="heroes_name">Nama Pahlawan</string>
  4.     <string name="detail">Detail</string>
  5. </resources>



Kemudian buat sebuah kelas model data bernama Hero dengan cara klik kanan pada nama package → new → Java/Kotlin class.

201901251056348e04b45f5b971d1cb57f890a993d1e6b

Setelah itu kita bisa menambahkan kode menjadi seperti berikut:



  1. public class Hero {

  2.     private String name;

  3.     private String detail;

  4.     private int photo;

  5. }





  1. data class Hero(

  2.         var name: String = "",

  3.         var detail: String = "",

  4.         var photo: Int = 0

  5. )




Catatan: Untuk bahasa Kotlin, Anda sudah bisa memanfaatkan constructor, getter, dan setter dari sebuah data classes .



Setelah selesai kita akan membuat beberapa kelas terkait koleksi data yang ingin ditampilkan. Buat kelas baru dengan nama HeroesData .

2019012510580957dd43b24582e216774153c3f803ab81

Sebelum Anda mengubah kelas tersebut, silakan unduh berkas drawable-nya di sini. Setelah itu kita bisa menambahkan kode menjadi seperti berikut:



  1. public class HeroesData {

  2.     private static String[] heroNames = {

  3.             "Ahmad Dahlan",

  4.             "Ahmad Yani",

  5.             "Sutomo",

  6.             "Gatot Soebroto",

  7.             "Ki Hadjar Dewantarai",

  8.             "Mohammad Hatta",

  9.             "Soedirman",

  10.             "Soekarno",

  11.             "Soepomo",

  12.             "Tan Malaka"

  13.     };

  14.  

  15.     private static String[] heroDetails = {

  16.             "Salah seorang ulama dan khatib terkemuka di Masjid Besar Kasultanan Yogyakarta pada masa itu, dan ibu dari K.H. Ahmad Dahlan adalah puteri dari H. Ibrahim yang juga menjabat penghulu Kesultanan Ngayogyakarta Hadiningrat pada masa itu. KH. Ahmad Dahlan telah mempelopori kebangkitan ummat Islam untuk menyadari nasibnya sebagai bangsa terjajah yang masih harus belajar dan berbuat.",

  17.             "Jenderal TNI Anumerta Ahmad Yani (juga dieja Achmad Yani; lahir di Purworejo, Jawa Tengah, 19 Juni 1922 – meninggal di Lubang Buaya, Jakarta, 1 Oktober 1965 pada umur 43 tahun) adalah komandan Tentara Nasional Indonesia Angkatan Darat, dan dibunuh oleh anggota Gerakan 30 September saat mencoba untuk menculik dia dari rumahnya.",

  18.             "Sutomo (lahir di Surabaya, Jawa Timur, 3 Oktober 1920 – meninggal di Padang Arafah, Arab Saudi, 7 Oktober 1981 pada umur 61 tahun) lebih dikenal dengan sapaan akrab oleh rakyat sebagai Bung Tomo, adalah pahlawan yang terkenal karena peranannya dalam membangkitkan semangat rakyat untuk melawan kembalinya penjajah Belanda melalui tentara NICA, yang berakhir dengan pertempuran 10 November 1945 yang hingga kini diperingati sebagai Hari Pahlawan.",

  19.             "Jenderal TNI (Purn.) Gatot Soebroto (lahir di Sumpiuh, Banyumas, Jawa Tengah, 10 Oktober 1907 – meninggal di Jakarta, 11 Juni 1962 pada umur 54 tahun) adalah tokoh perjuangan militer Indonesia dalam merebut kemerdekaan dan juga pahlawan nasional Indonesia. Ia dimakamkan di Ungaran, kabupaten Semarang.",

  20.             "Raden Mas Soewardi Soerjaningrat (EBI: Suwardi Suryaningrat, sejak 1922 menjadi Ki Hadjar Dewantara, EBI: Ki Hajar Dewantara, beberapa menuliskan bunyi bahasa Jawanya dengan Ki Hajar Dewantoro; lahir di Pakualaman, 2 Mei 1889 – meninggal di Yogyakarta, 26 April 1959 pada umur 69 tahun; selanjutnya disingkat sebagai \"Soewardi\" atau \"KHD\") adalah aktivis pergerakan kemerdekaan Indonesia, kolumnis, politisi, dan pelopor pendidikan bagi kaum pribumi Indonesia dari zaman penjajahan Belanda. Ia adalah pendiri Perguruan Taman Siswa, suatu lembaga pendidikan yang memberikan kesempatan bagi para pribumi untuk bisa memperoleh hak pendidikan seperti halnya para priyayi maupun orang-orang Belanda.",

  21.             "Dr.(HC) Drs. H. Mohammad Hatta (lahir dengan nama Mohammad Athar, dikenal sebagai Bung Hatta; lahir di Fort de Kock (sekarang Bukittinggi, Sumatera Barat), Hindia Belanda, 12 Agustus 1902 – meninggal di Jakarta, 14 Maret 1980 pada umur 77 tahun) adalah tokoh pejuang, negarawan, ekonom, dan juga Wakil Presiden Indonesia yang pertama. Ia bersama Soekarno memainkan peranan penting untuk memerdekakan bangsa Indonesia dari penjajahan Belanda sekaligus memproklamirkannya pada 17 Agustus 1945. Ia juga pernah menjabat sebagai Perdana Menteri dalam Kabinet Hatta I, Hatta II, dan RIS. Ia mundur dari jabatan wakil presiden pada tahun 1956, karena berselisih dengan Presiden Soekarno. Hatta juga dikenal sebagai Bapak Koperasi Indonesia.",

  22.             "Jenderal Besar Raden Soedirman (EYD: Sudirman; lahir 24 Januari 1916 – meninggal 29 Januari 1950 pada umur 34 tahun) adalah seorang perwira tinggi Indonesia pada masa Revolusi Nasional Indonesia. Menjadi panglima besar Tentara Nasional Indonesia pertama, ia secara luas terus dihormati di Indonesia. Terlahir dari pasangan rakyat biasa di Purbalingga, Hindia Belanda, Soedirman diadopsi oleh pamannya yang seorang priyayi. Setelah keluarganya pindah ke Cilacap pada tahun 1916, Soedirman tumbuh menjadi seorang siswa rajin; ia sangat aktif dalam kegiatan ekstrakurikuler, termasuk mengikuti program kepanduan yang dijalankan oleh organisasi Islam Muhammadiyah. Saat di sekolah menengah, Soedirman mulai menunjukkan kemampuannya dalam memimpin dan berorganisasi, dan dihormati oleh masyarakat karena ketaatannya pada Islam. Setelah berhenti kuliah keguruan, pada 1936 ia mulai bekerja sebagai seorang guru, dan kemudian menjadi kepala sekolah, di sekolah dasar Muhammadiyah; ia juga aktif dalam kegiatan Muhammadiyah lainnya dan menjadi pemimpin Kelompok Pemuda Muhammadiyah pada tahun 1937. Setelah Jepang menduduki Hindia Belanda pada 1942, Soedirman tetap mengajar. Pada tahun 1944, ia bergabung dengan tentara Pembela Tanah Air (PETA) yang disponsori Jepang, menjabat sebagai komandan batalion di Banyumas. Selama menjabat, Soedirman bersama rekannya sesama prajurit melakukan pemberontakan, namun kemudian diasingkan ke Bogor.",

  23.             "Dr.(H.C.) Ir. H. Soekarno (ER, EYD: Sukarno, nama lahir: Koesno Sosrodihardjo) (lahir di Surabaya, Jawa Timur, 6 Juni 1901 – meninggal di Jakarta, 21 Juni 1970 pada umur 69 tahun) adalah Presiden pertama Republik Indonesia yang menjabat pada periode 1945–1967. Ia memainkan peranan penting dalam memerdekakan bangsa Indonesia dari penjajahan Belanda. Ia adalah Proklamator Kemerdekaan Indonesia (bersama dengan Mohammad Hatta) yang terjadi pada tanggal 17 Agustus 1945. Soekarno adalah yang pertama kali mencetuskan konsep mengenai Pancasila sebagai dasar negara Indonesia dan ia sendiri yang menamainya.",

  24.             "Prof. Mr. Dr. Soepomo (Ejaan Soewandi: Supomo; lahir di Sukoharjo, Jawa Tengah, 22 Januari 1903 – meninggal di Jakarta, 12 September 1958 pada umur 55 tahun) adalah seorang pahlawan nasional Indonesia. Soepomo dikenal sebagai arsitek Undang-undang Dasar 1945, bersama dengan Muhammad Yamin dan Soekarno.",

  25.             "Tan Malaka atau Ibrahim gelar Datuk Sutan Malaka (lahir di Nagari Pandam Gadang, Suliki, Lima Puluh Kota, Sumatera Barat, 2 Juni 1897 – meninggal di Desa Selopanggung, Kediri, Jawa Timur, 21 Februari 1949 pada umur 51 tahun) adalah seorang pembela kemerdekaan Indonesia, tokoh Partai Komunis Indonesia, juga pendiri Partai Murba, dan merupakan salah satu Pahlawan Nasional Indonesia."

  26.     };

  27.  

  28.     private static int[] heroesImages = {

  29.             R.drawable.ahmad_dahlan,

  30.             R.drawable.ahmad_yani,

  31.             R.drawable.bung_tomo,

  32.             R.drawable.gatot_subroto,

  33.             R.drawable.ki_hadjar_dewantara,

  34.             R.drawable.mohammad_hatta,

  35.             R.drawable.sudirman,

  36.             R.drawable.sukarno,

  37.             R.drawable.supomo,

  38.             R.drawable.tan_malaka

  39.     };

  40.  

  41.     static ArrayList<Hero> getListData() {

  42.         ArrayList<Hero> list = new ArrayList<>();

  43.         for (int position = 0; position < heroNames.length; position++) {

  44.             Hero hero = new Hero();

  45.             hero.setName(heroNames[position]);

  46.             hero.setDetail(heroDetails[position]);

  47.             hero.setPhoto(heroesImages[position]);

  48.             list.add(hero);

  49.         }

  50.         return list;

  51.     }

  52. }





































  1. object HeroesData {

  2.     private val heroNames = arrayOf("Ahmad Dahlan", 

  3.             "Ahmad Yani", 

  4.             "Sutomo", 

  5.             "Gatot Soebroto", 

  6.             "Ki Hadjar Dewantarai", 

  7.             "Mohammad Hatta", 

  8.             "Soedirman", 

  9.             "Soekarno", 

  10.             "Soepomo", 

  11.             "Tan Malaka")

  12.  

  13.     private val heroDetails = arrayOf("Salah seorang ulama dan khatib terkemuka di Masjid Besar Kasultanan Yogyakarta pada masa itu, dan ibu dari K.H. Ahmad Dahlan adalah puteri dari H. Ibrahim yang juga menjabat penghulu Kesultanan Ngayogyakarta Hadiningrat pada masa itu. KH. Ahmad Dahlan telah mempelopori kebangkitan ummat Islam untuk menyadari nasibnya sebagai bangsa terjajah yang masih harus belajar dan berbuat.", 

  14.             "Jenderal TNI Anumerta Ahmad Yani (juga dieja Achmad Yani; lahir di Purworejo, Jawa Tengah, 19 Juni 1922 – meninggal di Lubang Buaya, Jakarta, 1 Oktober 1965 pada umur 43 tahun) adalah komandan Tentara Nasional Indonesia Angkatan Darat, dan dibunuh oleh anggota Gerakan 30 September saat mencoba untuk menculik dia dari rumahnya.", 

  15.             "Sutomo (lahir di Surabaya, Jawa Timur, 3 Oktober 1920 – meninggal di Padang Arafah, Arab Saudi, 7 Oktober 1981 pada umur 61 tahun) lebih dikenal dengan sapaan akrab oleh rakyat sebagai Bung Tomo, adalah pahlawan yang terkenal karena peranannya dalam membangkitkan semangat rakyat untuk melawan kembalinya penjajah Belanda melalui tentara NICA, yang berakhir dengan pertempuran 10 November 1945 yang hingga kini diperingati sebagai Hari Pahlawan.", 

  16.             "Jenderal TNI (Purn.) Gatot Soebroto (lahir di Sumpiuh, Banyumas, Jawa Tengah, 10 Oktober 1907 – meninggal di Jakarta, 11 Juni 1962 pada umur 54 tahun) adalah tokoh perjuangan militer Indonesia dalam merebut kemerdekaan dan juga pahlawan nasional Indonesia. Ia dimakamkan di Ungaran, kabupaten Semarang.", 

  17.             "Raden Mas Soewardi Soerjaningrat (EBI: Suwardi Suryaningrat, sejak 1922 menjadi Ki Hadjar Dewantara, EBI: Ki Hajar Dewantara, beberapa menuliskan bunyi bahasa Jawanya dengan Ki Hajar Dewantoro; lahir di Pakualaman, 2 Mei 1889 – meninggal di Yogyakarta, 26 April 1959 pada umur 69 tahun; selanjutnya disingkat sebagai \"Soewardi\" atau \"KHD\") adalah aktivis pergerakan kemerdekaan Indonesia, kolumnis, politisi, dan pelopor pendidikan bagi kaum pribumi Indonesia dari zaman penjajahan Belanda. Ia adalah pendiri Perguruan Taman Siswa, suatu lembaga pendidikan yang memberikan kesempatan bagi para pribumi untuk bisa memperoleh hak pendidikan seperti halnya para priyayi maupun orang-orang Belanda.", 

  18.             "Dr.(HC) Drs. H. Mohammad Hatta (lahir dengan nama Mohammad Athar, dikenal sebagai Bung Hatta; lahir di Fort de Kock (sekarang Bukittinggi, Sumatera Barat), Hindia Belanda, 12 Agustus 1902 – meninggal di Jakarta, 14 Maret 1980 pada umur 77 tahun) adalah tokoh pejuang, negarawan, ekonom, dan juga Wakil Presiden Indonesia yang pertama. Ia bersama Soekarno memainkan peranan penting untuk memerdekakan bangsa Indonesia dari penjajahan Belanda sekaligus memproklamirkannya pada 17 Agustus 1945. Ia juga pernah menjabat sebagai Perdana Menteri dalam Kabinet Hatta I, Hatta II, dan RIS. Ia mundur dari jabatan wakil presiden pada tahun 1956, karena berselisih dengan Presiden Soekarno. Hatta juga dikenal sebagai Bapak Koperasi Indonesia.", 

  19.             "Jenderal Besar Raden Soedirman (EYD: Sudirman; lahir 24 Januari 1916 – meninggal 29 Januari 1950 pada umur 34 tahun) adalah seorang perwira tinggi Indonesia pada masa Revolusi Nasional Indonesia. Menjadi panglima besar Tentara Nasional Indonesia pertama, ia secara luas terus dihormati di Indonesia. Terlahir dari pasangan rakyat biasa di Purbalingga, Hindia Belanda, Soedirman diadopsi oleh pamannya yang seorang priyayi. Setelah keluarganya pindah ke Cilacap pada tahun 1916, Soedirman tumbuh menjadi seorang siswa rajin; ia sangat aktif dalam kegiatan ekstrakurikuler, termasuk mengikuti program kepanduan yang dijalankan oleh organisasi Islam Muhammadiyah. Saat di sekolah menengah, Soedirman mulai menunjukkan kemampuannya dalam memimpin dan berorganisasi, dan dihormati oleh masyarakat karena ketaatannya pada Islam. Setelah berhenti kuliah keguruan, pada 1936 ia mulai bekerja sebagai seorang guru, dan kemudian menjadi kepala sekolah, di sekolah dasar Muhammadiyah; ia juga aktif dalam kegiatan Muhammadiyah lainnya dan menjadi pemimpin Kelompok Pemuda Muhammadiyah pada tahun 1937. Setelah Jepang menduduki Hindia Belanda pada 1942, Soedirman tetap mengajar. Pada tahun 1944, ia bergabung dengan tentara Pembela Tanah Air (PETA) yang disponsori Jepang, menjabat sebagai komandan batalion di Banyumas. Selama menjabat, Soedirman bersama rekannya sesama prajurit melakukan pemberontakan, namun kemudian diasingkan ke Bogor.", 

  20.             "Dr.(H.C.) Ir. H. Soekarno (ER, EYD: Sukarno, nama lahir: Koesno Sosrodihardjo) (lahir di Surabaya, Jawa Timur, 6 Juni 1901 – meninggal di Jakarta, 21 Juni 1970 pada umur 69 tahun) adalah Presiden pertama Republik Indonesia yang menjabat pada periode 1945–1967. Ia memainkan peranan penting dalam memerdekakan bangsa Indonesia dari penjajahan Belanda. Ia adalah Proklamator Kemerdekaan Indonesia (bersama dengan Mohammad Hatta) yang terjadi pada tanggal 17 Agustus 1945. Soekarno adalah yang pertama kali mencetuskan konsep mengenai Pancasila sebagai dasar negara Indonesia dan ia sendiri yang menamainya.", 

  21.             "Prof. Mr. Dr. Soepomo (Ejaan Soewandi: Supomo; lahir di Sukoharjo, Jawa Tengah, 22 Januari 1903 – meninggal di Jakarta, 12 September 1958 pada umur 55 tahun) adalah seorang pahlawan nasional Indonesia. Soepomo dikenal sebagai arsitek Undang-undang Dasar 1945, bersama dengan Muhammad Yamin dan Soekarno.", 

  22.             "Tan Malaka atau Ibrahim gelar Datuk Sutan Malaka (lahir di Nagari Pandam Gadang, Suliki, Lima Puluh Kota, Sumatera Barat, 2 Juni 1897 – meninggal di Desa Selopanggung, Kediri, Jawa Timur, 21 Februari 1949 pada umur 51 tahun) adalah seorang pembela kemerdekaan Indonesia, tokoh Partai Komunis Indonesia, juga pendiri Partai Murba, dan merupakan salah satu Pahlawan Nasional Indonesia.")

  23.  

  24.     private val heroesImages = intArrayOf(R.drawable.ahmad_dahlan, 

  25.             R.drawable.ahmad_yani, 

  26.             R.drawable.bung_tomo, 

  27.             R.drawable.gatot_subroto, 

  28.             R.drawable.ki_hadjar_dewantara, 

  29.             R.drawable.mohammad_hatta, 

  30.             R.drawable.sudirman, 

  31.             R.drawable.sukarno, 

  32.             R.drawable.supomo, 

  33.             R.drawable.tan_malaka)

  34.  

  35.     val listData: ArrayList<Hero>

  36.         get() {

  37.             val list = arrayListOf<Hero>()

  38.             for (position in heroNames.indices) {

  39.                 val hero = Hero()

  40.                 hero.name = heroNames[position]

  41.                 hero.detail = heroDetails[position]

  42.                 hero.photo = heroesImages[position]

  43.                 list.add(hero)

  44.             }

  45.             return list

  46.         }

  47. }



























Sekarang kita akan membuat sebuah adapter yang akan memformat bagaimana tiap elemen dari koleksi data ditampilkan. Buat kelas adapter secara manual dengan klik kanan pada package utama → new → Java Class dan beri nama ListHeroAdapter.

201901251058489750e3a0b7cc51df17d005880e958291

Setelah kelas adapter berhasil dibuat, lengkapi kodenya menjadi seperti berikut:



  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     

  3. }








  1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>{

  2.  

  3. }





Maka akan ada garis merah dan ListViewHolder juga akan merah. Kita resolve satu-persatu. Pertama adalah kita tekan alt+enter/klik tombol merah pada ListViewHolder dan pilih Create class 'ListViewHolder':
2019070816280666c69bb900ea342585d7c4a52efc88ffKemudian pilih ListHeroAdapter untuk membuat kelas tersebut di dalam ListHeroAdapter.
20191119092103be8b817cb67382819171991c922b0876.pngMaka kode saat ini menjadi seperti ini:




  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     public class ListViewHolder {

  3.     }

  4. }







  1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>{

  2.    inner class ListViewHolder()

  3. }





Masih ada garis merah kita lakukan lagi alt+enter/klik tombol merah dan pilih implement methods.

201907081629461b94a9b79eead128132d7fa5f8d82979Kemudian pilih ketiga metode dari RecyclerView.Adapter.
20181119113127bdf4d92aedf8692765ee3734d56d77b5


Maka kode saat ini menjadi seperti ini:



  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {


  3.     @NonNull

  4.     @Override

  5.     public ListViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

  6.         return null;

  7.     }


  9.     @Override

  10.     public void onBindViewHolder(@NonNull ListViewHolder listViewHolder, int i) {


  12.     }


  14.     @Override

  15.     public int getItemCount() {

  16.         return 0;

  17.     }

  18.  

  19.     public class ListViewHolder {

  20.     }

  21. }








  1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {

  2.  

  3.     override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ListViewHolder {

  4.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  5.     }


  7.     override fun onBindViewHolder(holder: ListViewHolder, position: Int) {

  8.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  9.     }

  10.  

  11.     override fun getItemCount(): Int {

  12.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  13.     }


  15.     inner class ListViewHolder()

  16. }





Masih ada garis merah kita lakukan lagi alt+enter/klik tombol merah dan pilih Make ListViewHolder extend RecyclerView.ViewHolder.


201907081630454ed41f8f7728cc2adbf740cbf29bdc61
Maka kode saat ini menjadi seperti ini:




  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     ...

  3.  

  4.     public class ListViewHolder extends RecyclerView.ViewHolder {

  5.     }

  6. }







  1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {

  2.     ...


  4.     inner class ListViewHolder() : RecyclerView.ViewHolder {

  5.     }

  6. }






Masih ada garis merah kita lakukan lagi alt+enter/klik tombol merah dan pilih Create constructor matching super.

20190708163139659f69ff7febdf678f8a4707797093b2

Maka kode saat ini menjadi seperti ini:



  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     ...

  3.  

  4.     class ListViewHolder extends RecyclerView.ViewHolder {

  5.         public ListViewHolder(@NonNull View itemView) {

  6.             super(itemView);

  7.         }

  8.     }

  9. }







  1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {

  2.     ...


  4.     inner class ListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

  5.  

  6.     }

  7. }





Kemudian isi ListViewHolder dengan kode berikut untuk inisialisasi view yang ada di dalam layout item:





  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     ...

  3.  

  4.     class ListViewHolder extends RecyclerView.ViewHolder {

  5.         ImageView imgPhoto;

  6.         TextView tvName, tvDetail;


  8.         ListViewHolder(View itemView) {

  9.             super(itemView);

  10.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

  11.             tvName = itemView.findViewById(R.id.tv_item_name);

  12.             tvDetail = itemView.findViewById(R.id.tv_item_detail);

  13.         }

  14.     }

  15. }








  1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {

  2.  

  3.     ...

  4.     inner class ListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

  5.         var tvName: TextView = itemView.findViewById(R.id.tv_item_name)

  6.         var tvDetail: TextView = itemView.findViewById(R.id.tv_item_detail)

  7.         var imgPhoto: ImageView = itemView.findViewById(R.id.img_item_photo)

  8.     }

  9. }




Kemudian buatlah dan constructor untuk list seperti ini:





  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     private ArrayList<Hero> listHero;


  4.     public ListHeroAdapter(ArrayList<Hero> list) {

  5.         this.listHero = list;

  6.     }

  7.  

  8.     ...

  9. }








  1. class ListHeroAdapter(private val listHero: ArrayList<Hero>) : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {

  2.     ...

  3. }




Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode lengkap dari kelas ListHeroAdapter sebagai berikut:





  1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAdapter.ListViewHolder> {

  2.     private ArrayList<Hero> listHero;

  3.  

  4.     public ListHeroAdapter(ArrayList<Hero> list) {

  5.         this.listHero = list;

  6.     }

  7.  

  8.  

  9.     @NonNull

  10.     @Override

  11.     public ListViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

  12.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_row_hero, viewGroup, false);

  13.         return new ListViewHolder(view);

  14.     }

  15.  

  16.     @Override

  17.     public void onBindViewHolder(@NonNull final ListViewHolder holder, int position) {

  18.         Hero hero = listHero.get(position);

  19.         Glide.with(holder.itemView.getContext())

  20.                 .load(hero.getPhoto())

  21.                 .apply(new RequestOptions().override(55, 55))

  22.                 .into(holder.imgPhoto);

  23.         holder.tvName.setText(hero.getName());

  24.         holder.tvDetail.setText(hero.getDetail());

  25.     }

  26.  

  27.     @Override

  28.     public int getItemCount() {

  29.         return listHero.size();

  30.     }

  31.  

  32.     class ListViewHolder extends RecyclerView.ViewHolder {

  33.         ImageView imgPhoto;

  34.         TextView tvName, tvDetail;

  35.  

  36.         ListViewHolder(View itemView) {

  37.             super(itemView);

  38.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

  39.             tvName = itemView.findViewById(R.id.tv_item_name);

  40.             tvDetail = itemView.findViewById(R.id.tv_item_detail);

  41.         }

  42.     }

  43. }
























  1. class ListHeroAdapter(val listHero: ArrayList<Hero>) : RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {

  2.  

  3.     override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ListViewHolder {

  4.         val view: View = LayoutInflater.from(viewGroup.context).inflate(R.layout.item_row_hero, viewGroup, false)

  5.         return ListViewHolder(view)

  6.     }

  7.  

  8. override fun onBindViewHolder(holder: ListViewHolder, position: Int) {

  9.         val hero = listHero[position]


  11.         Glide.with(holder.itemView.context)

  12.                 .load(hero.photo)

  13.                 .apply(RequestOptions().override(55, 55))

  14.                 .into(holder.imgPhoto)


  16.         holder.tvName.text = hero.name

  17.         holder.tvDetail.text = hero.detail

  18.     }

  19.  

  20.     override fun getItemCount(): Int {

  21.         return listHero.size

  22.     }

  23.  

  24.     inner class ListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

  25.         var tvName: TextView = itemView.findViewById(R.id.tv_item_name)

  26.         var tvDetail: TextView = itemView.findViewById(R.id.tv_item_detail)

  27.         var imgPhoto: ImageView = itemView.findViewById(R.id.img_item_photo)

  28.     }

  29. }







Kemudian kita modifikasi berkas kelas MainActivity kita inisiasikan RecyclerView yang sudah dibuat di activity_main.





  1. public class MainActivity extends AppCompatActivity {

  2.     private RecyclerView rvHeroes;

  3.  

  4.     @Override

  5.     protected void onCreate(Bundle savedInstanceState) {

  6.         super.onCreate(savedInstanceState);

  7.         setContentView(R.layout.activity_main);

  8.  

  9.         rvHeroes = findViewById(R.id.rv_heroes);

  10.         rvHeroes.setHasFixedSize(true);

  11.     }

  12. }








  1. class MainActivity : AppCompatActivity() {

  2.     private lateinit var rvHeroes: RecyclerView

  3.  

  4.     override fun onCreate(savedInstanceState: Bundle?) {

  5.         super.onCreate(savedInstanceState)

  6.         setContentView(R.layout.activity_main)

  7.  

  8.         rvHeroes = findViewById(R.id.rv_heroes)

  9.         rvHeroes.setHasFixedSize(true)

  10.     }

  11. }






Selanjutnya setelah diinisiasikan, kita akan panggil data yang sudah kita buat di kelas HeroesData.






  1. public class MainActivity extends AppCompatActivity {

  2.     private RecyclerView rvHeroes;

  3.     private ArrayList<Hero> list = new ArrayList<>();

  4.  

  5.     @Override

  6.     protected void onCreate(Bundle savedInstanceState) {

  7.         super.onCreate(savedInstanceState);

  8.         setContentView(R.layout.activity_main);

  9.  

  10.         rvHeroes = findViewById(R.id.rv_heroes);

  11.         rvHeroes.setHasFixedSize(true);

  12.  

  13.         list.addAll(HeroesData.getListData());

  14.         showRecyclerList();

  15.     }

  16.  

  17.     private void showRecyclerList(){

  18.         rvHeroes.setLayoutManager(new LinearLayoutManager(this));

  19.         ListHeroAdapter listHeroAdapter = new ListHeroAdapter(list);

  20.         rvHeroes.setAdapter(listHeroAdapter);

  21.     }

  22. }






  1. class MainActivity : AppCompatActivity() {

  2.     private lateinit var rvHeroes: RecyclerView

  3.     private var list: ArrayList<Hero> = arrayListOf()

  4.  

  5.     override fun onCreate(savedInstanceState: Bundle?) {

  6.         super.onCreate(savedInstanceState)

  7.         setContentView(R.layout.activity_main)

  8.  

  9.         rvHeroes = findViewById(R.id.rv_heroes)

  10.         rvHeroes.setHasFixedSize(true)

  11.         

  12.         list.addAll(HeroesData.listData)

  13.         showRecyclerList()

  14.     }

  15.  

  16.     private fun showRecyclerList() {

  17.         rvHeroes.layoutManager = LinearLayoutManager(this)

  18.         val listHeroAdapter = ListHeroAdapter(list)

  19.         rvHeroes.adapter = listHeroAdapter

  20.     }

  21. }







Jalankan aplikasi yang dibuat. Hasilnya kurang lebih akan seperti gambar di bawah ini:
20190129094241c683eec45c49b215145c6cfcfb2419cd


  1. Sekarang mari kita buat sebuah RecyclerView dengan memanfaatkan fasilitas menu.
  2. Langkah pertama adalah dengan membuat resource directory terkait. Resource directory menu secara bawaan tidak disediakan. Kita harus membuatnya terlebih dahulu.
    Klik kanan pada direktori res → new → android resource directory. Setelah muncul dialog box seperti di bawah ini, isikan menu pada field directory name. Klik OK untuk menyelesaikannya.
    20181119125400e4acd327f65fe94d760c8fc6cfe7366eSebuah RecyclerView untuk menampilkan data Pahlawan Republik Indonesia sudah tercipta.
  3. Kemudian, klik kanan pada direktori tersebut → new → menu resource file. Beri nama menu_main pada field file name.
    20181119125439febe6aa94c5cda947a2ed746da40e6d0
    Setelah itu, lengkapi kodenya menjadi seperti berikut:


    1. <?xml version="1.0" encoding="utf-8"?>

    2. <menu xmlns:android="http://schemas.android.com/apk/res/android"

    3.     xmlns:app="http://schemas.android.com/apk/res-auto">

    4.     <item

    5.         android:id="@+id/action_list"

    6.         android:title="List"

    7.         app:showAsAction="never"/>

    8.     <item

    9.         android:id="@+id/action_grid"

    10.         android:title="Grid"

    11.         app:showAsAction="never"/>

    12.     <item

    13.         android:id="@+id/action_cardview"

    14.         android:title="with CardView"

    15.         app:showAsAction="never"/>

    16. </menu>



    Jangan lupa untuk memindahkan text ke strings.xml. Caranya alt+enter → Extract string resource.
    201811191259454b5bb0e98c3454bf1c78dafc6310aeef
    Maka menu_main menjadi seperti berikut:


    1. <?xml version="1.0" encoding="utf-8"?>

    2. <menu xmlns:android="http://schemas.android.com/apk/res/android"

    3.     xmlns:app="http://schemas.android.com/apk/res-auto">

    4.     <item

    5.         android:id="@+id/action_list"

    6.         android:title="@string/list"

    7.         app:showAsAction="never" />

    8.     <item

    9.         android:id="@+id/action_grid"

    10.         android:title="@string/grid"

    11.         app:showAsAction="never" />

    12.     <item

    13.         android:id="@+id/action_cardview"

    14.         android:title="@string/with_cardview"

    15.         app:showAsAction="never" />

    16. </menu>



    Dan pada bagian res → values → strings.xml, tambahkan juga string berikut:


    1. <resources>

    2.     <string name="app_name">My Application</string>

    3.     <string name="heroes_name">Nama Pahlawan</string>

    4.     <string name="detail">Detail</string>

    5.     <string name="list">List</string>

    6.     <string name="grid">Grid</string>

    7.     <string name="with_cardview">with CardView</string>

    8.     <string name="favorite">Favorite</string>

    9.     <string name="share">Share</string>

    10. </resources>



  4. Setelah selesai, saatnya kita pasang menu tersebut di MainActivity dengan menambahkan metode berikut:





  1. public class MainActivity extends AppCompatActivity {

  2.     ...

  3.  

  4.     @Override

  5.     public boolean onCreateOptionsMenu(Menu menu) {

  6.         getMenuInflater().inflate(R.menu.menu_main, menu);

  7.         return super.onCreateOptionsMenu(menu);

  8.     }


  10.     @Override

  11.     public boolean onOptionsItemSelected(MenuItem item) {

  12.         setMode(item.getItemId());

  13.         return super.onOptionsItemSelected(item);

  14.     }


  16.     public void setMode(int selectedMode) {

  17.         switch (selectedMode) {

  18.             case R.id.action_list:

  19.                 break;


  21.             case R.id.action_grid:

  22.                 break;


  24.             case R.id.action_cardview:

  25.                 break;

  26.         }

  27.     }

  28. }






  1. class MainActivity : AppCompatActivity() {

  2.     ...

  3.  

  4.     override fun onCreateOptionsMenu(menu: Menu): Boolean {

  5.         menuInflater.inflate(R.menu.menu_main, menu)

  6.         return super.onCreateOptionsMenu(menu)

  7.     }

  8.     

  9.     override fun onOptionsItemSelected(item: MenuItem): Boolean {

  10.         setMode(item.itemId)

  11.         return super.onOptionsItemSelected(item)

  12.     }


  14.     private fun setMode(selectedMode: Int) {

  15.         when (selectedMode) {

  16.             R.id.action_list -> {

  17.             }


  19.             R.id.action_grid -> {

  20.             }


  22.             R.id.action_cardview -> {

  23.             }

  24.         }

  25.     }

  26. }





Untuk metode di atas, Anda bisa menggunakan Ctrl (tahan) + Spasi untuk menampilkan code assistant pada Android Studio.
20190125111335c00e8c25717d3e3b568b7fa947d4bfa6
Kode di kelas MainActivity akan berubah menjadi seperti ini:





  1. public class MainActivity extends AppCompatActivity {

  2.     private RecyclerView rvHeroes;

  3.     private ArrayList<Hero> list = new ArrayList<>();

  4.  

  5.     @Override

  6.     protected void onCreate(Bundle savedInstanceState) {

  7.         super.onCreate(savedInstanceState);

  8.         setContentView(R.layout.activity_main);

  9.  

  10.         rvHeroes = findViewById(R.id.rv_heroes);

  11.         rvHeroes.setHasFixedSize(true);

  12.  

  13.         list.addAll(HeroesData.getListData());

  14.         showRecyclerList();

  15.     }

  16.  

  17.     private void showRecyclerList(){

  18.         rvHeroes.setLayoutManager(new LinearLayoutManager(this));

  19.         ListHeroAdapter listHeroAdapter = new ListHeroAdapter(list);

  20.         rvHeroes.setAdapter(listHeroAdapter);

  21.     }

  22.  

  23.     @Override

  24.     public boolean onCreateOptionsMenu(Menu menu) {

  25.         getMenuInflater().inflate(R.menu.menu_main, menu);

  26.         return super.onCreateOptionsMenu(menu);

  27.     }

  28.  

  29.     @Override

  30.     public boolean onOptionsItemSelected(MenuItem item) {

  31.         setMode(item.getItemId());

  32.         return super.onOptionsItemSelected(item);

  33.     }

  34.  

  35.     public void setMode(int selectedMode) {

  36.         switch (selectedMode) {

  37.             case R.id.action_list:

  38.                 break;

  39.  

  40.             case R.id.action_grid:

  41.                 break;

  42.  

  43.             case R.id.action_cardview:

  44.                 break;

  45.         }

  46.     }

  47. }


























  1. class MainActivity : AppCompatActivity() {

  2.     private lateinit var rvHeroes: RecyclerView

  3.     private var list: ArrayList<Hero> = arrayListOf()

  4.  

  5.     override fun onCreate(savedInstanceState: Bundle?) {

  6.         super.onCreate(savedInstanceState)

  7.         setContentView(R.layout.activity_main)

  8.  

  9.         rvHeroes = findViewById(R.id.rv_heroes)

  10.         rvHeroes.setHasFixedSize(true)

  11.         

  12.         list.addAll(HeroesData.listData)

  13.         showRecyclerList()

  14.     }

  15.  

  16.     private fun showRecyclerList() {

  17.         rvHeroes.layoutManager = LinearLayoutManager(this)

  18.         val listHeroAdapter = ListHeroAdapter(list)

  19.         rvHeroes.adapter = listHeroAdapter

  20.     }

  21.  

  22.     override fun onCreateOptionsMenu(menu: Menu): Boolean {

  23.         menuInflater.inflate(R.menu.menu_main, menu)

  24.         return super.onCreateOptionsMenu(menu)

  25.     }

  26.  

  27.     override fun onOptionsItemSelected(item: MenuItem): Boolean {

  28.         setMode(item.itemId)

  29.         return super.onOptionsItemSelected(item)

  30.     }

  31.  

  32.     private fun setMode(selectedMode: Int) {

  33.         when (selectedMode) {

  34.             R.id.action_list -> {

  35.             }

  36.  

  37.             R.id.action_grid -> {

  38.             }

  39.  

  40.             R.id.action_cardview -> {

  41.             }

  42.         }

  43.     }

  44. }























Jalankan kembali aplikasi Anda. Tampilannya kurang lebih akan menjadi seperti gambar di bawah ini:
20190129094511f8b8dae283ab94118000eb1199d74d05.gif


Codelab RecyclerView Mode Grid

Pada modul sebelumnya, kita telah membuat menu pada aplikasi daftar Pahlawan yang sedang kita buat. Mari kita lanjutkan pembuatan bentuk dari RecyclerView dalam bentuk grid.
  1. Buat sebuah berkas layout xml baru dengan nama item_grid_hero.
    2019091109310446b0fdf14ded49d7f958ea82e7939358
Setelah itu lengkapi kodenya menjadi seperti berikut :



  1. <?xml version="1.0" encoding="utf-8"?>

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  3.     xmlns:tools="http://schemas.android.com/tools"

  4.     android:layout_width="match_parent"

  5.     android:layout_height="wrap_content"

  6.     android:orientation="vertical">

  7.  

  8.     <ImageView

  9.         android:id="@+id/img_item_photo"

  10.         android:layout_width="match_parent"

  11.         android:layout_height="250dp"

  12.         android:layout_margin="1dp"

  13.         android:scaleType="centerCrop"

  14.         tools:src="@color/colorAccent" />

  15. </LinearLayout>


  1. Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout xml tersebut. Buat sebuah kelas baru dengan nama GridHeroAdapter.
    20190125111456bdfffcb571833cf3a5dfca67491118d5Kemudian kita lakukan hal yang sama dengan pembuatan ListHeroAdapter, lengkapi kodenya menjadi seperti berikut:




  1. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

  2. }







  1. class GridHeroAdapter : RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

  2. }





Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu merahnya. Setelah memperbaiki maka akan menjadi seperi ini:





  1. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

  2.     @NonNull

  3.     @Override

  4.     public GridViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

  5.         return null;

  6.     }


  8.     @Override

  9.     public void onBindViewHolder(@NonNull GridViewHolder gridViewHolder, int i) {

  10.     }

  11.  

  12.     @Override

  13.     public int getItemCount() {

  14.         return 0;

  15.     }


  17.     public class GridViewHolder extends RecyclerView.ViewHolder {

  18.         public GridViewHolder(@NonNull View itemView) {

  19.             super(itemView);

  20.         }

  21.     }

  22. }








  1. class GridHeroAdapter : RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {

  2.     override fun onCreateViewHolder(p0: ViewGroup, p1: Int): GridViewHolder {

  3.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  4.     }


  6.     override fun onBindViewHolder(p0: GridViewHolder, p1: Int) {

  7.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  8.     }

  9.  

  10.     override fun getItemCount(): Int {

  11.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  12.     }


  14.     inner class GridViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

  15. }






Kemudian buatlah constructor untuk list seperti ini:




  1. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

  2.     private ArrayList<Hero> listHero;


  4.     public GridHeroAdapter(ArrayList<Hero> list) {

  5.         this.listHero = list;

  6.     }

  7.  

  8.     ...

  9. } 






  1. class GridHeroAdapter(val listHeroes: ArrayList<Hero>) : RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {

  2.     ...

  3. }







Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode lengkap dari kelas GridHeroAdapter sebagai berikut:





  1. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {

  2.     private ArrayList<Hero> listHero;

  3.  

  4.     public GridHeroAdapter(ArrayList<Hero> list) {

  5.         this.listHero = list;

  6.     }

  7.  

  8.     @NonNull

  9.     @Override

  10.     public GridViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

  11.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_grid_hero, viewGroup, false);

  12.         return new GridViewHolder(view);

  13.     }

  14.  

  15.     @Override

  16.     public void onBindViewHolder(@NonNull final GridViewHolder holder, int position) {

  17.         Glide.with(holder.itemView.getContext())

  18.                 .load(listHero.get(position).getPhoto())

  19.                 .apply(new RequestOptions().override(350, 550))

  20.                 .into(holder.imgPhoto);

  21.     }

  22.  

  23.     @Override

  24.     public int getItemCount() {

  25.         return listHero.size();

  26.     }

  27.  

  28.     class GridViewHolder extends RecyclerView.ViewHolder {

  29.         ImageView imgPhoto;

  30.  

  31.         GridViewHolder(View itemView) {

  32.             super(itemView);

  33.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

  34.         }

  35.     }

  36. }

















  1. class GridHeroAdapter(val listHeroes: ArrayList<Hero>) : RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {

  2.  

  3.     override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): GridViewHolder {

  4.         val view: View = LayoutInflater.from(viewGroup.context).inflate(R.layout.item_grid_hero, viewGroup, false)

  5.         return GridViewHolder(view)

  6.     }

  7.  

  8.     override fun onBindViewHolder(holder: GridViewHolder, position: Int) {

  9.         Glide.with(holder.itemView.context)

  10.                 .load(listHeroes[position].photo)

  11.                 .apply(RequestOptions().override(350, 550))

  12.                 .into(holder.imgPhoto)

  13.     }

  14.  

  15.     override fun getItemCount(): Int {

  16.         return listHeroes.size

  17.     }

  18.  

  19.     inner class GridViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

  20.         var imgPhoto: ImageView = itemView.findViewById(R.id.img_item_photo)

  21.     }

  22. }







Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan menambahkan satu metode berikut:




  1. private void showRecyclerGrid(){

  2.     rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));

  3.     GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);

  4.     rvHeroes.setAdapter(gridHeroAdapter);

  5. }







  1. private fun showRecyclerGrid() {

  2.     rvHeroes.layoutManager = GridLayoutManager(this, 2)

  3.     val gridHeroAdapter = GridHeroAdapter(list)

  4.     rvHeroes.adapter = gridHeroAdapter

  5. }







Dan lengkapi metode setMode() menjadi seperti berikut:




  1. public void setMode(int selectedMode) {

  2.     switch (selectedMode) {

  3.         case R.id.action_list:

  4.             showRecyclerList();

  5.             break;

  6.  

  7.         case R.id.action_grid:

  8.             showRecyclerGrid();

  9.             break;

  10.  

  11.         case R.id.action_cardview:

  12.  

  13.             break;

  14.     }

  15. }







  1. private fun setMode(selectedMode: Int) {

  2.     when (selectedMode) {

  3.         R.id.action_list -> {

  4.             showRecyclerList()

  5.         }

  6.  

  7.         R.id.action_grid -> {

  8.             showRecyclerGrid()

  9.         }

  10.  

  11.         R.id.action_cardview -> {

  12.  

  13.         }

  14.     }

  15. }




ini akan mengubah tampilan ketika pengguna memilih salah satu bentuk layout. Sekarang jalankan kembali aplikasinya. Akan ada dua bentuk dari RecyclerView yaitu list dan grid.


201901290952173c2f988675ee9daa925607eeaa072cba.gif



Codelab RecyclerView dengan CardView

Pada modul ini kita akan membuat bentuk RecyclerView dengan komponen CardView. Komponen ini akan menampilkan data selayaknya sebuah kartu. Pendekatan ini hanya diperuntukkan bila item list memiliki lebih dari satu action.
  1. Pertama, buat kembali berkas layout xml item_cardview_hero.
    20190125111608d547f930e95a9209a35b217bba6497b7Setelah itu lengkapi kodenya menjadi seperti berikut:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:card_view="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:id="@+id/card_view"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="wrap_content"
  8.     android:layout_gravity="center"
  9.     android:layout_marginLeft="8dp"
  10.     android:layout_marginTop="4dp"
  11.     android:layout_marginRight="8dp"
  12.     android:layout_marginBottom="4dp"
  13.     card_view:cardCornerRadius="4dp">
  14.  
  15.     <RelativeLayout
  16.         android:layout_width="match_parent"
  17.         android:layout_height="200dp"
  18.         android:padding="8dp">
  20.         <ImageView
  21.             android:id="@+id/img_item_photo"
  22.             android:layout_width="150dp"
  23.             android:layout_height="220dp"
  24.             android:layout_marginBottom="4dp"
  25.             android:scaleType="centerCrop"
  26.             tools:src="@color/colorAccent" />
  28.         <TextView
  29.             android:id="@+id/tv_item_name"
  30.             android:layout_width="match_parent"
  31.             android:layout_height="wrap_content"
  32.             android:layout_marginLeft="16dp"
  33.             android:layout_marginTop="16dp"
  34.             android:layout_marginRight="16dp"
  35.             android:layout_marginBottom="8dp"
  36.             android:layout_toEndOf="@id/img_item_photo"
  37.             android:layout_toRightOf="@id/img_item_photo"
  38.             android:textSize="16sp"
  39.             android:textStyle="bold"
  40.             tools:text="@string/heroes_name" />
  42.         <TextView
  43.             android:id="@+id/tv_item_detail"
  44.             android:layout_width="match_parent"
  45.             android:layout_height="match_parent"
  46.             android:layout_above="@+id/layout_button"
  47.             android:layout_below="@id/tv_item_name"
  48.             android:layout_marginLeft="16dp"
  49.             android:layout_marginRight="16dp"
  50.             android:layout_toEndOf="@id/img_item_photo"
  51.             android:layout_toRightOf="@id/img_item_photo"
  52.             android:ellipsize="end"
  53.             android:maxLines="5"
  54.             tools:text="@string/detail" />
  56.         <LinearLayout
  57.             android:id="@+id/layout_button"
  58.             android:layout_width="match_parent"
  59.             android:layout_height="wrap_content"
  60.             android:layout_alignParentBottom="true"
  61.             android:layout_marginStart="16dp"
  62.             android:layout_marginLeft="16dp"
  63.             android:layout_toEndOf="@id/img_item_photo"
  64.             android:layout_toRightOf="@id/img_item_photo"
  65.             android:orientation="horizontal">
  67.             <Button
  68.                 android:id="@+id/btn_set_favorite"
  69.                 style="@style/Widget.AppCompat.Button.Colored"
  70.                 android:layout_width="match_parent"
  71.                 android:layout_height="wrap_content"
  72.                 android:layout_weight="1"
  73.                 android:text="@string/favorite"
  74.                 android:textSize="12sp" />
  76.             <Button
  77.                 android:id="@+id/btn_set_share"
  78.                 style="@style/Widget.AppCompat.Button.Colored"
  79.                 android:layout_width="match_parent"
  80.                 android:layout_height="wrap_content"
  81.                 android:layout_weight="1"
  82.                 android:text="@string/share"
  83.                 android:textSize="12sp" />
  84.         </LinearLayout>
  85.     </RelativeLayout>
  86. </androidx.cardview.widget.CardView>



Setelah selesai, buat kembali kelas Adapter dengan nama CardViewHeroAdapter.
2019012511200479671ee3b840d930cf0e57af4bd23131

Kemudian kita lakukan hal yang sama dengan pembuatan LisHeroAdapter. Lengkapi kodenya menjadi seperti berikut:




  1. public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

  2. }








  1. class CardViewHeroAdapter : RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

  2. }





Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu merahnya.  Setelah memperbaiki maka akan menjadi seperi ini:





  1. public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

  2.     @NonNull

  3.     @Override

  4.     public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

  5.         return null;

  6.     }


  8.     @Override

  9.     public void onBindViewHolder(@NonNull CardViewViewHolder cardViewViewHolder, int i) {


  11.     }


  13.     @Override

  14.     public int getItemCount() {

  15.         return 0;

  16.     }


  18.     public class CardViewViewHolder extends RecyclerView.ViewHolder {

  19.         public CardViewViewHolder(@NonNull View itemView) {

  20.             super(itemView);

  21.         }

  22.     }

  23. }








  1. class CardViewHeroAdapter : RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>() {

  2.     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewViewHolder {

  3.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  4.     }


  6.     override fun onBindViewHolder(holder: CardViewViewHolder, position: Int) {

  7.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  8.     }

  9.  

  10.     override fun getItemCount(): Int {

  11.         TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

  12.     }


  14.     inner class CardViewViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {


  16.     }

  17. }




Kemudian buatlah dan constructor untuk list seperti ini:





  1. public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{

  2.     private ArrayList<Hero> listHero;


  4.     public CardViewHeroAdapter(ArrayList<Hero> list) {

  5.         this.listHero = list;

  6.     }

  7.  

  8.     ...

  9. }






  1. class CardViewHeroAdapter(private val listHero: ArrayList<Hero>) : RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>() {

  2.     ...

  3. }





Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode lengkap dari kelas CardViewHeroAdapter sebagai berikut:





  1. public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder> {

  2.     private ArrayList<Hero> listHero;

  3.  

  4.     public CardViewHeroAdapter(ArrayList<Hero> list) {

  5.         this.listHero = list;

  6.     }

  7.  

  8.     @NonNull

  9.     @Override

  10.     public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

  11.         View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_cardview_hero, viewGroup, false);

  12.         return new CardViewViewHolder(view);

  13.     }

  14.  

  15.     @Override

  16.     public void onBindViewHolder(@NonNull final CardViewViewHolder holder, int position) {

  17.  

  18.         Hero hero = listHero.get(position);


  20.         Glide.with(holder.itemView.getContext())

  21.                 .load(hero.getPhoto())

  22.                 .apply(new RequestOptions().override(350, 550))

  23.                 .into(holder.imgPhoto);


  25.         holder.tvName.setText(hero.getName());

  26.         holder.tvDetail.setText(hero.getDetail());


  28.         holder.btnFavorite.setOnClickListener(new View.OnClickListener() {

  29.             @Override

  30.             public void onClick(View v) {

  31.                 Toast.makeText(holder.itemView.getContext(), "Favorite " +

  32.                         listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();


  34.             }

  35.         });


  37.         holder.btnShare.setOnClickListener(new View.OnClickListener() {

  38.             @Override

  39.             public void onClick(View v) {

  40.                 Toast.makeText(holder.itemView.getContext(), "Share " +

  41.                         listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();

  42.             }

  43.         });

  44.     }

  45.  

  46.     @Override

  47.     public int getItemCount() {

  48.         return listHero.size();

  49.     }

  50.  

  51.     class CardViewViewHolder extends RecyclerView.ViewHolder {

  52.         ImageView imgPhoto;

  53.         TextView tvName, tvDetail;

  54.         Button btnFavorite, btnShare;


  56.         CardViewViewHolder(View itemView) {

  57.             super(itemView);

  58.             imgPhoto = itemView.findViewById(R.id.img_item_photo);

  59.             tvName = itemView.findViewById(R.id.tv_item_name);

  60.             tvDetail = itemView.findViewById(R.id.tv_item_detail);

  61.             btnFavorite = itemView.findViewById(R.id.btn_set_favorite);

  62.             btnShare = itemView.findViewById(R.id.btn_set_share);

  63.         }

  64.     }

  65. }











































  1. class CardViewHeroAdapter(private val listHero: ArrayList<Hero>) : RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>() {

  2.     

  3.     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewViewHolder {

  4.         val view: View = LayoutInflater.from(parent.context).inflate(R.layout.item_cardview_hero, parent, false)

  5.         return CardViewViewHolder(view)

  6.     }

  7.  

  8.     override fun onBindViewHolder(holder: CardViewViewHolder, position: Int) {

  9.         val hero = listHero[position]


  11.         Glide.with(holder.itemView.context)

  12.                 .load(hero.photo)

  13.                 .apply(RequestOptions().override(350, 550))

  14.                 .into(holder.imgPhoto)


  16.         holder.tvName.text = hero.name

  17.         holder.tvDetail.text = hero.detail


  19.         holder.btnFavorite.setOnClickListener { Toast.makeText(holder.itemView.context, "Favorite " + listHero[holder.adapterPosition].name, Toast.LENGTH_SHORT).show() }


  21.         holder.btnShare.setOnClickListener { Toast.makeText(holder.itemView.context, "Share " + listHero[holder.adapterPosition].name, Toast.LENGTH_SHORT).show() }


  23.         holder.itemView.setOnClickListener { Toast.makeText(holder.itemView.context, "Kamu memilih " + listHero[holder.adapterPosition].name, Toast.LENGTH_SHORT).show() }

  24.     }

  25.  

  26.     override fun getItemCount(): Int {

  27.         return listHero.size

  28.     }

  29.  

  30.     inner class CardViewViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

  31.         var imgPhoto: ImageView = itemView.findViewById(R.id.img_item_photo)

  32.         var tvName: TextView = itemView.findViewById(R.id.tv_item_name)

  33.         var tvDetail: TextView = itemView.findViewById(R.id.tv_item_detail)

  34.         var btnFavorite: Button = itemView.findViewById(R.id.btn_set_favorite)

  35.         var btnShare: Button = itemView.findViewById(R.id.btn_set_share)

  36.     }

  37. }















Setelah selesai, kita perlu menambahkan satu metode lagi untuk menampilkan bentuk RecyclerView ini. Caranya lengkapi kode pada MainActivity menjadi seperti berikut:





  1. private void showRecyclerCardView(){

  2.     rvHeroes.setLayoutManager(new LinearLayoutManager(this));

  3.     CardViewHeroAdapter cardViewHeroAdapter = new CardViewHeroAdapter(list);

  4.     rvHeroes.setAdapter(cardViewHeroAdapter);

  5. }







  1. private fun showRecyclerCardView() {

  2.     rvHeroes.layoutManager = LinearLayoutManager(this)

  3.     val cardViewHeroAdapter = CardViewHeroAdapter(list)

  4.     rvHeroes.adapter = cardViewHeroAdapter

  5. }





Dan update metode onOptionsItemSelected() menjadi seperti berikut:








































z
at