Create a custom background button and a custom shape button

In Android applications, the default button is rendered and managed by the system. The successful mobile applications we see have a cool appearance and user experience. Therefore, when developing products, we need to beautify the default buttons. In this article, I will discuss how to implement buttons and custom shape buttons based on my experience in application development.

First, let's look at the implementation effect:

Currently, buttons for custom backgrounds can be implemented in two ways: vector and bitmap.

 

 

1. How to draw a vector image

The method of drawing vector images is simple and suitable for scenarios with low button shape and pattern requirements. The procedure is as follows:

(A) use XML to define a rounded rectangle. The solid line of the peripheral contour and the gradient of the inner fill are displayed. The XML Code is as follows.

//bg_alibuybutton_default.xml  <?xml version="1.0" encoding="utf-8"?>  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     <item>        <shape android:shape="rectangle">            <solid android:color="#FFEC7600" />           <corners              android:topLeftRadius="5dip"              android:topRightRadius="5dip"              android:bottomLeftRadius="5dip"              android:bottomRightRadius="5dip" />        </shape>     </item>     <item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">       <shape>          <gradient               android:startColor="#FFEC7600" android:endColor="#FFFED69E"               android:type="linear" android:angle="90"              android:centerX="0.5" android:centerY="0.5" />          <corners              android:topLeftRadius="5dip"              android:topRightRadius="5dip"              android:bottomLeftRadius="5dip"              android:bottomRightRadius="5dip" />        </shape>     </item>    </layer-list>

It also defines bg_alibuybutton_pressed.xml and bg_alibuybutton_selected.xml. The content is the same, that is, the gradient color is different, used for the background change effect after the button is pressed.

(B) Define the effect change description file drawable/bg_alibuybutton.xml after the button is pressed. The Code is as follows.

<?xml version="1.0" encoding="UTF-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true"          android:drawable="@drawable/bg_alibuybutton_pressed" />      <item android:state_focused="true"          android:drawable="@drawable/bg_alibuybutton_selected" />      <item android: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"/>

In this way, the buttons of the custom background can be used, and The onclick method can be implemented to respond to the operation.

 

2. 9-patch image background

This method is relatively complex and cumbersome, but more and more complex style buttons can be created.

What is the 9-patch format?

9-patch format is a special PNG Image Format in Android, ending with "*** .9.png. Images in this format define the areas that can be scaled and stretched and text display areas. In this way, non-vector images can be stretched in Android development and remain beautiful. If a bitmap is used without 9-patch processing, the effect will be relentlessly stretched like the "normal image background button" in the first screenshot, affecting the effect. This technology is widely used in Android, and the default button background is implemented in a similar way. Let's take a look at the official Google description:

Compared with a PNG image, this format adds a black line of 1px to the top, bottom, and left. Nine grids are separated from the black lines on the left. One grid (see the strechable area) is declared to be stretched. The paddingbox area defined by the right and the next two black lines is the area where text can be entered on the image when the image is used as the background. Each black line can be discontinuous, so that you can define many automatically stretched specifications. The android SDK provides the setting tool. The startup command is located at $ android_sdk/tools/draw9patch. bat. It is very convenient to set the 9-patch format for the original PNG, for example.

 

On the right side of the draw9patch tool, you can see all directions after stretching. All you need to do is to apply a black line to the pixels with a 1 px width circle on the outermost side of the graph.

Note: When draw9patch. bat is run for the first time, an error occurs in sdk2.2: Java. Lang. noclassdeffounderror: ORG/jdesktop/swingworker. You need to download the swing-worker-1.1.jar, put in the $ android_sdk/tools/lib path, run successfully.

The steps for implementing this method are as follows.

(A) begin.

(B) Compile the image description file bg_9patchbutton.xml.

// in bg_9patchbutton.xml  <?xml version="1.0" encoding="UTF-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true"          android:drawable="@drawable/bg_btn_2" />      <item android:state_focused="true"          android:drawable="@drawable/bg_btn_2" />      <item android:drawable="@drawable/bg_btn" />  </selector>  

(C) Add the button and imagebutton button controls in the layout/Main. XML interface definition file. The background attributes can be used for buttons and imagebutton.

<Button Android: layout_width = "120dip" Android: layout_height = "40dip" Android: text = "9-patch image background button" Android: background = "@ drawable/bg_9patchbutton"/> <button Android: layout_width = "200dip" Android: layout_height = "40dip" Android: text = "9-patch image background button" Android: background = "@ drawable/bg_9patchbutton"/> <button Android: layout_width = "120dip" Android: layout_height = "80dip" Android: text = "9-patch image background button" Android: background = "@ drawable/bg_9patchbutton"/> <imagebutton Android: layout_width = "120dip" Android: layout_height = "40dip" Android: src = "@ drawable/bg_9patchbutton" Android: scaletype = "fitxy" Android: Background = "@ Android: color/transparent"/>

The above two buttons are based on standard rectangular buttons. In some applications, we can see beautiful custom shape shaped buttons. How can this be achieved? After some research and practice, we found a convenient method, that is, using imagebutton and 9-patch can achieve beautiful automatic extension.

 

3. Implementation of buttons for custom shapes, colors, and drawings

The procedure is as follows.

(A) Design an image with a custom shape and style background, for example.

(B) do not click or press the status to form a set of images, such.

Forward.png

Forward2.png

(C) Use the description file drawable/ib_forward.xml to create and compile images in different States.

// ib_forward.xml  <?xml version="1.0" encoding="UTF-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true"          android:drawable="@drawable/forward2" />      <item android:state_focused="true"          android:drawable="@drawable/forward2" />      <item android:drawable="@drawable/forward" />  </selector>  

(D) add the definition of the imagebutton button control to 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" />  

From: http://blog.csdn.net/xjanker2/article/details/6222690