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:
Screenshot_1

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.

Cara Validasi Form di Android

Validasi adalah hal wajib yang harus ada disetiap aplikasi. Artikel ini akan menjelaskan konsep validasi di Android dengan XML ataupun dengan kode java.

Validasi XML

Android XML layout mempunyai cara untuk memfilter input dengan menggunakan paramater inputType. Berikut ini adalah contoh potongan XML EditText untuk menginput huruf kapital, input email, input telepon dan input angka. Perhaikan tampilan keyboardnya

Contoh XML validasi

 


 <EditText
        android:id="@+id/et_normal_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Masukan Nama "
        android:inputType="textCapCharacters"
        android:singleLine="true" />

    <EditText
        android:id="@+id/et_email_address"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Masukan Email"
        android:inputType="textEmailAddress"
     />

    <EditText
        android:id="@+id/et_phone_number"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Masukan Nomor telepon"
        android:inputType="phone" />

    <EditText
        android:id="@+id/number_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="masukan Umur"
        android:inputType="number" />

Efek validasi di layar sentuh keyboard

validasi searah jarum jam Email, telephone dan angka dan Caplock
validasi searah jarum jam Email, telephone, angka dan Caplock
.

Format Validasi lain

Selain 4 format yang ada diatas, android mendukung lebih dari 30 validasi input hanya dengan menambahkan parameter android:inputType="nama_validasi". Untuk melihat jenis validasi lain, buka layout XML lalu klik dibagian editText yang akan divalidasi seperti gambar dibawah ini.

Validasi input
Validasi input

Validasi Java

Validasi java digunakan untuk melakukan validasi secara code. Mengapa kita perlu melakukan validasi lagi? ada banyak alasan, salah satu yang paling gampang adalah input tidak boleh kosong. Untuk melakukan validasi java, yang perlu anda pelajari adalah Regex dan bahasa java itu sendiri, Tugas android adalah menampilkan error dengan memanfaatkan fungsi EditText.setError(). Berikut ini contoh codenya

public boolean harusDiisi(EditText editText) {

		String text = editText.getText().toString().trim();
		editText.setError(null);

		// length 0 means there is no text
		if (text.length() == 0) {
			editText.setError(Html
					.fromHtml("<font color='red'>Input tidak boleh kosong</font>"));
			return false;
		}

		return true;
	}

pemakaian Fungsi harusDisi()


txtNama = (EditText) findViewById(R.id.et_normal_text);
		// TextWatcher would let us check validation error on the fly
		txtNama.addTextChangedListener(new TextWatcher() {
			public void afterTextChanged(Editable s) {
				harusDiisi(txtNama);
			}

			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}

			public void onTextChanged(CharSequence s, int start, int before,
					int count) {
			}
		});

Hasil validasi

screenshoot

Download Source code

Silahkan download source codenya disini .

referensi