Skip to main content

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 !

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

Tambahkan 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 :

custom button android
Preview widget button

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
Menambahkan resource file pada drawable
  • Isi file name dengan nama file di atas, contohnya ” custom1” lalu klik Ok. Maka file custom1.xml berhasil dibuat.
Membuat file custom1.xml
  • 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

Mulai Custom Button Android

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

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

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 :
custom button android studio
Button custom 3 sudah di custom

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
custom button android studio
Button custom 4 sudah di custom

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.

Guntoro

Freelancer web and mobile developement, blogger, and teacher.