Belajar Cara Membuat Button di Android Studio dengan Mudah

Dalam artikel kali ini kita akan belajar cara membuat Button di Android Studio. Button di Android Studio merupakan salah satu tampilan yang digunakan untuk melakukan interaksi antara pengguna dengan aplikasi. Tombol Push dapat diklik, atau ditekan oleh pengguna untuk melakukan suatu tindakan. Ada berbagai jenis tombol yang digunakan di android seperti CompoundButton, ToggleButton, RadioButton.

Cara Membuat Button di Android Studio

Button di Android Studio

Button adalah subkelas dari kelas TextView dan tombol compound adalah subkelas dari kelas Button. Pada tombol, kita dapat melakukan berbagai tindakan atau event seperti event klik, acara event yang ditekan, event sentuh, dan lain-lain..
Button adalah komponen GUI yang bisa diketuk atau diklik oleh pengguna. Ketika pengguna mengetuk / mengklik tombol di aplikasi Android, aplikasi dapat merespons klik / ketuk tersebut. Button di Android Studio ini dapat dibagi menjadi dua kategori: yang pertama adalah Button dengan teks aktif, dan kedua adalah Button dengan gambar di dalamnya. Button dengan gambar dapat berisi gambar dan teks. Button di Android Studio yang menggunakan gambar disebut dengan ImageView.

Berikut ini adalah contoh sederhana cara membuat button di Android Studio dengan menggunakan XML.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BangRopi.com"/>

Ada beberapa atribut lainnya yang dapat dipakai ke dalam Button ini, berikut ini adalah beberapa atribut yang sering dipakai.

1. android:id

Atribut ini digunakan untuk kode unik untuk mengidentifikasi sebuah tampilan termasuk juga Button. Berikut ini adalah contoh dari atribut android;id.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:text="BangRopi.com"/>

2. android:text

Atribut ini digunakan untuk memberikan teks atau tulisan terhadap Button. Berikut ini adalah contoh dari atribut  android:text

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:text="BangRopi.com"/>

3. android:textColor

Atribut ini digunakan untuk memberikan warna terhadap teks atau tulisan yang terdapat di dalam tampilan Button. Nilai dari atribut ini bisa berbentuk “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”. Berikut ini adalah contoh dari atribut android:textColor

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:text="BangRopi.com"
    android:textColor="#673AB7"/>

Contoh Button 1

4. android:background

Atribut ini digunakan untuk memberikan warna pada latar belakang dari tampilan Button. Nilai dari atribut ini bisa berbentuk “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”. Berikut ini adalah contoh dari atribut android:background.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"/>

Contoh Button 2

5. android:gravity

Atribut ini adalah atribut pilihan yang bisa anda gunakan untuk mengontrol alignment teks yang ada di dalam Button. Nilai untuk atribut ini bisa berupa left, right, center, top, bottom, center_vertical, center_horizontal dan lain sebagainya. Berikut ini adalah contoh dari atribut android:gravity.

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:gravity="left"/>

Contoh Button 3

6. android:textStyle

Atribut ini digunakan untuk mengatur gaya penulisan teks yang ada di dalam Button. Nilai dari atribut ini bisa berupa “bold” (cetak tebal), “italic” (cetak miring), dan “normal”. Berikut ini adalah contoh dari atribut android textStyle.

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:textStyle="italic"/>

Contoh Button 4

7. android:padding

Atribut ini digunakan untuk mengatur padding atau jarak dalam dari sisi kiri, sisi kanan, atas dan bawah dari tampilan Button. Contoh padding ini bisa anda lihat pada contoh-contoh yang sebelumnya.

8. android:layout_margin

Atribut ini digunakan untuk mengatur margin atau jarak luar dari sisi kiri, sisi kanan, atas dan bawah dari tampilan Button. Contoh margin ini bisa anda lihat pada contoh-contoh yang sebelumnya.

Baca Juga: Cara Membuat Button OnClick di Android Studio dengan Contohnya

9. android:drawableBottom

Atribut ini digunakan untuk menambahkan gambar di bagian bawah dari teks Button. Berikut ini adalah contoh dari atribut android:drawableBottom.

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:drawableBottom="@drawable/ic_launcher_foreground"/>

Contoh Button 6

10. android:drawableTop

Atribut ini digunakan untuk menambahkan gambar di bagian atas dari teks Button. Berikut ini adalah contoh dari atribut android:drawableTop

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:drawableTop="@drawable/ic_launcher_foreground"/>

Contoh Button 7

11. android:drawableLeft

Atribut ini digunakan untuk menambahkan gambar di bagian kiri dari teks Button. Berikut ini adalah contoh dari atribut android:drawableLeft

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:drawableLeft="@drawable/ic_launcher_foreground"/>

Contoh Button 5

12. android:drawableRight

Atribut ini digunakan untuk menambahkan gambar di bagian kanan dari teks Button. Berikut ini adalah contoh dari atribut android:drawableRight

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textSize="24sp"
    android:textColor="#fff"
    android:text="BangRopi.com"
    android:background="#3F51B5"
    android:padding="10dp"
    android:layout_margin="10dp"
    android:drawableRight="@drawable/ic_launcher_foreground"/>

Contoh Button 8

Masih banyak atribut lagi yang bisa anda gunakan untuk mengkostumisasi tampilan Button anda. Saya tidak bisa menyebutkan semua atribut tersebut di artikel ini. Anda bisa mencoba-coba menggunakan atribut lainnya. Anda bisa menggunakan situs Developer Android sebagai referensi anda.

OK. saya rasa artikel mengenai cara membuat Button di Android Studio ini sudah cukup. Jika anda memiliki pertanyaan mengenai Button di Android Studio ini bisa anda sampaikan melalui kolom komentar atau pada halaman Hubungi Saya. Anda juga bisa menyampaikan kritik dan saran mengenai artikel atau blog ini.

2 thoughts on “Belajar Cara Membuat Button di Android Studio dengan Mudah

    • April 29, 2018 at 2:12 am
      Permalink

      Iya gan, buat bikin aplikasi android

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.