Belajar Membuat Material Design CardView di Android

Last Updated on 10 years by Mas Herdi

Hey guys, sudah lama saya tidak menuliskan postingan di sini karena kesibukan dalam bekerja dan bermain Dota 2. hehehe Apakah dari kalian ada juga yang main Dota 2? Kalo jago boleh lah add id saya dan kapan2 kita main bareng. 😀

Oke, cukup sekian intronya :), pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat CardView pada Android. Dengan diperkenalkannya Material Design maka ada beberapa View baru yang diperkenalkan oleh Android, salah satunya adalah CardView ini.

Pada aplikasinya, CardView lebih berfungsi sebagai wrapper/frame layout yang akan membungkus layout di dalamnya dengan desain menyerupai kartu seperti yang biasa kalian lihat pada aplikasi Google di Android. Ciri khas dari desain CardView adalah adanya rounded corner dan adanya shadow untuk efek elevation.

Membuat CardView pada Android

Oke, langsung saja ke tutorialnya. Pertama-tama buatlah project baru di Android Studio terlebih dahulu. Caranya bisa dilihat pada tutorial saya sebelumnya. Setelah itu, tambahkan dependencies library cardview support pada build.gradle file di project tersebut :

dependencies {

    compile 'com.android.support:appcompat-v7:21.0.3'
    compile 'com.android.support:cardview-v7:21.0.3'
    compile 'com.android.support:support-v4:21.0.3'

}

Library tersebut merupakan bagian dari support library Android, hal ini dilakukan supaya layout CardView kita masih bisa tetap berjalan lancar di Android yang belum menggunakan versi terbaru saat ini (Lollipop).

Setelah itu pada layout xml kita tambahkan CardView sebagai wrapper. Replace main layout (activity_main.xml) pada project Anda dengan kode berikut :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <android.support.v7.widget.CardView
        android:id="@+id/cv_main"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="@dimen/cardview_default_radius"
        app:cardElevation="@dimen/cardview_default_elevation"
        android:layout_height="100dp"
        android:layout_width="match_parent">
        <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_gravity="center"/>
    </android.support.v7.widget.CardView>
</RelativeLayout>

Sebenarnya hanya dengan menambahkan elemen CardView pada xml, kita sudah bisa membuat tampilan yang berasa “material design”. 🙂

Kemudian element CardView tersebut bisa kita akses dari java class nya dengan cara yang sama seperti saat kita ingin mengakses view element lainnya, contohnya seperti berikut :

        CardView cardView = (CardView)findViewById(R.id.cv_main);
        cardView.setCardElevation(0.5f);

Setelah kita akses, kita bisa memanipulasi properties dari CardView tersebut. Seperti contoh di atas, saya mengubah elevation-nya menjadi sebesar 0.5.

Demo

Setelah kita running, maka akan muncul tampilan seperti berikut :

Android Material Design : CardView | (c) snnns

Terlihat pada gambar di atas element CardView nampak rapi membungkus tulisan yang ada di tengahnya. 🙂

Sekian dari saya, semoga membantu dan tunggu postingan tentang Android Material Design lainnya ya!