Skip to main content
buttonmaterial

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.

Guntoro

Freelancer web and mobile developement, blogger, and teacher.