Cara Membuat RecyclerView dengan CardView di Android

Assalamualaikum Warahmatullahi Wabarakatuh.

Sebelumnya kita sudah belajar mnganai Cara Membuat RecyclerView Material Design, didalam project tersebut kita menggunakan RecyclerView untuk menampilkan item yang tersimpan didalam ArrayList. Selanjutnya pada tutorial berikut ini, kita akan menambahkan CardView kedalam RecyclerView tersebut, CardView akan memberikan tampilan efek seperti kartu pada masing-masing item list.

Saya sarankan sebelum kalian melanjutkan materi berikut ini, kalian harus membuat project RecyclerView dari tutorial yang saya berikan sebelumnya.

Materi lainnya yang direkomendasikan:

• Cara Berpindah Activity Menggunakan RecyclerView
• Cara Menerapkan SearchView dengan RecyclerView pada Fragment
• Cara Membuat AppBarLayout dan CoordinatorLayout di Android Material Design

Cara Membuat RecyclerView dengan CardView di Android

1) Jangan lupa untuk menambahkan Library berikut ini didalam dependencies pada file build.gradle (direktori app).

compile'com.android.support:design:27.0.2'
compile 'com.android.support:cardview-v7:27.0.2'
compile 'com.android.support:recyclerview-v7:27.0.2'

2) Untuk menambahkan CardView, kita tinggal buka pada file view_design.xml, yang digunakan untuk mendesain tampilan layout pada masing-masing item. Bungkus semua konten didalam layout tersebut kedalam CardView, seperti berikut ini.

<?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"
    android:id="@+id/item_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/cardview_light_background"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/meme"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:contentDescription="@string/todo"
                app:srcCompat="@drawable/meme1" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toEndOf="@+id/meme"
                android:layout_toRightOf="@+id/meme"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/memetitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="2dp"
                    android:text="Wildan"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/sub_meme"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="Gambar Meme Ke: 0"
                    android:textSize="14sp" />
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

atribut cardCornerRadius digunakan untuk mengatur sudut/sisi-sisi dari cardView, dan cardElevation digunakan untuk menambahkan efek bayangan pada cardView.

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :