[펌] Custom Android Button Style and Theme  안드로이드 / Programing...

2011/04/26 14:11

복사http://blog.naver.com/khch2489/30107398483

In this tutorial, we’ll see how it’s possible to create a custom button style for an Android application by using the Android styling API. First of all we need to define the new look for our custom button style. We would use three different NinePatch drawables.

A custom black nine patch drawable background for enabled, not pressed buttons :

black button background

A custom orange nine patch drawable background for enabled, pressed buttons :

Orange button background

A custom red nine patch drawable background for disabled buttons :

Red button background

All of these three custom drawable must be placed in the /res/drawables directory of our Android application. Now we must declare wich background should be used for each possible state of our custom button (pressed, disabled, focused, …). This is done by declaring a selector in a custom XML file :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
 android:state_enabled="false"
        android:drawable="@drawable/btn_red" />
    <item 
     android:state_pressed="true" 
     android:state_enabled="true"
        android:drawable="@drawable/btn_orange" />
    <item 
     android:state_focused="true" 
     android:state_enabled="true"
        android:drawable="@drawable/btn_orange" />
    <item 
     android:state_enabled="true"
        android:drawable="@drawable/btn_black" />
</selector>

Each item in the selector associates a drawable to a button state. Items must be declared in a specific order. The android selector draws the first selector item that match the current button state, no matter if another matching item is defined in the selector declaration. For exemple, the selector bellow will never draw the orange background for a disabled and focused button as the first item always applies to disabled button :

<item 
    android:state_enabled="false"
    android:drawable="@drawable/btn_red" />
<item 
    android:state_pressed="true" 
    android:state_enabled="false"
    android:drawable="@drawable/btn_orange" />

In order to draw orange background for disabled and focused buttons, and a red background for disabled buttons that are not focused we should have invert the items declaration order :

<item 
    android:state_pressed="true" 
    android:state_enabled="false"
    android:drawable="@drawable/btn_orange" />
<item 
    android:state_enabled="false"
    android:drawable="@drawable/btn_red" />

Let’s put our selector declaration in a file called btn_custom.xml in the /res/drawables directory of our Android application. Now, it’s time to define a custom button style that will apply to every buttons in the application. This can be achieve with both the /res/values/styles.xml file and the /res/values/themes.xml file. In the first one we’ll customize our button appearence (selector, text size, text color, shadow, …).

<resources>
    <style name="Button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/btn_custom</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

Then, we must set this style to be used by the Android button Widget. In the /res/values/themes.xml file :

<resources>
    <style name="CustomButton" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/Button</item>
    </style>
</resources>

The theme can be applied to the whole application by setting the android:theme attribute in the<application> tag of the AndroidManifest.xml file.

<application android:icon="@drawable/icon" 
    android:label="Custom button"
    android:theme="@style/CustomButton">

Now, that’s what your buttons looks like :

Android custom button

Android custom button

You can browse the full source code of the Eclipse project here :
SampleCustomButton

 

 

출처 : http://blog.androgames.net/category/android-tutorials/page/7/

+ Recent posts