Tutorial membuat UI dengan CardView di Android Studio

 Pendahuluan

    CardView merupakan layout yang bisa dikatakan penggati dari FrameLayout. Fungsi dari CardView adalah sebagai wrapper atau frameLayout yang akan membungkus layout di dalamnya. CardView hampir menyerupai bentuk desain kartu. Desain CardView memiliki ciri khas adanya rounded corner dan adanya shadow untuk efek elevation.

    Dalam penggunaan komponen cardView perlu ditambahkan librarynya. Jadi pastikan anda sudah terkoneksi ke internet. Berikut langkah untuk mendownload librarynya:

1. Silahkan buat projek baru dengan setting berikut

•  nama projek: cardView_App. 
• activity :Empty Activity
• language: java

2.  Klik hlaman activity_main.xml dengan model halaman split. cari pallate->container->carview. Klik tanda download disampingnya.

3. Setelah download selesai klik tanda sincroun yang muncul di bagian atas halaman.

    

    Sekarang kita sudah dapat memulai menambahkan komponen cardView.

Desain UI Dengan Carvidw

    Setelah selesai mensinkronkan cardView selanjutnya kita coba menggunakan komponen tersebut untuk membuat UI android. Berikut langkah yang anda kerjakan:

1. Masih dihalaman activity_main.xml hapuslah komponen TextView dan gantilah layout constrainLayout menjadi layout LinearLayout. Tambahkan atribut orientation dengan nilai vertical dan atribut background seperti code berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/material_dynamic_neutral90"
    tools:context=".MainActivity">

</LinearLayout>

   2. Tambahkan komponen cardview didalam layout Linear

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</androidx.cardview.widget.CardView>

 

    Karena cardView merupakan layout maka perlu pasangan tag yang terdiri dari tag pembuka dan tag penutup. Diantara tag inilah komponen diletakkan.

3. Tambahkan atribut berikut:

app:cardCornerRadius="10dp"

Atribut diatas akan member efek sudut tumpul pada cardView

4. Beri efek bayangan dengan menambahkan atrbiut berikut

app:cardElevation="12dp"

5. Jangan lupa tambahkan atribut margin untuk memberikan jarak pada cardView

android:layout_margin="10dp"

    Kita bisa tambahkan komponen TextView dan ImageView untuk mempercantik tampilan Cardview kita. Perhatikan code lengkapnya:

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="12dp"
    android:layout_margin="10dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:src="@drawable/sate"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_marginLeft="110dp"
        android:text="Sate Padang"
        android:background="@color/Kuning"
        android:textStyle="bold"
        android:textSize="25dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_marginLeft="110dp"
        android:layout_marginTop="40dp"
        android:text="Terbuat dari bahan-bahan pilihan dan diambil dari lereng gunung singgalang serta diolah oleh tangan para ahli" />
</androidx.cardview.widget.CardView>

Berikut hasil dari code diatas jika projek kita jalankan

    Nah, dari kasus diatas anda dapat mengembangkan menjadi desain yang lebih menarik lagi. Sebagai latihan anda dapat membuat desain UI Seperti gambar dibawah ini

Selamat bekerja dan semoga sukses.