Tutorial Cara Membuat Material Button Toggle Group di Android Studio

Tutorial Cara Membuat Material Button Toggle Group di Android Studio

Halo para Android Developer, bagaimana kabar coding kalian hari ini? Saya harap kalian cepat menyelesaikannya. Pada artikel ini, Saya akan membagikan Tutorial Cara Membuat Material Button Toggle Group di Android Studio.

Toggle Button adalah salah satu elemen dasar di Android Studio yang digunakan untuk meng-host tombol dengan perilaku checkable. Pada dasarnya, Toggle Button berbeda dengan button biasanya yang ada pada Android. Toggle Button memiliki dua buah state, yaitu on dan off. Ada banyak aplikasi yang menerapkan elemen ini dalam aplikasinya.

Jadi, disini kita akan belajar cara membuat aplikasi android untuk menerapkan Android Material Button Toggle Group di Android Studio. Pada tutorial ini juga saya menggunakan drawable atau ikon yang diselipkan pada Toggle Button.

Tutorial Mudah Cara Menggunakan Material Button Toggle Group di Android Studio

Buatlah sebuah projek baru di Android Studio dengan data seperti pada tabel dibawah ini.

Application Name:Bottom Bar App
Package Name:com.androidrion.bottombarapp
Language:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

File drawable yang digunakan dalam projek ini adalah:

  1. ic_baseline_bedtime_24.xml
  2. ic_baseline_wb_sunny_24.xml

File xml layout yang digunakan dalam projek ini adalah:

  1. activity_main.xml

File java activity yang digunakan dalam projek ini adalah:

  1. MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Toggle App.

Icon Drawable

Pada projek ini, saya menggunakan vector drawable di dalam toggle button. Jadi, sebelum mendesain layout sebaiknya tambahkan terlebih dahulu file vector drawable nya dengan cara klik kanan pada folder drawable, lalu pilih New>Vector Asset. Selanjutnya kalian bisa mengikuti tutorial pada link dibawah ini.

File XML Layout

Buka file activity_main.xml dalam folder layout, lalu tambahkan widget Toggle Button di dalam layout RelativeLayout. Letakkan widget tersebut di tengah-tengah layout agar mudah di gunakan. Berikut ini adalah kode lengkap untuk file activity_main.xml

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"
    tools:context=".MainActivity">

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/btnToggleGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:checkedButton="@id/btnA"
        app:singleSelection="true">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnA"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Light Mode"
            app:icon="@drawable/ic_baseline_wb_sunny_24" />


        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnB"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dark Mode"
            app:icon="@drawable/ic_baseline_bedtime_24" />
    </com.google.android.material.button.MaterialButtonToggleGroup>

</RelativeLayout>

Pada kode diatas MaterialButtonToggleGroup memiliki atribut checkedButton yang berfungsi sebagai tombol pertama kali di klik setelah aplikasi berjalan. Dan tombol yang di aktifkan adalah tombol Light Mode.

File Java Activity

Setelah kalian mendesain pada file xml layout, sekarang buka file MainActivity.java dalam folder java. Tambahkan kode dibawah ini untuk bisa menampilkan Toast ketika kita menekan atau memilih salah satu dari Toggle Button yang telah kita buat. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.toggleapp/MainActivity.java

package com.androidrion.toggleapp;

import androidx.appcompat.app.AppCompatActivity;

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

import com.google.android.material.button.MaterialButton;
import com.google.android.material.button.MaterialButtonToggleGroup;

public class MainActivity extends AppCompatActivity {

    MaterialButtonToggleGroup toggleGroup;

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

        toggleGroup = findViewById(R.id.btnToggleGroup);
        toggleGroup.addOnButtonCheckedListener((group, checkedId, isChecked) -> {
            MaterialButton btnA = findViewById(R.id.btnA);

            if (btnA.isChecked()) {
                Toast.makeText(MainActivity.this, "Toggle Light Mode Aktif", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this, "Toggle Night Mode Aktif", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Aplikasi akan menampilkan Toggle Button berada di tengah layout dengan dua pilihan, yaitu Light Mode dan Dark Mode dengan masing-masing icon yang telah kita pasang. Ketika kita memilih Dark Mode maka aplikasi akan menampilkan Toast. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial mudah Cara Membuat Material Button Toggle Group di Android Studio. Kalian bisa menggunakan widget ini untuk keperluan dari masing-masing projek kalian. Jika kalian mengalami kesulitan dalam melakukan tutorial di atas, silahkan berkomentar di bawah pada artikel ini. Jangan lupa juga untuk like, komen dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantuk kalian. Terima kasih.

Get real time updates directly on you device, subscribe now.

You might also like
Leave A Reply

Your email address will not be published.