如何在Android中为按钮设置样式？

Question

I have defined the below files in res folder.

styles_apptheme.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Generated with http://android-holo-colors.com -->
<resources xmlns:android="http://schemas.android.com/apk/res/android">

  <style name="ButtonAppTheme" parent="android:Widget.Holo.Light.Button">
      <item name="android:background">@drawable/apptheme_btn_default_holo_light</item>
  </style> 
</resources>

themes_apptheme.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Generated with http://android-holo-colors.com -->
<resources xmlns:android="http://schemas.android.com/apk/res/android">

  <style name="AppTheme" parent="@style/_AppTheme"/>

  <style name="_AppTheme" parent="Theme.AppCompat.Light">

    <item name="android:editTextBackground">@drawable/apptheme_edit_text_holo_light</item>

    <item name="android:buttonStyle">@style/ButtonAppTheme</item>

  </style>

</resources>

In my Layout.xml file, i have defined my button as below

<Button
        android:id="@+id/btnAddTitle"
        android:layout_below="@id/edEnterTitleValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_AddTitle"
        android:layout_margin="20dp"
/>

If i add the below line to the button view above,

android:background="@style/ButtonAppTheme"

Application crashes saying that drawable resource should be set for the background attribute.

So i created the below drawable file - abc.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false" android:state_enabled="true"
        android:drawable="@drawable/apptheme_btn_default_normal_holo_light" />
    <item android:state_window_focused="false" android:state_enabled="false"
        android:drawable="@drawable/apptheme_btn_default_disabled_holo_light" />
    <item android:state_pressed="true"
        android:drawable="@drawable/apptheme_btn_default_pressed_holo_light" />
    <item android:state_focused="true" android:state_enabled="true"
        android:drawable="@drawable/apptheme_btn_default_focused_holo_light" />
    <item android:state_enabled="true"
        android:drawable="@drawable/apptheme_btn_default_normal_holo_light" />
    <item android:state_focused="true"
        android:drawable="@drawable/apptheme_btn_default_disabled_focused_holo_light" />
    <item
         android:drawable="@drawable/apptheme_btn_default_disabled_holo_light" />
</selector>

If i set android:background="@drawable/abc" i dont see the style set in the button.

So please let me know how i can set the style for the button.

Thanks.

Answer 1

It would be rather simple if you do it this way.

First create a button_selector.xml in drawable folder.

<?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="5dp" />
     <stroke android:width="1dip" android:color="@color/green_temp" />
     <gradient android:angle="-90" android:startColor="@color/green_temp" android:endColor="@color/green_temp"  />            
 </shape>
</item>
<item android:state_focused="true">
 <shape android:shape="rectangle"  >
     <corners android:radius="5dp" />
     <stroke android:width="1dip" android:color="#971E05" />
     <solid android:color="#58857e"/>       
 </shape>
</item>  
<item >
<shape android:shape="rectangle"  >
     <corners android:radius="5dp" />
     <stroke android:width="1dip" android:color="@color/bright_green" />
     <gradient android:angle="-90" android:startColor="@color/green_temp" android:endColor="@color/button_green" />            
 </shape>
</item>
</selector>

Add these colors in colors.xml of values folder.

<!-- Green -->
<color name="green_temp">#23A96E</color>
<color name="green_dark">#159204</color>
<color name="bright_green">#02D8B0</color>
<color name="button_green">#10a54a</color>

Finally in your desired button of layout.xml put background from above selector.

<Button
    android:id="@+id/btnAddTitle"
    android:layout_below="@id/edEnterTitleValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/btn_AddTitle"
    android:background="@drawable/button_selector"
    android:layout_margin="20dp"
/>

Then its all done your button will be styled with color you want.

Answer 2

Android Button Maker is online tool to generate buttons code for Android Apps. Android API provide Drawable Resources where XML file defines geometric shape, including colors, border and gradients. These button is generating based on shape drawable XML code which load faster compare to normal png buttons. You can customize button properties in setting panel and get source code.

Check this link Button Maker

No need to crack brains...this tool make it simple

Answer 3

replace

android:background="@style/ButtonAppTheme"

with

style="@style/ButtonAppTheme"

and every thing is ok!

Answer 4

Try this out as alternative. create a drawable folder under res then create xml files and copypaste below code and try first then you customize as per your requirement.

button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">

<solid android:color="#00acc1"/>
<stroke android:width="2dp" android:color="#ffffff"/>
<corners android:radius="2dp"/> </shape>

button_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">

<solid android:color="#006064"/>
<stroke android:width="1dp" android:color="#ffffff"/>
<corners android:radius="2dp"/> </shape>

button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_focused="true" android:state_pressed="true" 
        android:drawable="@drawable/button_bg_pressed" /> 
<item android:state_focused="false" android:state_pressed="true" 
        android:drawable="@drawable/button_bg_pressed" /> 
<item android:drawable="@drawable/button_bg" /> </selector>

And now in your button xml set the background as button_selector.xml

<Button
    android:id="@+id/btnAddTitle"
    android:layout_below="@id/edEnterTitleValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/btn_AddTitle"
    android:background="@drawable/button_selector"
    android:layout_margin="20dp"/>

This will do the job for you. You can customize your entire button style by this way.

Answer 5

If you want to have the default animation of button by material design and change button color, try this.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="@dimen/padding_12"
    android:text="button text here"
    android:theme="@style/NavyBtn" />

in style.xml

<style name="NavyBtn" parent="Theme.AppCompat.Light">
    <item name="colorButtonNormal">#020e39</item>
    <item name="android:textColor">#FFFFFF</item>
</style>