√ Baru ! Tutorial Custom Button pada Android Studio

Salah satu widget yang paling banyak digunakan saat membuat aplikasi android adalah Button. Button atau tombol biasanya memiliki fungsi untuk melakukan perintah tertentu, contohnya yaitu button login yang berfungsi untuk menampilkan halaman isian email dan password.

Supaya tombol terlihat lebih menarik desain atau bentuknya maka kita bisa melakukan custom button pada android studio. Bagaimana caranya ? Ikuti tutorial berikut ini sekarang juga !

Daftar Isi

Inilah Cara Mudah Melakukan Custom Button pada Android Studio

Langsung saja kita pelajari cara custom button android sekarang juga.

Buat Project Baru pada Android Studio

Buka android studio yang sudah terinstall di PC atau laptopmu, kemudian buat project baru dengan nama ” custom button “.

custom button android — Membuat project baru custom button

Menambahkan Widget Button

Jika workspace android studio sudah siap digunakan, langkah selanjutnya adalah menambahkan beberapa widget button yang akan kita custom dengan cara buka activity_main.xml lalu tambahkan kode-kode xml di bawah ini :

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

    <Button
        android:id="@+id/button1"
        android:layout_width="200dp"
        android:layout_height="70dp"
        android:text="CUSTOM 1"
        android:textSize="20sp"
        android:textColor="#ffff"
        android:layout_margin="10dp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="200dp"
        android:layout_height="70dp"
        android:text="CUSTOM 2"
        android:textSize="20sp"
        android:textColor="#ffff"
        android:layout_margin="10dp"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="200dp"
        android:layout_height="70dp"
        android:text="CUSTOM 3"
        android:textSize="20sp"
        android:textColor="#ffff"
        android:layout_margin="10dp"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="200dp"
        android:layout_height="70dp"
        android:text="CUSTOM 4"
        android:textSize="20sp"
        android:textColor="#ffff"
        android:layout_margin="10dp"/>


</LinearLayout>

Maka hasilnya pada preview yaitu :

Tambahkan Resource File Baru pada Drawable

Untuk meng custom button kita membutuhkan 4 file xml baru yang disimpan di folder drawable. Buat file berikut ini pada direktori drawable :

custom1.xml
custom2.xml
custom3.xml
custom4.xml

Caranya yaitu :

Klik kanan pada folder drawable lalu pilih New dan Klik Drawable Resource File

Isi file name dengan nama file di atas, contohnya ” custom1” lalu klik Ok. Maka file custom1.xml berhasil dibuat.

Buat 3 file yang lainnya juga sehingga pada drawable terdapat 4 file baru seperti gambar di bawah ini.

4 file baru telah dibuat di direktori drawable

Mari Kita Mulai Custom Button Android

Mengatur Background Color Button

Yang pertama kita akan menambahkan background color pada button custom 1, caranya yaitu :

Buka file custom1.xml yang ada pada direktori drawable, lalu tambahkan kode-kode di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#00CED1"/>

</shape>

Setelah itu tambahkan kode berikut

android:background="@drawable/custom1"

Pada widget button custom 1 yang ada di activity_main.xml, sehingga kode-kodenya menjadi seperti berikut

<Button
    android:id="@+id/button1"
    android:background="@drawable/custom1"
    android:layout_width="200dp"
    android:layout_height="70dp"
    android:text="CUSTOM 1"
    android:textSize="20sp"
    android:textColor="#ffff"
    android:layout_margin="10dp"/>

Maka hasilnya button custom 1 akan berubah menjadi seperti gambar di bawah

Bacground color button custom 1 sudah berhasil

Mengatur Shape Corner Button

Yang kedua kita akan membuat setiap sudut dari button melengkung. Caranya yaitu :

Tambahkan kode-kode di bawah ini pada file custom2.xml yang ada di drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#4169E1"/>

    <corners android:radius="15dp"/>

</shape>

Lalu tambahkan kode

android:background="@drawable/custom2"

Pada widget button custom 2 yang ada di activity_main.xml, sehingga menjadi seperti di bawah ini

<Button
    android:id="@+id/button2"
    android:background="@drawable/custom2"
    android:layout_width="200dp"
    android:layout_height="70dp"
    android:text="CUSTOM 2"
    android:textSize="20sp"
    android:textColor="#ffff"
    android:layout_margin="10dp"/>

Maka hasilnya

custom button android studio — Corner radius pada button custom 2

Mengatur Stroke Button

Selanjutnya kita akan custom menggunakan stroke, berikut caranya :

Buka file custom3.xml lalu tambahkan kode-kode xml di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="#F4A460" android:width="1dp"/>

    <corners android:radius="5dp"/>

</shape>

Tambahkan kode background color dan ubah warna teks pada widget button custom 3 yang ada di activity_main.xml

<Button
    android:id="@+id/button3"
    android:background="@drawable/custom3"
    android:layout_width="200dp"
    android:layout_height="70dp"
    android:text="CUSTOM 3"
    android:textSize="20sp"
    android:textColor="#F4A460"
    android:layout_margin="10dp"/>

Maka hasilnya :

Mengatur Gradient Color

Terakhir kita akan memberikan warna gradient pada button custom 4, caranya yaitu :

Buka file custom4.xml yang ada pada drawable, kemudian tambahkan kode-kode di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#4682B4"
        android:endColor="#FF6347"
        android:type="linear"/>

    <corners android:radius="20dp"/>

</shape>

Lalu tambahkan kode background color dari custom4.xml pada widget button custom 4 yang ada di activity_main.xml

<Button
    android:id="@+id/button4"
    android:background="@drawable/custom4"
    android:layout_width="200dp"
    android:layout_height="70dp"
    android:text="CUSTOM 4"
    android:textSize="20sp"
    android:textColor="#ffff"
    android:layout_margin="10dp"/>

Maka hasilnya

Penutup

Itulah tutorial meng custom button pada android studio. Tentunya akan lebih mudah jika kamu langsung mempraktekannya sendiri. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya.

Tutorial Custom Button pada Android Studio