Tutorial Cara Menggunakan Chip Choice Material Design di Android Studio

Tutorial Cara Menggunakan Chip Choice Material Design 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 Menggunakan Chip Choice Material Design di Android Studio.

Chip pada Android adalah elemen kompak yang mewakili input, atribut atau tindakan.

Choice Chips memungkinkan pemilihan satu chip dari banyaknya opsi. Chip Choice dengan jelas menggambarkan dan menampilkan opsi di area yang ringkas. Mereka adalah alternatif yang baik untuk toggle buttons, radio buttons dan single select menus. Tampilan ini sering kalian lihat di bagian ketika user mendaftarkan diri di dalam sebuah aplikasi, maka aplikasi akan menampilkan interest pengguna tersebut seperti pada aplikasi TikTok. Untuk itu, silahkan disimak tutorial dibawah ini.

Tutorial Cara Menggunakan Chip Choice Material Design di Android Studio

Buatlah project Android Studio baru dengan informasi seperti pada tabel dibawah ini:

Application Name:Chip Choice App
Package Name:com.androidrion.chipchoiceapp
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

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Chip Choice App.

XML Layout File (activity_main.xml)

Buka file activity_main.xml dalam folder layout. Tambahkan komponen ChipGroup dan child komponen Chip di dalamnya. Tambahkan atribut pada ChipGroup agar bisa di deklarasikan pada file java. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Please tell us about your interest"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chip_group_choice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:singleSelection="true">

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Game" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="News" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Entertainment" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Arts" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Technology" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sports" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Blogging" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Politic" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Music" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Science" />


        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Volunteer" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Travelling" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cooking" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Collecting" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Reading" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Archery" />


        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Caligraphy" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dancing" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Camping" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Gardening" />

    </com.google.android.material.chip.ChipGroup>
</LinearLayout>

Java Activity File (MainActivity.java)

Buka file MainActivity.java dalam folder java lalu deklarasikan komponen ChipGroup yang ada pada layou xml. Lalu gunakan method setOnCheckedChangeListener pada ChipGroup. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.chipchoiceapp/MainActivity.java

package com.androidrion.chipchoiceapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.google.android.material.chip.Chip;
import com.google.android.material.chip.ChipGroup;

public class MainActivity extends AppCompatActivity {

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

        ChipGroup chipGroupChoice = findViewById(R.id.chip_group_choice);
        chipGroupChoice.setOnCheckedChangeListener((group, checkedId) -> {
            Chip chip = chipGroupChoice.findViewById(checkedId);

            if (chip != null) {
                Toast.makeText(getApplicationContext(), "You are interested in " + chip.getText().toString(), Toast.LENGTH_SHORT).show();
            }
            Log.e("OnCheckedChangeListener", "Called");
        });
    }
}

Run ‘app’

Sekarang jalankan project Android Studio kalian. Pada tampilan awal aplikasi, kalian akan melihat ada banyak chip yang muncul. Ketika kalian mengklik salah satu, maka chip tersebut akan berubah warna dan aplikasi menampilkan toast. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada video dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Menggunakan Chip Choice Material Design di Android Studio. Tutorial di atas sangatlah mudah untuk dikerjakan tidak banyak menggunakan kode java dan xml.

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