Badoy Studio

style button android studio

Cara Memberikan Style pada Button di Android Studio

by

Bagaimana cara memberikan style button pada aplikasi di android studio ? Membuat button memang mudah pada android studio.  Ada beberapa cara untuk memberikan sentuhan efek pada button salah satunya yaitu  dengan Material Design.

Cara Membuat Style Button Android Studio dengan Mudah dan Cepat

Oke langsung saja berikut ini adalah tutorial memberikan style pada sebuah button atau tombol di androids tudio.

1. Buat Project Baru di Android Studio dengan nama Button

Buka android studio lalu buat project baru dengan nama project ” button ” atau sesuaikan dengan keinginanmu.

2. Pastikan library Material Design sudah di sync now

button style android studio

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>

Baca Juga : Tutorial Lengkap Material Design Android Studio 

  • 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

Penjelasan 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 )

 

Penutup

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