Cara Membuat Custom Button di Android

Cara Membuat Custom Button di Android

lebakcyber.net – Pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara membuat custom button di Android studio agar button yang kita buat pada saat membuat aplikasi jadi terlihat lebih indah dan tidak seperti button android bawaannya.

Disini kita akan coba membuat custom button yang agak sedikit membulat di setiap sisinya, jadi langkah pertama silahkan kalian buka dulu Android Studionya ya.

Selanjutnya buka file xml dimana kalian ingin membuat custom button di Android, pada contoh kali ini saya menggunakan file xml dengan nama activity_main.xml lalu tambahkan sebuah code di xml tersebut dengan perintah seperti dibawah ini :

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/custom_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lebak Cyber"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Nanti biasanya tampilan dari perintah pembuatan button diatas akan tampak seperti pada gambar dibawah ini :

Oke sekarang kita coba untuk merubah button tersebut dengan membuat sebuah file xml baru di folder drawable. Caranya klik kanan folder drawable – new – Drawable resource file. Nantinya akan tampil windows seperti pada gambar dibawah ini, lalu pada bagian file name isikan custom_button, dan selanjutnya klik tombol OK.

Selanjutnya masukan perintah berikut ini didalam file custom_button.xml yang sudah kita buat tersebut :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:radius="40dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp"/>
    <size
        android:height="55dp"
        android:width="150dp"/>
    <solid
        android:color="#5053f7"/>
</shape>

Sekarang kita tinggal tambahkan attribut android:background di perintah pembuatan button yang sebelumnya kita buat lalu isi dengan “@drawable/custom_button” seperti pada perintah dibawah ini :

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/custom_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lebak Cyber"
        android:layout_centerHorizontal="true"
        android:background="@drawable/custom_button"/>

</RelativeLayout>

Sekarang coba jalankan lagi aplikasinya melalui emulator, nanti hasilnya akan seperti pada gambar dibawah ini :

Oke jadi seperti itulah bagaimana cara membuat custom button di Android Studio, semoga tutorial yang sangat sederhana ini bisa bermanfaat bagi kalian yang sedang mempelajari bagaimana cara membuat aplikasi android. Sampai bertemu di tutorial selanjutnya ya.