Tutorial Tombol dan Menambah Icon Pada Button dan Even Di Android Studio



Button

    Salah satu komponen yang dimiliki oleh android studio adalah button. Button digunakan untuk menangani sebuah event. Button bisa menghubungkan activity ke activity lain dan juga untuk mengeksekusi program yang dirancang. 

    Penulisan komponen button dapat dilihat seperti berikut:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>


Menambahkan Icon Pada Button

    Selain Text Kita juga dapat menambahkan sebuah icon pada button. Kita cukup menambahkan atribut:

  • drawableLeft => Posisi icon dibagian kiri
  • drawableRight => Posisi icon dibagian kanan
  • drawalbeTop=> Posisi icon dibagian Atas
  • drawableButton=> Posisi icon dibagian Bawah

Berikut penulisannya:

<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_user"
android:text="Nama User"/>

Cara menambahkan icon pada library dapat dilihat pada ling berikut:

https://barintek.blogspot.com/2023/02/imageview-berupa-vector-dan-menambah.html


Image Button

    Selain Button, imageButton juga dapat dijadikan sebuah tombol. IamgeView merupakan sebuah komponen button yang memiliki sebuah image yang dijadikan link untuk membuka activity baru. Berikut penulisannya.

<ImageView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:src="@drawable/ic_user"
android:background="@color/purple_700"
android:scaleType="centerInside"/>

    Atribut android:src="@drawable/ic_user" merupakan atribut yang digunakan untuk memanggil sebuah gambar vector. Sedangkan atribut android:scaleType="centerInside"/> berfungsi sebagai posisi gambar didalam button. Nilai yang dikandung oleh scaleType adalah seperti berikut:

  1. fitStart => posisi gambar di bagian kiri
  2. fitEnd=> Posisi gambar di bagian kanan
  3. fitCenter=> Posisi gambar dibagian tengah.


Memberi Event onClik pada Tombol

    Agar sebuah tombol memiliki event (Event) maka perlu ditambahkan sebuah method onClik(). Penulisan method tersebut diletakkan pada MainActivity.java. Berikut bentuk penulisan method di MainActivity.java.

public void namaMethod(View view) {
// script program
}


Mari kita praktekkan:

1. Buatlah sebuah projek di android studio.

2. Masuk ke activity_main.xml. Ganti layout menjadi LinearLayout.

3. Tambahkan sebuah button seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">

<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:onClick="Tombol1"
android:text="Button 1"/>
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Button 2"
android:onClick="Tombol2"
android:drawableLeft="@drawable/ic_user"/>

<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:onClick="Tombol3"
android:src="@drawable/ic_plus"/>

</LinearLayout>

    Perhatikan, pada masing-masing komponen terdapat atribut onClik. Nilai yang dikandung didalam onClik akan dijadikan nama method di halaman MainActivity.java.

4. Masuk ke halaman MainActivity.java dan tambahkan 3 buah method seperti berikut:

package com.example.latihan_app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

public void Tombol1(View view) {
}

public void Tombol2(View view) {
}

public void Tombol3(View view) {
}
}

5. Didalam Method  tambahkan script berikut:

public void Tombol1(View view) {
Toast.makeText(MainActivity.this, "Ini Tombol 1", Toast.LENGTH_LONG).show();
}

public void Tombol2(View view) {
Toast.makeText(MainActivity.this, "Ini Tombol 2", Toast.LENGTH_LONG).show();
}

public void Tombol3(View view) {
Toast.makeText(MainActivity.this, "Ini Tombol 3", Toast.LENGTH_LONG).show();
}

    Jika code Toast merah itu menandakan library belum ditambahkan. Klik code Toast kemudian tekan di keyboard Alt+Enter.

    Toast memberikan masukan singkat tentang operasi dalam bentuk pop-up kecil. Pop-up ini hanya memenuhi ruang yang diperlukan agar pesan dan aktivitas saat ini tetap terlihat dan interaktif. Toast otomatis menghilang setelah waktu tunggu.

Menangani Event Antar muka pada class Activity

    Setiap widget mempunyai bermacam events, seperti mengklik tombol button ataupun memilih check box. Ada 2 metode dalam penanganan Event:

1. Menggunakan Event handler

  • - onKeyDown(int, KeyEvent) – dipanggil ketika terjadi event key down.
  • - onKeyUp(int, KeyEvent) - dipanggil ketika terjadi event key up..
  • - onTrackballEvent(MotionEvent) – dipanggil ketika terjadi event trackball motion.
  • - onTouchEvent(MotionEvent) – dipanggil ketika terjadi event touch screen motion.
  • - onFocusChanged(boolean, int, Rect) – dipanggila saat melihat perubahan  fokus.

2. Menggunakan event listener

Event handler memerlukan anda untuk mengextend setiap object view untuk menghandle event. Namun hal ini tidak praktis digunakan. Karena itu class view menyediakan bermacam interface yang mengandung metode single callback. Interface ini dikenal dengan event listener. Beberapa contoh dari event listener dan method callback 

NoINTERFACEMETHODEKET
1View.OnClickListeneronClick()Dipanggil ketika penggunakan melakukan klik
2View.OnLongClickListener.onLongClick()Dipanggil ketika pengguna menekan lama pada view
3View.OnFocusChangeListener.onFocusChange()Dipanggil ketika pengguna menavigasi, menuju ke item lain
4View.OnKeyListeneronKey()Dipanggil ketika pengguna menekan tombol pada keyboard
5View.OnTouchListeneronTouch()Dipanggil ketika pengguna melakukan action yang digolongkan touch event
6View.OnCreateContextMenuListeneronCreateContextMenu()Dipanggil ketika kontek menu dibuat


Jalankan Progragram

Please Select Embedded Mode For Blogger Comments

Previous Post Next Post