Skip to main content

Belajar Material Design 1 : Memberikan Style pada Button

Membuat button memang mudah pada android studio.  Ada beberapa cara untuk memberikan sentuhan efek pada button salah satunya yaitu  dengan Material Design. Langsung saja kita praktekan :

1. Buat Project Baru dengan nama Button.

2. Pastikan library Material Design sudah di sync

3. Tambahkan warna untuk button

Tambahkan 2 warna untuk button pada color.xml yaitu warna hijau dan orange (atau disesuaikan ).

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="orange">#FFA500 </color>
    <color name="green">#00FF00</color>
</resources>

 

Button Style 1 :

  • Pada style.xml tambahkan atau kostumisasi tema seperti berikut :
<style name="buttonstyle1" parent="Theme.AppCompat.Light">
    <item name="colorControlHighlight">@color/orange</item>
    <item name="colorButtonNormal">@color/green</item>
</style>
  • Pada activity_main.xml tambahkan script button dan sesuaikan dengan tema yang tadi dibuat
<Button
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:text="Button 1"
    android:textSize="30sp"
    android:theme="@style/buttonstyle1"
    android:id="@+id/button1"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

Maka hasilnya sebagai berikut :

button 1

Button no style

button 1
style akan muncul ketika ditekan

 

Button Style 2 : Flat Button

  • Pada activity_main.xml tambahkan script button dan sesuaikan dengan tema yang tadi dibuat
<Button
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:text="Button 2"
    android:textSize="30sp"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_below="@+id/button1"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="62dp"
    android:id="@+id/button" />

Maka hasilnya sebagai berikut :

button 2
Button no style
buton 2
style button muncul ketika ditekan

 

Button Style 3 :

  • Pada style.xml tambahkan atau kostumisasi tema seperti berikut :
<style name="buttonstyle3" parent="Theme.AppCompat.Light">
    <item name="colorControlHighlight">@color/orange</item>
    <item name="colorButtonNormal">@color/green</item>
</style>

 

  • Pada activity_main.xml tambahkan script button dan sesuaikan dengan tema yang tadi dibuat
<Button
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:text="Button 3"
    android:textSize="30sp"
    android:theme="@style/buttonstyle3"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_marginBottom="36dp"
    android:id="@+id/button2"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

 

Maka hasilnya sebagai berikut :

 

button 3
button no style
button 3
button style muncul ketika di tekan

Atau script lengkapnya  yaitu :

  • style.xml 

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="buttonstyle1" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">@color/orange</item>
        <item name="colorButtonNormal">@color/green</item>
    </style>


    <style name="buttonstyle3" parent="Theme.AppCompat.Light">
        <item name="colorControlHighlight">@color/orange</item>
        <item name="colorButtonNormal">@color/green</item>

    </style>

</resources>

 

  • activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="badoystudio.com.button.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Button 1"
        android:textSize="30sp"
        android:theme="@style/buttonstyle1"
        android:id="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Button 2"
        android:textSize="30sp"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_below="@+id/button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="62dp"
        android:id="@+id/button" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Button 3"
        android:textSize="30sp"
        android:theme="@style/buttonstyle3"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_marginBottom="36dp"
        android:id="@+id/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

full button

Dari style.xml kita menemukan :

<item name=”colorControlHighlight”>@color/orange</item>

(digunakan untuk memberikan efek warna orange)

<item name=”colorButtonNormal”>@color/green</item>

(digunakan untuk button normal )

Itulah tutorial button menggunakan Material Design. So tunggu apalagi langsung coba ke aplikasi yang akan nanti kamu buat jika diaplikasi kamu menggunakan button.

Tulisan Menarik Lainnya :

Suka belajar dan mengajar teknologi komputer khususnya mobile development android