Categories: DeveloperPanduan

Cara Membuat Tampilan CardView Menggunakan Android Studio

* 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 FileNew 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

Share
Published by
Riswan Abidin

Recent Posts

Cisco Peringkatkan Kerentanan Kritis Dalam Cisco Data Center Network Manager

Cisco mengungkapkan tiga kerentanan dalam layanannya. Ini dia penanganannya!

January 7, 2020

Optimal idM Meluncurkan OptimalCloud Partner Platform

Ini ulasan mengenai keuntungan OptimalCloud Partner Platform, platform baru milik Optimal idM!

January 6, 2020

Google Siapkan Coral Accelerator Module dan Coral Dev Board Mini untuk Tahun 2020

Google kenalkan dua koleksi baru dari Coral. Dua koleksi baru ini bakal menambah kemampuan pengembangan…

January 3, 2020

Google Kembangkan Model Kecerdasan Buatan Untuk Deteksi Kanker Payudara

Raksasa Google baru saja mengembangkan sistem pemindaian kanker payudara berbasis kecerdasan buatan. Bagaimana hasilnya, berikut…

January 3, 2020

Google Dorong Fitur Bubbles Notifications Ke Versi Stabil

Meski dikenalkan bersamaan dengan Android 10 Beta, sampai kini Bubbles Notifications masih dalam tahap pengembangan.…

December 31, 2019

Samsung Siapkan Lima Proyek dan Empat Startup C-Lab Untuk CES 2020

Samsung akan kembali memamerkan hasil program C-Lab ke ajang CES 2020. Ini dia proyek dan…

December 30, 2019