Androidgui30: Custom button

Buttons are one of the most commonly used widgets in Android interface programming. In many cases, buttons provided by Android by default cannot meet the needs of the application interface. In this case, you need to customize the buttons, such as changing the button color.

The following is an example to illustrate the general process of customizing a button.

1. Create an android project in eclipse

The project name is customizebutton, and then click Next,

Select android2.1 and click Next,

Set the project package name to com. Pat. customizebutton. Keep the other items unchanged, and click Finish.

2. Add three buttons in Main. XML to make them as follows:

<?xml version="1.0"encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >          <Button             android:id="@+id/samllbutton"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Small"         />                 <Button             android:id="@+id/mediumbutton"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="MediumMediumMedium"         />                 <Button             android:id="@+id/largebutton"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="LargeLargeLargeLargeLargeLargeLargeLarge"         /></LinearLayout>

3. Run the application. The result is as follows:

By now, everything is good.

 

Now, if we want to change the background color of the three buttons to yellow, what should we do? Naturally, we will think of modifying the button attributes in Main. xml or in customizebuttonactivity. java. Here, we may wish to change the button attributes in customizebuttonactivity. java. The code is roughly as follows:

public class CustomizeButtonActivity extends Activity{         private Button smallButton;         private Button mediumButton;         private Button largeButton;            @Override    public void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);               smallButton = (Button)findViewById(R.id.samllbutton);        mediumButton = (Button)findViewById(R.id.mediumbutton);        largeButton = (Button)findViewById(R.id.largebutton);               smallButton.setBackgroundColor(Color.YELLOW);        mediumButton.setBackgroundColor(Color.YELLOW);        largeButton.setBackgroundColor(Color.YELLOW);    }}

Run the program and get the following results:

Obviously, this is not the result we want:

1) all the buttons are crowded together.

2) The four rounded corners on the original button are changed to square corners (assuming you need a rounded corner instead of a square corner)

 

Of course, in actual programming, it is not just as simple as changing the button color. You can have a background image as the button background. In this case, we can use the setbackgroundresource method in the button class. ).

In this case, we first copy the corresponding image (normal.png) to the project's drawable-mdpi folder, and then modify customizebuttonactivity. java. This time we use the setbackgroundresource method in the button class:

public class CustomizeButtonActivity extends Activity{         private Button smallButton;         private Button mediumButton;         private Button largeButton;            @Override    public void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);               smallButton = (Button)findViewById(R.id.samllbutton);        mediumButton = (Button)findViewById(R.id.mediumbutton);        largeButton = (Button)findViewById(R.id.largebutton);       //       smallButton.setBackgroundColor(Color.YELLOW);//       mediumButton.setBackgroundColor(Color.YELLOW);//       largeButton.setBackgroundColor(Color.YELLOW);               smallButton.setBackgroundResource(R.drawable.normal);        mediumButton.setBackgroundResource(R.drawable.normal);        largeButton.setBackgroundResource(R.drawable.normal);    }}

Running result:

Except for the small button, the other two buttons are unbearable. What should we do?

Resolution: Convert normal.png to a PNG of the 9-patch type. So what 9-patch type PNG? Patch means "patch" in English. For 9-patch, the official Android documentation says, "The ninepatch class permitsdrawing a bitmap in nine sections. The four corners are unscaled; the four edges are scaled in
One axis, and the middle is scaled in both axes. "means that a bitmap is divided into nine parts. The four corners are not scaled, the four sides can be scaled along a certain axis, and the middle part can be scaled along two axes. But how can we achieve this? The method is to use the draw9patch tool to program a PNG of the 9-patch type.

In fact, 9-patch is also a standard PNG image, but only a few black lines with a width of 1 pixel are added to the image, we can usually use the android SDK to install draw9patch in the tools subdirectory under the directory. the bat tool can easily convert a normal PNG to a PNG of the 9-patch type. Now we can use the tool normal.png to change it to 9-patch.

The above is what the tool looks like after it is started. Drag normal.png to the file.

The left side is the editing area, and the right side is the shape preview. Now we will draw several black lines with one pixel width on the left to make them as follows:

Save it as nice, And the suffix of the file name is .9.png. Also, the name of the file is nice.9.png.

 

Select Show patches. You can see:

Obviously, the entire image is divided into nine parts, which is the origin of the 9-patch name.

Note that the effects of the four black lines are different. The black lines above specify the horizontal scaling range, the black line on the left specifies a range that can be scaled in the vertical direction. It is not difficult to see that area 2 and Area 8 will not change when zooming in the vertical direction; when area 4 and Area 6 are scaled horizontally, they do not change. Regions 1, 3, 7, and 9 do not change when they are scaled vertically or horizontally.

The black line on the right specifies the range of content that can be included in the vertical direction (such as text on the button), and the bottom black line specifies the range of content that can be included in the horizontal direction.

Therefore, the top two black lines on the left specify the zoom range and the bottom two black lines on the right specify the range of content to be displayed. Obviously, the length of the left and right black lines and the upper and lower black lines are the same, so we should not identify the differences between them. We will discuss this issue again. Next, let's take a look at the effect of using nice.9.pngon behalf of normal.png. Here, we copy nice.9.png to the drawable-mdpi folder, and then modify customizebuttonactivity. Java to make it as follows:

public class CustomizeButtonActivity extends Activity{         private Button smallButton;         private Button mediumButton;         private Button largeButton;            @Override    public void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);               smallButton = (Button)findViewById(R.id.samllbutton);        mediumButton = (Button)findViewById(R.id.mediumbutton);        largeButton = (Button)findViewById(R.id.largebutton);       ////       smallButton.setBackgroundColor(Color.YELLOW);////       mediumButton.setBackgroundColor(Color.YELLOW);////        largeButton.setBackgroundColor(Color.YELLOW);//       //       smallButton.setBackgroundResource(R.drawable.normal);//       mediumButton.setBackgroundResource(R.drawable.normal);//       largeButton.setBackgroundResource(R.drawable.normal);                smallButton.setBackgroundResource(R.drawable.nice);        mediumButton.setBackgroundResource(R.drawable.nice);        largeButton.setBackgroundResource(R.drawable.nice);    }}

The running result is as follows:

Everything is normal this time.

Now let's look at some special cases. Hypothetical example (normalong.png)

Use the draw9patch tool to edit it as follows:

We can see two black lines on the left that specify the area where the image can be scaled vertically. The top line segment specifies the area where the image can be scaled horizontally, the area where the prototype icon is sitting is clearly a non-zoom area. Therefore, no matter how the other part of the image changes, this part remains unchanged. In this way, the image is actually divided into 12 blocks, instead of the nine blocks mentioned above. It has two scalable areas (the pink part, the two parts can be automatically scaled along the water or vertical direction as needed.) For example:

The Shadow part in is the area where the content can be displayed (such as text ):

From the above discussion, we can also see the problem mentioned above, that is, the length of four 1 pixel black lines can be different from each other.

OK ,copy the image into nicelong.9.png and copy it to the drawable-mdpi folder. Then modify customizebuttonactivity. Java to make it as follows:

public class CustomizeButtonActivity extends Activity{         private Button smallButton;         private Button mediumButton;         private Button largeButton;            @Override    public void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);               smallButton = (Button)findViewById(R.id.samllbutton);        mediumButton = (Button)findViewById(R.id.mediumbutton);        largeButton = (Button)findViewById(R.id.largebutton);       //////       smallButton.setBackgroundColor(Color.YELLOW);//////       mediumButton.setBackgroundColor(Color.YELLOW);//////        largeButton.setBackgroundColor(Color.YELLOW);////       ////       smallButton.setBackgroundResource(R.drawable.normal);////       mediumButton.setBackgroundResource(R.drawable.normal);////       largeButton.setBackgroundResource(R.drawable.normal);//       //       smallButton.setBackgroundResource(R.drawable.nice);//       mediumButton.setBackgroundResource(R.drawable.nice);//       largeButton.setBackgroundResource(R.drawable.nice);               smallButton.setBackgroundResource(R.drawable.nicelong);        mediumButton.setBackgroundResource(R.drawable.nicelong);        largeButton.setBackgroundResource(R.drawable.nicelong);    }}

The running result is as follows:

Everything works normally, and the Circular Section (not very beautiful, but this kind of work can actually be handled by the artist's professional) is not scaled with the scaling of the button.

 

References:

1. Android SDK documentation

2. http://www.anddev.org/tutorial_buttons_with_niceley_stretched_background-t4369.html

3. For details about the three buttons, refer:

Androidgui04: commonly used techniques for button (basicbutton, imagebutton, check box, toggle button, radio button)