Tutorial Cara Membuat Button pada Android Studio


Assalamualaikum Warahmatullahi Wabarakatuh. Dalam mengembangkan sebuah aplikasi pastinya kita membutuhkan sebuah widget yang digunakan untuk mengeksekusi sesuatu, salah satu widget yang sering digunakan yaitu Button, Button sering digunakan untuk mengeksekusi program yang telah dirancang untuk melakukan sesuatu.


Pada Button, kita dapat menambahkan penanganan kejadian dan memberikan aksi (event) pada Button tersebut saat diklik, kita bisa menggunakan method onClick(), kejadian dapat ditangani dengan mengimplementasikan interface OnClickListener yang terdapat pada android.view.

A. Membuat Button

1) Pertama buat project baru pada Android Studio kalian, tutorialnya klik Disini. 

2) Untuk contoh sederhananya, kita akan menggunakan 1 Button terlebih dahulu, cara membuatnya kita perlu menambahkan tag <Button> menggunakan kode xml atau bisa langsung mendragnya, pada activity_main.xml.

<?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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/testing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Klik Disini" />
    
</LinearLayout>

Baca Juga:

Akan terlihat seperti ini:

WildanTechnoArt-Button Widget Example

Ada beberapa atribut yang saya gunakan pada button tersebut, diantaranya:
  • android:id: Untuk menginisialisasi id pada Button tersebut.
  • android:layout_width: Untuk mengatur lebar widget.
  • android:layout_height: Untuk mengatur tinggi widget.
  • android:text: Untuk menambahkan text pada widget.

B. Penanganan Kejadian

Sebelumnya kita sudah membuat 1 buah button pada aplikasi android, tapi jika kita jalankan dan mengklik button tersebut tidak akan berfungsi.

Cara agar Button tersebut berfungsi dengan baik sesuai fungsi dari aplikasi tersebut, kita perlu menggunakan OnClickListener(), untuk menangani kejadian saat button di klik.

Pada contoh berikut ini kita akan membuat kejadian dimana saat Button diklik, akan muncul pesan berupa dialog sederhana menggunakan sebuah class bernama Toast.

Buka file MainActivity.java kalian, lalu masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button tombol; // Membuat Variable Button

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tombol = findViewById(R.id.testing); // Menginisialisasi ID untuk Button

        // Sebuah Listener untuk penanganan kejadian saat tombol diklik
        tombol.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Memunculkan pesan berupa text dialog saat tombol "Klik Disini" diklik.
                Toast.makeText(getApplicationContext(), "Selamat Datang Di WILDAN TECHNO ART", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Coba kalian jalankan projectnya, jika button tersebut di klik, maka hasilnya akan seperti berikut ini.

WildanTechnoArt-Button OnClickListener Example

Pada contoh berikutnya kita akan membuat program sederhana menggunakan 3 buah Button, masing-masing button akan kita berikan aksi/event yang berbeda.

Kalian ubah terlebih dahulu kode xml pada activity_main, menjadi seperti berikut ini:

<?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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/testing_satu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Masuk" />

    <Button
        android:id="@+id/testing_dua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daftar" />

    <Button
        android:id="@+id/testing_tiga"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keluar" />

</LinearLayout>

Akan terlihat seperti ini:

WildanTechnoArt-Widget Button Example2

Jika terdapat beberapa widget yang menggunakan OnClickListener, ada cara lain untuk menambahkan OnClickListener pada masing-masing widget, yaitu dengan menggunakan implementasi interface View.OnClickListener.

Setelah itu kalian harus membuat method onClick() berparameter tunggal bertipe View dan memanggil setOnClickListener() pada masing-masing widget, didalam method onClick(), gunakan statement switch dan case untuk menentukan ID yang akan diklik.

package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button tombol_masuk, tombol_daftar, tombol_keluar; // Membuat Variable Button

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tombol_masuk = findViewById(R.id.testing_satu); // Menginisialisasi ID untuk Button Masuk
        tombol_daftar = findViewById(R.id.testing_dua); // Menginisialisasi ID untuk Button Daftar
        tombol_keluar = findViewById(R.id.testing_tiga); // Menginisialisasi ID untuk Button Keluar
        tombol_masuk.setOnClickListener(this); // Memberikan Listener pada Button Masuk
        tombol_daftar.setOnClickListener(this); // Memberikan Listener pada Button Daftar
        tombol_keluar.setOnClickListener(this); // Memberikan Listener pada Button Keluar
    }

    @Override
    public void onClick(View view) {
        // Mendapatkan Semua ID yang Terdapat pada Masing-masing Widget
        switch (view.getId()){
            case R.id.testing_satu:
                // Statement disini akan di eksekusi jika tombol Masuk diklik
                Toast.makeText(this, "Selamat Datang", Toast.LENGTH_SHORT).show();
                break;
            case R.id.testing_dua:
                // Statement disini akan di eksekusi jika tombol Daftar diklik
                Toast.makeText(this, "Silakan Mendaftar", Toast.LENGTH_SHORT).show();
                break;
            case R.id.testing_tiga:
                // Statement disini akan di eksekusi jika tombol Keluar diklik
                finish(); // Digunakan Untuk Keluar Dari Aplikasi
                break;
        }
    }
}

Baca Juga:

Terakhir jalankan project tersebut dan lihatlah hasilnya.

Sekian dari saya, bila ada yang ingin ditanyakan, silakan isi komentar dibawah dan mohon maaf bila ada kesalahan. Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.