Custom Android imagebutton with images and text

Preface to custom Android buttons with images

Now, the buttons on mobile devices are designed with big icons and small text. I hope that users can see what the buttons are for as soon as they see them, but they need necessary text prompts, the most common one is the number search button. The above is a large magnifier icon, and the following two words -- search.

Bill is also working on buttons with this effect recently. The process is always tortuous, but the results are always good ~ Now, Bill shares his practices with you, hoping to help friends who are not yet familiar with it.

Let's take a look at the twists and turns of Bill. Maybe there is your shadow in it:

At first, I thought it would be better to simply use the android imagebutton control. imagebutton can only display images and cannot add text to them.

So I thought of using the button directly, but the text of the button is displayed inside the image, and it cannot meet my needs. Give up.

There is always a way for a lazy person to be lazy. I can directly put the p-Good picture into imagebutton. This method is very simple and easy to use. However, what should we do once we need to change the text, or I want to display the text on the top of the image instead of the bottom? Although this method is simple, it lacks variability. Give up.

This is the so-called "one button, three folds ~

Is there a way to achieve both the button effect and the Custom button display?

The answer is yes. Next, Bill will explain the button creation process step by step.

 

Ideas

First, let's take a look at the implementation of this button. There is a way of thinking called "out of box", that is, to encourage everyone to jump out of a fixed mindset to seek new breakthroughs. Before jumping out of a box, we must first know what the box is.

Here, the box is "button ". We have been thinking about how to implement this "button", how to make the "button" display the image, and then show a row of words under the image. We are entangled in the box "button.

But in fact, when we find that the so-called "button" is actually a view, everything becomes simple.

It is just a view that allows you to click, set listeners, and display text or images. Then we will jump out of the box set for us by Android, and re-create a view with the features and appearances we need. Isn't that OK?

After analysis, the above button effect is actually a layout, the simplest vertical linear layout, the upper part is an imageview, and the lower part is a textview, click and set the listener for this layout.

First, we need to write our own imagebutton class, then write the layout for our custom button in the main layout file, and finally call our custom imagebutton in the activity.

Then we will implement this simple linearlayout together.

 

Encode your own imagebutton

Before writing our own imagebutton, if you are not sure how to dynamically load sub-la s in a static XML layout file, read the following blog post (this article is concise, I have already written it clearly, so bill will not repeat it)

 

Http://blog.csdn.net/lzx_bupt/article/details/5600187

 

First, we compile a myimagebutton class that inherits from linearlayout.

1. Package com. billhoo. study;
3. Import Android. content. context;
4. Import Android. widget. imageview;
5. Import Android. widget. linearlayout;
6. Import Android. widget. textview;
8. // Customize imagebutton, simulate imagebutton, and display text below it
9. // Some buttons are provided.
10. Public class myimagebutton extends linearlayout {
12. Public myimagebutton (context, int imageresid, int textresid ){
13. Super (context );
15. Mbuttonimage = new imageview (context );
16. Mbuttontext = new textview (context );
18. Setimageresource (imageresid );
19. Mbuttonimage. setpadding (0, 0, 0, 0 );
21. Settext (textresid );
22. Settextcolor (0xff000000 );
23. Mbuttontext. setpadding (0, 0, 0, 0 );
25. // Set attributes of the layout
26. Setclickable (true); // clickable
27. Setfocusable (true); // focused
28. Setbackgroundresource (Android. R. drawable. btn_default); // the background of the normal button is used for layout.
29. Setorientation (linearlayout. Vertical); // vertical layout
31. // Add an image before adding text
32. // Adding the order will affect the layout effect.
33. Addview (mbuttonimage );
34. Addview (mbuttontext );
35. }
37. // ---------------- Public method -----------------------------
38. /*
39. * Setimageresource Method
40. */
41. Public void setimageresource (INT resid ){
42. Mbuttonimage. setimageresource (resid );
43. }
45. /*
46. * Settext Method
47. */
48. Public void settext (INT resid ){
49. Mbuttontext. settext (resid );
50. }
52. Public void settext (charsequence buttontext ){
53. Mbuttontext. settext (buttontext );
54. }
56. /*
57. * Settextcolor Method
58. */
59. Public void settextcolor (INT color ){
60. Mbuttontext. settextcolor (color );
61. }
63. // ---------------- Private attribute -----------------------------
64. Private imageview mbuttonimage = NULL;
65. Private textview mbuttontext = NULL;
66. }

Then write the XML layout for the Custom button in the main layout. Note that our "button" is actually a linear layout. Therefore, linearlayout should be written in XML instead of button or imagebutton.

 

1. <? XML version = "1.0" encoding = "UTF-8"?>
2. <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
3. Android: Orientation = "vertical" Android: layout_width = "fill_parent"
4. Android: layout_height = "fill_parent">
6. <! -- This is our "Data Management button" -->
7. <Linearlayout Android: Id = "@ + ID/ll_bt_data_config"
8. Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/>
10. </Linearlayout>

Finally, set the listener for the Custom button in the activity.

 

1. Package com. billhoo. study;
3. Import Android. App. activity;
4. Import Android. OS. Bundle;
5. Import Android. View. view;
6. Import Android. widget. Button;
7. Import Android. widget. linearlayout;
9. Public class testactivity extends activity {
10. /** Called when the activity is first created .*/
11. @ Override
12. Public void oncreate (bundle savedinstancestate ){
13. Super. oncreate (savedinstancestate );
14. Setcontentview (R. layout. Main );
16. Btdataconfig = new myimagebutton (this, R. drawable. Option, R. String. Text );
18. // Get the container of the package button
19. Llbtdataconfig = (linearlayout) findviewbyid (R. Id. ll_bt_data_config );
21. // Add our custom button to this container
22. Llbtdataconfig. addview (btdataconfig );
24. // Set button listening
25. Btdataconfig. setonclicklistener (New button. onclicklistener (){
26. @ Override
27. Public void onclick (view v ){
28. Btdataconfig. settext ("the button has been clicked ");
29. }
30. });
31. }
33. Private linearlayout llbtdataconfig = NULL; // the container that wraps this button in the main layout
34. Private myimagebutton btdataconfig = NULL;
35. }

Effect

Extension

You can also extend the functions of this class by yourself, such as setting the surround position and size control of text, etc.

This article is from the "bill_hoo" blog, please be sure to keep this source http://billhoo.blog.51cto.com/2337751/772442