Tutorial Membuat RecyclerView dengan CardView di Android (Material Design)

Last Updated on 8 years by Mas Herdi

Halo semuanya, melengkapi series kami tentang tutorial cara mengimplementasikan Android Material Design menggunakan Android Studio. Karena sebelumnya kita sudah belajar tentang cara membuat RecyclerView di Android, kali ini kita akan belajar tentang cara menambahkan CardView ke dalam RecyclerView. RecyclerView dan CardView seperti sebuah kesatuan yang biasa digunakan bersamaan, dimana CardView akan ditambahkan pada layout item yang ada di RecyclerView.

Menambahkan CardView ke dalam RecyclerView

Oke, langsung saja. Sebelum mulai menambahkan CardView ke dalam RecyclerView, pertama-tama kita harus membuat sebuah project baru di Android Studio terlebih dahulu. Dilanjutkan dengan dengan mengikuti tutorial membuat RecyclerView dari sini. Karena kita akan menggunakan project RecyclerView yang sama untuk tutorial ini, hanya tinggal menambahkan CardView di project tersebut.

Oke, jika sudah, tinggal buka file layout view_rv_item.xml dan tambahkan layout XML CardView seperti dibawah ini :

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        card_view:cardBackgroundColor="@color/background_material_light"
        card_view:cardCornerRadius="3dp"
        card_view:cardElevation="2.5dp">

....

</android.support.v7.widget.CardView>

Hasil final dari file view_rv_item.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="4dp">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        card_view:cardBackgroundColor="@color/background_material_light"
        card_view:cardCornerRadius="3dp"
        card_view:cardElevation="2.5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="3dp">

            <ImageView
                android:id="@+id/icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="6dip"
                android:contentDescription="TODO"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/tv_subtitle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_toRightOf="@id/icon"
                android:ellipsize="marquee"
                android:singleLine="true"
                android:text="Description"
                android:textColor="@color/secondary_text_default_material_light"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_parent"
                android:layout_height="wrap_content"
                android:layout_above="@id/tv_subtitle"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_alignWithParentIfMissing="true"
                android:layout_toRightOf="@id/icon"
                android:gravity="center_vertical"
                android:text="Example application"
                android:textColor="@color/primary_text_default_material_light"
                android:textSize="16sp" />
        </RelativeLayout>

    </android.support.v7.widget.CardView>
</RelativeLayout>

Demo

Setelah itu kalian bisa coba jalankan projectnya, maka hasilnya akan menjadi seperti di bawah ini :

Implementasi CardView di RecyclerView

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya ya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.