Cara Membuat ReyclerView dan CardView Android - Okedroid.com | Belajar Coding Aplikasi Android Java Online
Okedroid.com | Belajar Coding Aplikasi Android Java Online

Cara Membuat ReyclerView dan CardView Android

Untuk menampilkan sebuah daftar atau list yang complex, di dalam menu item  yang berbentuk kartu(cards), dengan gaya Material Design. Kalian dapat menggunakan ReyclerView dan widget CardView pada Aplikasi Android yang sedang kalian kembangkan.

ReyclerView adalah sebuah versi lanjutan  dari ListView dengan gaya Material Design. Fungsinya sama saja yaitu menampilkan sebuah daftar/list item menu ,namun dengan fitur yang lebih canggih di bandingkan ListView.  RecyclerView digunakan untuk memuat data yang lebih besar ,serta reusable berubah-ubah ,tergantung interaksi user(pengguna).

Cara Membuat ReyclerView dan CardView Material Design Android



ReyclerView menggunakan Layout manager  yang berfungsi untuk memposisikan item menu. Serta ReyclerView dapat menampilkan sebuah animasi standar ,pada saat item menu di tambahkan dan dihapus oleh interaksi user (pengguna). Layout manager akan menggunakan Adapter untuk mengatur akses dan resource view dari item data atau Dataset(kumpulan data) ,yang akan ditampilkan pada screen(layar). Contoh penerapanya bisa kalian lihat pada gambar dibawah:



RecylerView
ReyclerView (image by developer.android.com)


Cardview adalah turunan dari (extends) FrameLayout  ,yang akan menampilkan sebuah item menu atau konten dalam bentuk kartu (cards). Ciri-ciri dari Cardview terdapat sebuah bayangan dan sudut bulat(rounded corner).

Pada tutorial belajar android kali ini , kita akan mencoba membuat widget ReyclerView dan CardView dengan gaya Material Design Android.


1. Pertama buka Android Studio 

2. Pilih Start a New Android Studio Project 

Start a New Android Studio Project
Start a New Android Studio Project
                                        


3.Kedua pada bagian Create New Project, sesuaikan dengan nama dan package serta lokasi file yang akan kalian gunakan. Untuk contoh saya menggunakan seperti yang ada di gambar di bawah. Jika sudah pilih Next.



  • Application name: ReyclerView and CardView
  • Company Domain : okedroid.com
  • Package Name   :com.okedroid.reyclerviewandcardview


ReyclerView and CardView new-project
Configure New Project

4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.

Target Android Devices in Android Studio
Target Android Devices

5. Pada bagian Add an Activity to Mobile , kita bisa memilih Empty Activity lalu pilih Next.


Add an Activity to Mobile
Empty Activity

6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.


Cutomize the Activity
Customize the Activity


7.Setelah itu kita tunggu sampai proses building project gradle selesai .



8. Setelah selesai proses building , kita akan mencoba membuat ReyclerView dan CardView  berikut langkah-langkahnya: 


1) Setup Gradle

    Sebelum memulai untuk secara default pastikan pada build gradle khususnya di bagian dependencies kalian setting seperti ini :





    2) Layout

    Pada file layout activity_main.xml  ,kalian dapat menerapkan baris intruksi (codingan) dibawah.

    Di file layout ini kita akan mencoba menyematkan widget ReyclerView.


    activity_main.xml




    Lalu pada folder layout kalian buat file layout baru , Sebagai contoh nama file yang saya namakan yaitu item_list.xml 

    Di file layout ini kita akan menerapkan dan menampilkan menu item dari widget CardView , yang akan disejajarkan dengan ReyclerView.


    item_list.xml 


    3) Activity 


    Pada file class Activity MainActivity.java kalian dapat menerapkan baris intruksi (codingan) dibawah.

    Di file class Activity  ini kita akan mendeklarasikan dan membuat obyek ReyclerView dan menset LayoutManager.

    MainActivity.java




    Lalu pada folder java kalian buat 2 file class Activity baru ,sebagai contoh saya akan menamakan file nya ReyclerAdapter.java dan ReyclerViewHolder.java

    Di file ini kita akan menerapkan Adapter yang digunakan untuk mengatur akses dan resource view dari item data atau Dataset(kumpulan data).

    Kalian salin baris intruksi (codingan) dibawah pada masing-masing file.


    ReyclerAdapter.java




    ReyclerViewHolder.java




    (i) Jika kalian ingin menerapkan Intent untuk menghubungkan Antar Activity pada ReyclerAdapter.java
    kalian replace (ganti) code berikut :
                Toast.makeText(context,"Item Ini berada pada posisi "+position,Toast.LENGTH_LONG ).show();
    menjadi
                if (position == 0 && position < getItemCount())            {                Intent intent = new Intent(context , MainActivity2.class);
                    context.startActivity(intent);
                }


    7) Run project Aplikasi

    Setelah selesai semua kita coba jalankan Aplikasinya lewat Android Studio.

    Hasilnya kurang lebih akan terlihat seperti ini.


    Hasil ReyclerView dan CardView Material Design Android
    Hasil ReyclerView dan CardView 


    0 Komentar untuk "Cara Membuat ReyclerView dan CardView Android "

    Silakan berkomentar sesuai dengan Postingan/Artikel yang di bahas.
    Jangan SPAM di komentar ini

    Back To Top
    -->