13
Oct
2014

Mengenal Button

Button adalah salah satu UI Componen pada Eclipse ADT. Button juga termasuk dalam Input Controls. Berfungsi sebagai masukan dari user yang pada umumnya mendapatkan event berupa klik.

Button ini bisa mempunyai cover berupa icon, text atau icon dan text. Button yang mempunyai cover berupa icon saja, lebih tepat menggunakan komponen ImageButton.

Icon

Item1

<ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world"
        android:src="@drawable/ic_launcher" />

 

Text

Item2

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

 

 Icon dan Text

Item3

<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:drawableLeft="@drawable/ic_launcher" />

 

Icon dan Text ini bisa kita atur posisi Iconnya, bisa disebelah kiri,atas, bawah atau kanan dari text.

<!-- Kiri  -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
       	android:drawableLeft="@drawable/ic_launcher"
        />

<!-- Atas  -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
       	android:drawableTop="@drawable/ic_launcher"
        />

<!-- Kanan  -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
       	android:drawableRight="@drawable/ic_launcher"
        />

<!-- Bawah  -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
       	android:drawableBottom="@drawable/ic_launcher"
        />

 

 

Button diatas baru muncul pada interface saja, namun belum mempunyai event handler. Event yang umum pada button adalah Click, lalu bagaimana caranya? Terdapat 2 cara:

  1. Tambahkan
    android:onClick="sendMessage"

    Contoh:

    <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:onClick="sendMessage"/>

    Lalu buka java class yang berada pada src>nama_project>nama_class.java, jika anda tidak merubah nama class ketika awal membuat project, maka nama default classnya adalah MainActivity.java, silahkan buka file tersebut, lalu tambahkan:

    public void sendMessage(View view) {
        // Tulis kode untuk respon dari Button
    }

     

  2. Cara kedua tidak menggunakan onClick pada Button di xmlnya, namun langsung ke MainActivity.java, tambahkan
    Button button = (Button) findViewById(R.id.button1);
    button.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            // Tulis kode untuk respon dari Button
        }
    });

     

Contoh full code tentang Button ini:

MainActivity.java

package com.example.button;


import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;


public class MainActivity extends ActionBarActivity {

	Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (Button)findViewById(R.id.button2);
        button.setOnClickListener(new OnClickListener() {
        	
			@Override
			public void onClick(View v) {
				button.setText(":(");
				
			}
		});
    }

    public void sendMessage(View view)
    {
    	button.setText("Hello");
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

activity_main.xml

<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="com.example.inputcontrols.MainActivity" >
	<!-- Kiri  -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
       	android:onClick="sendMessage"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="22dp"
        android:layout_marginRight="39dp"
        android:layout_toRightOf="@+id/button1"
        android:text=":(" />

</RelativeLayout>

 

 

Share

You may also like...