Android Button Design

1,050 Views

Widget Tombol di Aplikasi Android memainkan peran yang sangat penting dalam interaksi pengguna. Ini mendorong pengguna untuk berinteraksi dengan aplikasi dan membawa lebih banyak pengalaman pengguna pada desain aplikasi. Mendesain Android Button cukup mudah dengan menggunakan kode xml dengan selector tertentu sehingga dengan hal ini akan desain button bisa menjadi lebih seragam hanya dengan mengubah kode XML.

Untuk membuat Button, seperti biasa kita akan membuat sebuah project simpan dengan nama Desain Button. Tempatkan Button seperti biasanya. Android Button Design yang nanti kita buat dengan cara membuat kode XML pada drawable/*.xml untuk mengubah design button sehingga lebih rapi

1. Android Button Basic Design

Contents

1 1. Android Button Basic Design
2 2. Android Button Round Design
3 3. Android Button Round Design and Transparant
4 4. Android Button Round Design and KeyPress

Untuk Button Basic Design mempunyai kode XML sebagai berikut

Copy Code


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="330dp"
    android:text="Button"
    android:textColor="@color/black"        
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Mempunyai tampilan basic seperti ini

Tampilan android button design diatas sesuai dengan namanya adalah basic dan tidak menarik tentunya dan membosankan!

2. Android Button Round Design

Untuk membuat android button round Design, kita tambahkan kode xml dengan cara klik kanan pada res -> Drawble -> New -> Drawable Resource File. Nanti muncul kotak dialog berikan saja nama (semua huruf kecil tanpa spasi atau diganti underscore) rounded_rectangle.xml. Isinya sebagai berikut

Copy Code


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
<solid android:color="@color/teal_200"/> <!-- this one is the color of the Rounded Button -->
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>

Kita membutuhkan selector bernama shape serta corner untuk membutuhkan rounded nya. Lalu kode diatas dijadikan resource android:background="@drawable/rounded_rectangle" pada Button Basic, kode lengkapnya sebagai berikut

Copy Code


<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="330dp"
        android:text="Button"
        android:textColor="@color/black"
        android:background="@drawable/rounded_rectangle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

Maka tampilannya menjadi lebih rounded dan berwarna tail

3. Android Button Round Design and Transparant

Terkadang menggunakan warna transparant mengikuti warna dibelakang menjadi lebih menarik dimata penggunaa. OK kita buat kode XML caranya seperti diatas, kita kasih nama rounded_rectangle2.xml kode nya sebagai berikut

Copy Code


<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="50dp" />
    <stroke android:width="3dp"
        android:color="@color/black"/>
    <gradient android:angle="-90"
        android:startColor="#00000000"
        android:endColor="#00000000"/>
</shape>

Teknik yang digunakan yaitu dengan selector gradient dari start dan end colornya berwarna putih, atau kalian mau ganti juga tidak masalah biar ada efek gradient nya. OK kita ganti android:background="@drawable/rounded_rectangle" menjadi android:background="@drawable/rounded_rectangle2"

4. Android Button Round Design and KeyPress

Yup kita akan mengubah warna sebelum dan sesudah di pencet, kodenya cukup panjang. Kita kasih nama rounded_rectangle3.xml

Copy Code


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="12dp" />
            <stroke android:width="1dp"
                android:color="#E91E63" />
            <gradient android:angle="-90"
                android:startColor="#E91E63"
                android:endColor="#F44336"  />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="12dip" />
            <stroke android:width="1dip"
                android:color="#F44336" />
            <solid android:color="@color/black"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="12dp" />
            <stroke android:width="5dp"
                android:color="#FF9800" />
            <gradient android:angle="-90"
                android:startColor="#FF9800"
                android:endColor="#FFC107" />
        </shape>
    </item>
</selector>

OK kita ganti android:background="@drawable/rounded_rectangle2" menjadi android:background="@drawable/rounded_rectangle3". Nanti ada efek warna yang berbeda ketika di klik