Cara Membuat Button pada Android Studio

Pada tutorial Android Studio kali ini, kita akan mempelajarai bagaimana cara mengcreate Button control dalam sebuah aplikasi Android .

Pertama-tama kita akan mengcreate widget Button yang akan ditambahkan pada layout, kemudian kita akan mempelajari bagaimana menghandle Button yang diklik oleh user dengan dua cara yang berbeda.

Pembuatan widget button

1. Create sebuah project 
Disini kita berinama Button Click pada Application name. Kemudian pada Target Android Device centang Phone and Tablet, kemudian set Minimum SDK : API 10 : Android 2.3.3 (Gingerbread). Lalu pilih Blank Activity, dan biarkan default untuk Activity Name : MainActivity.

2. Create file buttonshape.xml pada folder res/drawable
Untuk membuat file buttonshape xml, klik kanan pada res/drawable, kemudian pilih New-> Drawable resource file. Langkah selanjutanya berinama buttonshape seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

3. Buka file  res/drawable/buttonshape.xml 
Disini kita akan membuat sytle untuk button. Tujuan dari style ini untuk memperindah dari Button yang akan create. Berikut ini adalah kode untuk buttonshape.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="14dp"
        />
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:centerColor="#7995A8"
        android:startColor="#E8E8E8"
        android:endColor="#000000"
        android:type="linear"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="3dp"
        android:color="#878787"
        />
</shape>

4. Buka file res/layout/content_main.xml
Dalam file ini kita akan merancang GUI yang mengandung satu buah widget Button serta memanggil file buttonshape.xml untuk memperindah tampilan Button.

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.buttonclick.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/Button01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:textColor="#FFFFFF"
        android:textSize="30sp"
        android:background="@drawable/buttonshape"
        android:shadowColor="#F01F57"
        android:shadowDx="2"
        android:shadowDy="2"
        android:shadowRadius="5"
        android:onClick="onPressme" />

</RelativeLayout>

Catatan :
Perhatikan untuk kode  “android:background="@drawable/buttonshape“, kode tersebut memanggil file buttonshape.xml yang berada pada folder drawable. Kemudian  "android:onClick="onPressme" " memiliki tujuan sebagai penghubung antara disisi di interface dengan di MainActivity.java yang nantinya akan kita buat method untuk menghandle proses klik.

Sehingga output untuk aplikasi yang kita buat ditunjukkan oleh Gambar.2 dibawah ini:

Gambar.2

Menambahkan event click

Seperti yang terlihat pada Gambar.2, bila diklik pada tombol "CLICK ME" tidak akan melakukan event apapun. Untuk menhandle event click , terdapat dua cara :

• Membuat sebuah method
Pada file content_main.xml terdapat kode android:onClick="onPressme . Dalam hal ini kita menambahkan event dengan menambahkan method onPressme pada file MainActivity.java seperti kode berikut :

package com.ilmudetil_blogspot.buttonclick;

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


public class MainActivity extends AppCompatActivity {

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

    }

    public void onPressme(View view)
    {
        Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();
    }
}



Sehingga disaat aplikasi dijalankan, kemudian ditekan tombol "CLICK ME", maka akan muncul aksi dari proses penekanan tombol tersebut seperti yang ditunjukkan oleh Gambar.3 dibawah ini :



Gambar.3

• Mengimplementasikan onClickListener
Disini kita akan menggunakan cara lain untuk menerapkan penanganan klik, yaiut dengan cara mendaftarkan new View.OnClickListener  terhadap Button control dengan menggunakan metode setOnClickListener (). Berikut ini kode lengkap dalam MainActivity.java setelah ditambahkan onClickListener :

package com.ilmudetil_blogspot.buttonclick;

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


public class MainActivity extends AppCompatActivity {

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

        Button tombol = (Button) findViewById(R.id.Button01);
        tombol.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Nekan tombol ya!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}



Sehingga begitu aplikasi dijalankan, dan ditekan tombol "CLICK ME" maka akan muncul pesan informasi seperti yang ditunjukkan oleh Gambar.4 dibawah ini :



Gambar.4

     
• DOWNLOAD

Tweet

Subscribe to receive free email updates: