Create Custom Background button button, custom shape button for all tips

In Android development apps, the default button is rendered and managed by the system size. And the successful mobile apps we've seen have a cool look and feel. Therefore, when we develop the product, we need to beautify the default button. In this article, the author combined with the experience in application development, to explore the custom background of the button, custom Shape button implementation method.

First look at the implementation effect:

Buttons for customizing backgrounds are currently implemented in 2 ways, vectors and bitmaps.

1. How vector graphics are drawn

Vector graphics are easy to draw and are suitable for applications where button shapes and patterns are not required. The steps are as follows:

(a) Use XML to define a rounded rectangle, a solid outer contour line, an inner fill gradient, and the XML code below.

//bg_alibuybutton_default.xml<?XML version= "1.0" encoding= "Utf-8"?><layer-listxmlns:android= "Http://schemas.android.com/apk/res/android">   <Item>         <ShapeAndroid:shape= "Rectangle">          <SolidAndroid:color= "#FFEC7600" />         <CornersAndroid:topleftradius= "5dip"Android:toprightradius= "5dip"Android:bottomleftradius= "5dip"Android:bottomrightradius= "5dip" />      </Shape>   </Item>   <ItemAndroid:top= "1px"Android:bottom= "1px"Android:left= "1px"Android:right= "1px">     <Shape>        <GradientAndroid:startcolor= "#FFEC7600"Android:endcolor= "#FFFED69E"Android:type= "Linear"Android:angle= "All"Android:centerx= "0.5"Android:centery= "0.5" />        <CornersAndroid:topleftradius= "5dip"Android:toprightradius= "5dip"Android:bottomleftradius= "5dip"Android:bottomrightradius= "5dip" />      </Shape>   </Item>  </layer-list>

The same definition of bg_alibuybutton_pressed.xml and bg_alibuybutton_selected.xml, the same content, is the gradient of different colors, for the button press the background change effect.

(b) Define the effect of the button press after the change description file Drawable/bg_alibuybutton.xml, the code is as follows.

<?XML version= "1.0" encoding= "UTF-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_pressed= "true"android:drawable= "@drawable/bg_alibuybutton_pressed" />    <Itemandroid:state_focused= "true"android:drawable= "@drawable/bg_alibuybutton_selected" />    <Itemandroid:drawable= "@drawable/bg_alibuybutton_default" /></selector>

(c) Define a button control in the interface definition file you need, such as layout/main.xml.

    < Button         Android:layout_width = "120dip"         android:layout_height= "40dip"        android:text= "Vector background button"         android:background= "@drawable/bg_alibuybutton"/>

This way, the button for customizing the background can be used, and you can respond to the action after the OnClick method is implemented.

2.9-patch Picture Background mode

This method is relatively complex and cumbersome, but can produce more and more complex style button patterns.

What is the 9-patch format?

The 9-patch format, which is a PNG image format unique to Android, ends with "***.9.png". Images of this format define areas of stretch stretching and text display areas so that non-vector images can be stretched in Android development and remain aesthetically pleasing. If the bitmap is used without 9-patch processing, the effect will be the same as the "Normal picture background button" in the first picture, which is ruthlessly stretched, affecting the effect. This technique is used extensively in Android, and the default button background is implemented in a similar way. Let's take a look at Google's official description:

This format is relative to the general PNG picture, the more up and down around a 1px black line. The left and upper black lines are separated by 9 squares, and one of the squares (see strechable area) is declared to be stretched. The Paddingbox area defined by the right and bottom two black lines is the area where you can fill in the text on the picture as the background. Each black line can be discontinuous, so you can define a lot of automatic stretching specifications. The Setup tool is available in the Android SDK, and the launch command is located at: $ANDROID _sdk/tools/draw9patch.bat, which is very handy for setting the 9-patch format for raw PNG, such as.

On the right side of the Draw9patch tool, you can see that the sides are stretched, and all you have to do is apply black lines to the 1px wide pixels on the outer edge of the diagram.

Note that on the first run of Draw9patch.bat, the sdk2.2 version will have an error: Java.lang.noclassdeffounderror:org/jdesktop/swingworker/swingworker. Need to download Swing-worker-1.1.jar, put into $android_sdk/tools/lib path, run successfully.

The steps to implement this method are as follows.

(a) After using Draw9patch.bat to finish the picture, get two button backgrounds, respectively, in normal and pressed state, named Bg_btn.9.png and Bg_btn_2.9.png.

(b) Preparation of the picture using the description file Bg_9patchbutton.xml.

//In Bg_9patchbutton.xml<?XML version= "1.0" encoding= "UTF-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_pressed= "true"android:drawable= "@drawable/bg_btn_2" />    <Itemandroid:state_focused= "true"android:drawable= "@drawable/bg_btn_2" />    <Itemandroid:drawable= "@drawable/bg_btn" /></selector>

(c) Add the definition of the button, ImageButton buttons control in the interface definition file layout/main.xml. Button, ImageButton can use the Background property.

    <ButtonAndroid:layout_width= "120dip"Android:layout_height= "40dip"Android:text= "9-patch picture background button"Android:background= "@drawable/bg_9patchbutton" />    <ButtonAndroid:layout_width= "200dip"Android:layout_height= "40dip"Android:text= "9-patch picture background button"Android:background= "@drawable/bg_9patchbutton" />    <ButtonAndroid:layout_width= "120dip"Android:layout_height= "80dip"Android:text= "9-patch picture background button"Android:background= "@drawable/bg_9patchbutton" />    <ImageButtonAndroid:layout_width= "120dip"Android:layout_height= "40dip"android:src= "@drawable/bg_9patchbutton"Android:scaletype= "Fitxy"Android:background= "@android: Color/transparent" />

The above 2 kinds of implementation of the beautification of the buttons are standard rectangular button-based. In some applications we can see the beautiful custom shape of the shaped button, how this is achieved? After some research and practice, find a convenient method, that is, the use of ImageButton plus 9-patch can achieve beautiful automatic extension effect.

3. Customize the implementation of buttons for shapes, colors, and patterns

The steps are as follows.

(a) design a picture of a custom shape-style background, such as.

(b) Do not click and press the status of each one to form a set of pictures, such as.

Forward.png Forward2.png

(c) Create and write a picture with a different state of the button description file Drawable/ib_forward.xml

//Ib_forward.xml<?XML version= "1.0" encoding= "UTF-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_pressed= "true"android:drawable= "@drawable/forward2" />    <Itemandroid:state_focused= "true"android:drawable= "@drawable/forward2" />    <Itemandroid:drawable= "@drawable/forward" /></selector>

(d) Add the definition of the ImageButton button control in the interface definition file layout/main.xml.

//In Layout/main.xml     < ImageButton         Android:layout_width = "80dip"         android:layout_height= "40dip"        android:src= "@drawable/ib_forword "        android:scaletype=" Fitxy "        android:background=" @android : color/transparent "/>

Copyright Http://blog.csdn.net/xjanker2/archive/2011/03/04/6222690.aspx All

Create a Custom Background button button, custom shape button for the full guide (GO)