Tutorial Button Android

Button adalah komponen utama di aplikasi android. Sebagian besar aksi user biasanya berhubungan dengan button, misalkan submit, register, exit, hapus data dan sebagainya. Kali ini, saya akan menjelaskan tentang teknik membuat event onClick di Button Android. Jadi penekanannya adalah bagaiman sebuah button bisa diklik.

Langsung saja, misalkan kita punya 3 buah button seperti gambar dibawah ini:

Jika masing masing tombol di klik, maka akan muncul Toast, pesan singkat yang muncul beberapa detik lalu hilang secara perlahan.

Code XML

Code XML dari Buttonnya adalah sbb:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ButtonActivity" >

    <Button
        android:id="@+id/btnHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="81dp"
        android:text="Home" />

    <Button
        android:id="@+id/btnHelp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/btnHome"
        android:layout_alignRight="@+id/btnHome"
        android:layout_below="@+id/btnHome"
        android:layout_marginTop="39dp"
        android:text="Help" />

    <Button
        android:id="@+id/btnExit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/btnHelp"
        android:layout_alignRight="@+id/btnHelp"
        android:layout_below="@+id/btnHelp"
        android:layout_marginTop="40dp"
        android:text="Exit" />

</RelativeLayout>

Cara menambah Event Klik di Button

Untuk menambahkan event click ada dua cara, yang pertama menambahkan btnName.setOnClickListener kedalam masing masing button.

Langkah pertama, ikat button di XML dengan javanya di oncreate

btnHome = (Button) findViewById(R.id.btnHome);
btnHelp = (Button) findViewById(R.id.btnHelp);
btnExit = (Button) findViewById(R.id.btnExit);

Lalu tambahkan kode berikut:

// cara menambahkan event click ke masing masing button
		btnHome.setOnClickListener(new View.OnClickListener() {

			public void onClick(View arg0) {
				Toast.makeText(ButtonActivity.this, "BtnHome di klik",
						Toast.LENGTH_LONG).show();
			}
		});
		btnHelp.setOnClickListener(new View.OnClickListener() {

			public void onClick(View arg0) {
				Toast.makeText(ButtonActivity.this, "BtnHelp di klik",
						Toast.LENGTH_LONG).show();

			}
		});
		btnExit.setOnClickListener(new View.OnClickListener() {

			public void onClick(View arg0) {
				
				Toast.makeText(ButtonActivity.this, "BtnExit di klik",
						Toast.LENGTH_LONG).show();

			}
		});

Cara diatas cukup efektif jika tombolnya ada sedikit, namun kekurangan yang paling nampak, anda harus selalu menambahkan SetOnclickListener kesetiap Tombol baru. Ribet dan tidak rapih serta kodenya bertele tele. Cara kedua ada yang lebih mudah dan lebih elegen. Cukup tambahkan baris ini kedalam file XML pada bagian button. Ingat, Anda harus menambahkan code ini keseluruh button (sama persis).

android:onClick="klikButton"

Di bagian kode javanya, hapus semua setOnclickListener dan ganti dengan satu fungsi yang bernama void klikButton(view v)

public void klikButton(View v) {
	
		switch (v.getId()) {
		case R.id.btnHome:

			Toast.makeText(this, "BtnHome di klik",
					Toast.LENGTH_LONG).show();
			break;

		case R.id.btnHelp:
			Toast.makeText(this, "BtnHelp di klik",
					Toast.LENGTH_LONG).show();
			break;
			
		case R.id.btnExit:
			Toast.makeText(this, "BtnExit di klik",
					Toast.LENGTH_LONG).show();
			break;
			
	
		default:
			break;
		}
	}

Perhatikan nama fungsinya! nama fungsi harus sama dengan yang dideklarasikan di XML. Anda bebas membuat nama clicknya. Misalkan nama onclicknya adalah “pencetTombol” maka anda juga harus mengganti nama fungsi menjadi void pencetTombol(View v)

Source code

Untuk source code lengkap bisa anda di download di bagian dua artikel ini. Bagian dua akan membahas cara mempercantik button di android.