Android implements a custom button with text and pictures

In Android development, you will often need to use a button with text and pictures, below to explain the common implementation methods.

I. Using the system's own button implementation

The simplest way to do this is to use the button that comes with the system, which is the smallest amount of code. One of the properties of the button is Drawableleft, which can set the picture to the left of the text, but this way must make the background color of the icon transparent, if the background color of the icon is not transparent, it will cause the icon part of the background color will not be changed when the button is clicked.

Main code:

<ButtonAndroid:id= "@+id/bt3"Android:layout_margintop= "4DP"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Train"Android:textsize= "16sp"  Android:textcolor = "#000000"  Android:paddingleft = "5DP"  android:paddingtop = "5DP"  android:paddingright = "5DP"  Android:paddingbottom = "5DP"  Android:drawableleft = "@drawable/line_bus_icon"  Android:background= "@drawable/button_bg" > </button>          

Implementation results:

　　

If you want to make the text below the icon, change to Drawabletop.

Two. Inherit the button of the system and redraw it

PackageCom.test;ImportAndroid.content.Context;ImportAndroid.graphics.Bitmap;ImportAndroid.graphics.BitmapFactory;ImportAndroid.graphics.Canvas;ImportAndroid.util.AttributeSet;ImportAndroid.widget.Button;PublicClass ImageTextButton2ExtendsButton {Privateint resourceId = 0;PrivateBitmap Bitmap;PublicImageTextButton2 (Context context) {Super (context,Null); }PublicImageTextButton2 (Context context,attributeset attributeset) {Super(context, AttributeSet);This.setclickable (True); ResourceId =R.drawable.icon; Bitmap =Bitmapfactory.decoderesource (Getresources (), resourceId); }Publicvoid SetIcon (IntRESOURCEID) {This.bitmap =Bitmapfactory.decoderesource (Getresources (), resourceId); Invalidate (); } @OverrideProtectedvoidOnDraw (canvas canvas) {//TODO auto-generated Method Stub//int x = ( Span style= "color: #0000ff;" >this.getmeasuredwidth ()-bitmap.getwidth ())/2int y = 0null); // coordinates need to be converted because the text in the button is centered by default //int) this.gettextsize ()); super.ondraw (Canvas)}}      

Then call in the layout file:

 <com.test.imagetextbutton2 android:id= "@+id/bt2"  android:layout_margintop< Span style= "color: #0000ff;" >= "10DP"  Android:text= "Hello"  Android:textsize=" 15DP "  Android:textcolor=" #000000 "  Android:layout_width=" 60DP "  Android:layout_height=" 70DP "  Android:background=" @drawable/button_bg "/>                

Note that when called in an XML file, it is not possible to use wrap_content for Layout_width and layout_height two properties, otherwise it will cause the button to display only the text part.

Three. Inherit the layout file

The analysis found that a button with text and icon can actually be viewed as a linear layout or a relative layout, so it can be implemented by inheriting the layout.

First implement a button's layout file Img_text_bt.xml:

<?XML version= "1.0" encoding= "Utf-8"?><RelativelayoutXmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"><ImageViewAndroid:id= "@+id/imgview"Android:layout_alignparenttop= "true"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_centerinparent= "true"Android:src= "@drawable/icon"></ImageView> <textview Span style= "color: #ff0000;" >android:id= "@+id/textview"  android:layout_width< Span style= "color: #0000ff;" >= "Wrap_content"  Android:layout_height= "Wrap_ Content " Android:layout_centerinparent=" true " Android:layout_below= "@id/imgview" > </textview> relativelayout>     

Then go to inherit the Relativelayout layout:

PackageCom.test;ImportAndroid.content.Context;ImportAndroid.util.AttributeSet;ImportAndroid.view.LayoutInflater;ImportAndroid.widget.ImageView;ImportAndroid.widget.RelativeLayout;ImportAndroid.widget.TextView;PublicClass ImageTextButton1ExtendsRelativelayout {PrivateImageView Imgview;PrivateTextView TextView;PublicImageTextButton1 (Context context) {Super (context,Null); }PublicImageTextButton1 (Context context,attributeset attributeset) {Super(context, AttributeSet); Layoutinflater.from (context). Inflate (R.LAYOUT.IMG_TEXT_BT,ThisTrue);This.imgview =(ImageView) Findviewbyid (R.id.imgview);This.textview =(TextView) Findviewbyid (R.id.textview);This.setclickable (True);This.setfocusable (True); }Publicvoid Setimgresource (IntResourceID) {this.imgview.setimageresource (ResourceID);} public void SetText (String text) {this.textview.settext (text);} public void SetTextColor ( int color "{this.textview.settextcolor (color); } public void settextsize ( float size "{this.textview.settextsize (size); } } 

You can then invoke it in the desired XML file:

<com.test.ImageTextButton1    android:id= "@+id/bt1"   android:layout_width= "Wrap_ Content " android:layout_height=" Wrap_content " android:background/>    

Then use it in the activity:

BT1 = (ImageTextButton1) Findviewbyid (R.ID.BT1);        Bt1.settext ("icon");        Bt1.settextcolor (Color.rgb (0, 0, 0));        Bt1.setonclicklistener (new Onclicklistener () {                        @Override            void// TODO auto-generated Method Stub Toast.maketext (mainactivity.  This, "Bt1 was clicked", Toast.length_short). Show (); } });

Three different ways to run the final result:

Project Source: Http://files.cnblogs.com/dolphin0520/TestImgTextButton.rar

Android implements a custom button with text and pictures