* Artikel ini adalah rangkaian dari tutorial Android Studio, untuk melihat tutorial Android Studio lainnya bisa mengklik tautan ini

Tampilan merupakan hal cukup penting dalam pembuatan aplikasi. Dengan tampilan aplikasi yang lembut dan halus, pengguna yang menggunakan aplikasi akan merasa nyaman dan betah dalam menggunakan aplikasi dengan tampilan yang menarik.

Di Android, tampilan yang baik dan menarik bisa dibuat menggunakan material design. Dengan material design, aplikasi akan terlihat mempunyai perbedaan yang mencolok dengan aplikasi yang belum menggunakan material design. Dalam hal warna, material design dirancang agar sinkron dan nyaman untuk dilihat oleh pengguna.

Pada material design, ada beberapa View baru yang diperkenalkan oleh Android, salah satunya adalah CardView. Nah, pada tulisan kali ini saya akan menjelaskan tentang membuat tampilan CardView pada aplikasi Android menggunakan Android Studio.

CardView berfungsi sebagai wrapper atau frame layout yang akan membungkus layout di dalamnya dengan desain menyerupai kartu. Jika pembaca melihat daftar aplikasi pada Google Play Store, tampilan yang digunakan adalah CardView. Ciri khas dari desain CardView adalah adanya rounded corner dan adanya shadow untuk efek elevation.

Silahkan buat proyek baru pada Android Studio dengan nama CardViewTest, atau berikan nama sesuai keinginan. Buka Android Studio, klik File – New Project isi Application Name dengan nama CardViewTest dan Company Domain dengan teknojurnal.com. Pada jendela Activity silahkan pilih Empty Activity.

Setelah itu, kita akan menambahkan dependencies library dari CardView pada proyek yang sedang dibuat. Silahkan buka file build.gradle(Module:app) yang terletak pada proyek yang sudah dibuat. Kemudian tambahkan kodingan di bawah ini.

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'

Setelah menambahkan library, silahkan buka file activity_main.xml yang terletak pada directory res/layout/ proyek yang dibuat. Kemudian tambahkan kodingan seperti dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="oc.startup.ra.cardview2.MainActivity">

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="380dp"
        android:layout_margin="8dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_alignParentTop="true"
                android:scaleType="centerCrop"
                android:src="@drawable/wallpaper" />

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/thumbnail"
                android:maxLines="3"
                android:padding="8dp"
                android:text="@string/title"
                android:textColor="#222"
                android:textStyle="bold"
                android:textSize="22dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/title"
                android:maxLines="3"
                android:padding="8dp"
                android:text="@string/description"
                android:textColor="#666"
                android:textSize="14dp" />

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

</RelativeLayout>

Dengan menambahkan kodingan diatas, kita sudah dapat melihat hasil dari tampilan CardView yang dibuat. Tetapi, untuk melengkapi tampilan agar menampilkan hasil yang bagus silahkan ubah kodinganyang ada pada ImageView dan TextView.

Pada ImageView, siapkan gambar atau foto untuk dijadikan wallpaper yang dibungkus oleh CardView. Untuk menambahkan gambar silahkan masuk ke direktori proyek yang dibuat dan simpan pada folder drawable. Pada contoh ini terletak pada CardViewTest\app\src\main\res\drawable. Berikan nama gambar sesuai keinginan, kemudian ubah kodingan di bawah ini sesuai dengan nama gambar yang dipilih.

android:src="@drawable/wallpaper"

Untuk melengkapi TextView, silahkan buka direktori res/values/string.xml yang berada pada proyek yang dibuat. Kemudian tambahkan kodingan seperti di bawah ini.

<string name="title">Riswan Abidin</string>
<string name="description">Seorang yang sangat tertarik dengan perkembangan teknologi dan antusias terhadap komunitas dan startup</string>

Name=”tittle” dan name=”description” itu sama pada kodingan TextView yang ada pada activity_main.xml seperti di bawah ini.

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/thumbnail"
    android:maxLines="3"
    android:padding="8dp"
    android:text="@string/title"
    android:textColor="#222"
    android:textStyle="bold"
    android:textSize="22dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/title"
    android:maxLines="3"
    android:padding="8dp"
    android:text="@string/description"
    android:textColor="#666"
    android:textSize="14dp" />

Nah, cukup mudah kan membuat tampilan CardView pada Android Studio? Para pembaca dapat lebih mengeksplorasi agar tampilan lebih menarik. Di bawah ini merupakan tampilan aplikasi ketika dijalankan pada emulator Android.

Sebagai referensi dalam mempelajari bagaimana cara membuat tampilan CardView, pembaca dapat mengunduh kode sumber CardView ini untuk dipelajari lebih lanjut.

* Artikel ini adalah rangkaian dari tutorial Android Studio, untuk melihat tutorial Android Studio lainnya bisa mengklik tautan ini