Tutorial Cara Membuat Expandable CardView Sederhana di Android Studio

Tutorial Cara Membuat Expandable CardView di Android Studio

Halo para Android Developer, Bagaimana kabar kalian semua hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial Cara Membuat Expandable CardView di Android Studio dengan mudah.

Expandable CardView menyediakan untuk membuat panel ekspansi tanpa terlalu banyak membuat kode yang rumit. Tapilan CardView yang dapat diperluas (expandable) menjadi sangat berguna dalam hal penyajian data atau informasi yang efisien di layar. Tampilan ini digunakan di berbagai aplikasi seperti aplikasi kontak atau aplikasi galeri. Disini, di dalam tutorial ini kita akan membuat Expandable CardView sederhana dengan menggunakan bahasa Java.

Tutorial Cara Membuat Expandable CardView Sederhana di Android Studio

Buatlah project android studio baru dengan informasi seperti dibawah ini:

Application Name:Expandable CardView App
Package Name:com.androidrion.expandablecardviewapp
Language:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml

Daftar file java yang digunakan dalam project ini:

  1. MainActivity.java

Daftar file drawable yang digunakan dalam project ini:

  1. favicon.jpg
  2. ic_baseline_keyboard_arrow_down_24.xml
  3. ic_baseline_keyboard_arrow_up_24.xml
  4. ic_baseline_language_24.xml

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Expandable CardView App.

Vector Asset Drawable File

Dapatkan vector asset diatas dengan cara mengikuti tutorial pada link dibawah ini.

XML Layout Activity (activity_main.xml)

Buka file activity_main.xml dan tambahkan widget CardView dengan atribut app:cardCornerRadius dan app:cardElevation. Dibawah ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="16dp"
    android:background="#eeeeee"
    tools:context=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="1dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="194dp"
                android:scaleType="centerCrop"
                android:src="@drawable/favicon" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp">

                <TextView
                    android:id="@+id/headline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:text="Android Rion"
                    android:textAppearance="?attr/textAppearanceHeadline6" />

                <TextView
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/headline"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:layout_marginTop="8dp"
                    android:text="Tutorial, UI Design, Tips dan Trik Android Studio"
                    android:textAppearance="?attr/textAppearanceBody2"
                    android:textColor="?android:attr/textColorSecondary" />

                <ImageButton
                    android:id="@+id/button_show"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:background="@android:color/transparent"
                    android:src="@drawable/ic_baseline_keyboard_arrow_down_24" />

            </RelativeLayout>

            <LinearLayout
                android:id="@+id/linear_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:orientation="vertical">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#eaeaea" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="16dp">

                    <TextView
                        android:id="@+id/text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentTop="true"
                        android:text="Pada tutorial ini kalian akan belajar cara membuat aplikasi android untuk menampilkan Expandable CardView di Android Studio dengan mudah"
                        android:textAppearance="?attr/textAppearanceBody2"
                        android:textColor="?android:attr/textColorSecondary" />

                    <!-- Buttons -->
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/text"
                        android:layout_marginTop="8dp"
                        android:orientation="horizontal">

                        <com.google.android.material.button.MaterialButton
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="8dp"
                            android:layout_marginRight="8dp"
                            android:text="Visit"
                            app:icon="@drawable/ic_baseline_language_24" />

                        <com.google.android.material.button.MaterialButton
                            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Subscribe YouTube" />
                    </LinearLayout>

                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>


</RelativeLayout>

Java Activity File (MainActivity.java)

Buka file MainActivity.java dalam folder java lalu deklarasikan dari tiap masing-masing komponen yang kita tambahkan pada file xml layout. Pada ImageButton buatlah function if else didalamnya. Dibawah ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.expandablecardviewapp/MainActivity.java

package com.androidrion.expandablecardviewapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.transition.AutoTransition;
import androidx.transition.TransitionManager;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.google.android.material.card.MaterialCardView;

public class MainActivity extends AppCompatActivity {

    MaterialCardView cardView;
    ImageButton show;
    LinearLayout hiddenLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cardView = findViewById(R.id.cardView);
        show = findViewById(R.id.button_show);
        hiddenLayout = findViewById(R.id.linear_layout);

        show.setOnClickListener(v -> {
            if (hiddenLayout.getVisibility() == View.VISIBLE) {
                TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
                hiddenLayout.setVisibility(View.GONE);
                show.setImageResource(R.drawable.ic_baseline_keyboard_arrow_down_24);
            } else {
                TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
                hiddenLayout.setVisibility(View.VISIBLE);
                show.setImageResource(R.drawable.ic_baseline_keyboard_arrow_up_24);
            }
        });
    }
}

Run ‘app’

Sekarang jalankan project Android Studio kalian. Apabila kode diatas tidak terjadi kendala, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Membuat Expandable CardView Sederhana di Android Studio. Langkah-langkah diatas sangatlah mudah untuk membuat tampilan yang super keren.

Jika kalian mengalami kendala saat melakukan tutorial di atas, Silahkan beri komentar pada artikel ini dibawah. Jangan lupa untuk Subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian semua. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Exit mobile version