Cara Menambahkan Corner Radius Pada Button Untuk Membuat Rounded di Android Studio

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial cara membuat button menjadi rounded di android studio dengan cara yang sangat mudah.

Banyaknya aplikasi dalam OS Android membuat developer ingin menjadi yang berbeda dari aplikasi lainnya. Salah satu membedakan aplikasi kita dengan aplikasi lainnya adalah atribut yang digunakan dari tiap-tiap widget yang telah kita tambahkan pada aplikasi kita. Ada banyak komponen yang bisa kita ubah sesuai dengan keinginan kita. Misalnya tombol pada aplikasi. Kita bisa membuat secantik mungkin agar developer aplikasi lain tidak mencontoh atau meniru hasil desain kita.

Nah, pada tutorial ini kita akan belajar cara membuat desain button menjadi rounded atau bulat menggunakan cara yang mudah di android studio.

- Advertisement -

Tutorial Cara Membuat Button Rounded di Android Studio

Buka projek android studio kalian.

XML Colors File

Pada tutorial ini, saya ingin membuat 4 button yang memiliki warna merah, kuning, hijau dan biru. Untuk membuat warna tersebut bisa dipakai pada projek android studio kita, kita harus menambahkan terlebih dahulu kode warna tersebut kedalam file colors.xml dalam folder values. Berikut ini adalah kode lengkap untuk file colors.xml

app/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="blue">#0000FF</color>
    <color name="darkBlue">#00008B</color>

    <color name="green">#008000</color>
    <color name="darkGreen">#006400</color>

    <color name="red">#FF0000</color>
    <color name="darkRed">#8B0000</color>

    <color name="yellow">#FFFF00</color>
    <color name="darkYellow">#CCCC00</color>
</resources>

XML Drawable File

Buatlah file xml drawable baru dengan cara klik kanan pada folder Drawable lalu pilih New>Drawable Resource file. Simpan file xml drawable tersebut dengan nama background_blue. Berikut ini adalah kode lengkap untuk file background_blue.xml

app/res/drawable/background_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <layer-list>
            <item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
                <shape android:shape="rectangle">
                    <corners android:radius="20dp" />
                    <solid android:color="@color/darkBlue" />
                    <padding android:padding="8dp" />
                    <size android:width="150dp" android:height="40dp" />
                </shape>
            </item>
        </layer-list>

    </item>
    <item android:state_focused="true">

        <layer-list>
            <item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
                <shape android:shape="rectangle">
                    <corners android:radius="20dp" />
                    <solid android:color="@color/darkBlue" />
                    <padding android:padding="8dp" />
                    <size android:width="150dp" android:height="40dp" />
                </shape>
            </item>
        </layer-list>

    </item>

    <item>

        <layer-list>
            <item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
                <shape android:shape="rectangle">
                    <corners android:radius="20dp" />
                    <solid android:color="@color/blue" />
                    <padding android:padding="8dp" />
                    <size android:width="150dp" android:height="40dp" />
                </shape>
            </item>
        </layer-list>

    </item>
</selector>

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Buatlah 4 button di dalam layout tersebut. Untuk agar terlihat rapi, gunakan layout Linear yang orientasi Vertical. Atau kalian bisa menggukan kode dibawah ini.

app/res/layout/activity_main.xml

<?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:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />

        <View
            android:layout_width="16dp"
            android:layout_height="16dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />
    </LinearLayout>

    <View
        android:layout_width="16dp"
        android:layout_height="16dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />

        <View
            android:layout_width="16dp"
            android:layout_height="16dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />
    </LinearLayout>
</LinearLayout>

Tampilan desain dari kode diatas akan terlihat seperti pada gambar dibawah ini.

Cara Membuat Button Rounded Di Android Studio

Sekarang tambahkan atribut background di salah satu button yang kalian buat. Panggil file xml drawable kalian buat tadi pada atribut background seperti pada kode dibawah ini

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/background_blue"
            android:textColor="@android:color/white"
            android:text="@string/app_name" />

Tampilan desain dari kode diatas akan terlihat seperti pada gambar dibawah ini.

Cara Membuat Button Rounded Di Android Studio

Run ‘app’

Sekarang jalankan projek android studio kalian yang telah kalian desain dengan 3 button lainnya menggunakan 3 warna yang belum digunakan yang ada pada file colors.xml. Maka hasilnya akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat button menjadi bulat atau rounded di android studio. Ketika kalian mengklik tombol tersebut, maka warna dari tombol tersebut menjadi agak sedikit gelap dari warna tersebut.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.