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 library. 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/kotlin

2.  Klik halaman activity_main.xml dan gunakan model halaman split atau design agar kita dapat melihat tampilan pallate. Cari halaman menu pallate =>container =>CardView. Pada sebelahkanan CardView terdapat icon download. Klik tanda download tersebut untuk mendownload library dari cardView.

 NB: Pada sebagian aplikasi Android Studio, cardView sudah terinstall. Jadi kita tidak perlu melakukan langkah diatas.

3. Setelah download selesai lakukan sincronisasi. Caranya, klik tanda sinc now yang muncul di bagian atas halaman.

    

    Sekarang kita sudah dapat memulai menambahkan komponen cardView kedalam desain android kita.

Desain UI Dengan Carview

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

1. Masih di halaman activity_main.xml hapuslah komponen TextView dan rubahlah layout kita ke model LinearLayout seperti berikut 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>

      Jangan lupa menambahkan attribut orientasi di layout tersebut.

 2. Tambahkan komponen cardview kedalam layout Linear yang telah kita buat tadi

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Letakkan Komponen disini-->
</androidx.cardview.widget.CardView>

 

    Karena cardView merupakan layout maka perlu pasangan tag artinya CardView terdiri dari tag pembuka dan tag penutup. Di antara tag ini akan di letakkan komponen lain seperti ImageView, TextView dan lain sebagainya.

3. CardView sendiri memiliki attribut khusu. berikut beberapa attribut yang ada di CardView

    a. CardRadius => membuat sudut tumpul pada CardView

app:cardCornerRadius="10dp"

    b. CardElevation => Memberikan efek bayangan pada CardView

app:cardElevation="12dp"

4. . Jangan lupa tambahkan atribut margin dan padding untuk memberikan jarak pada cardView. Perhatikan code berikut

android:layout_margin="10dp"

android:layout_padding="10dp"

  

     Code jadinya pada cardView dapat dilihat seperti berikut:

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="12dp"
android:layout_margin="8dp"
android:padding="5dp">
<!-- Letakkan Komponen disini-->
</androidx.cardview.widget.CardView>

    Jika anda lihat pada halaman Design tidak akan nampak perubahan apapu. Itu di karenakan belum ada komponen yang kita letakkan pada cardView tersebut. Jadi selanjutnya kita akan menambahkan beberapa komponen ke dalam CardView kita.

Menambah Komponen Kedalam CardView

     

    Kita bisa tambahkan komponen TextView dan ImageView untuk mempercantik tampilan Cardview yang kita buat tadi. Pertama-tama anda siapkan gambar kemudian copy gambar tersebut dan pastekan di dalam folder root add=>res=>drawable. Disini gambar yang di copy bernama sate.png. Selanjutnya kita buat komponen ImageView di dalam CardView untuk menampilkan gambar tersebut.   Perhatikan code lengkapnya:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="12dp"
android:layout_margin="8dp"
android:padding="5dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="5dp"
android:src="@drawable/sate"/>

</androidx.cardview.widget.CardView>
</LinearLayout>

    Nah Agar desain CardView kita lebih menarik kita bisa menambahkan beberapa komponen lain seperti textView. Perhatikan code berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="12dp"
android:layout_margin="8dp"
android:padding="5dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
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="@android:color/holo_orange_light"
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>
</LinearLayout>

    Berikut hasil dari code diatas jika projek kita jalankan

    Nah, dari kasus di atas dapat anda kembangkan lagi. Tentu dengan gaya imajinasi anda sendiri agar desain lebih menarik lagi.  Sebagai latihan anda dapat membuat desain UI Seperti gambar di bawah ini:

    Komponen yang di tambahkan pada cardView adalah sebagai berikut:

• ImageView
• TextView
• Button

    Demikianlah sedikit tentang komponen CardView. anda dapat mengembangkan sesuai dengan kebutuhan anda. Selamat bekerja dan semoga sukses serta hari anda menyenangkan.