Android Button Design

By | February 19, 2022
Print Friendly, PDF & Email
538 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

Untuk Button Basic Design mempunyai kode XML sebagai berikut

<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

<?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


<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

<?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

<?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

 

See also  Komunikasi dan Pertukaran Data antar Intent

Leave a Reply

Your email address will not be published.




Enter Captcha Here :