Android implements a custom button with text and pictures

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:

<button     android: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

Package Com.test;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.bitmapfactory;import Android.graphics.canvas;import Android.util.attributeset;import    Android.widget.button;public class ImageTextButton2 extends Button {private int resourceId = 0;        Private Bitmap Bitmap;    Public ImageTextButton2 (Context context) {super (context,null);        } public ImageTextButton2 (context Context,attributeset AttributeSet) {Super (context, attributeset);        This.setclickable (TRUE);        ResourceId = R.drawable.icon;    Bitmap = Bitmapfactory.decoderesource (Getresources (), resourceId); } public void SetIcon (int resourceId) {this.bitmap = Bitmapfactory.decoderesource (Getresources (), Resou        Rceid);    Invalidate (); } @Override protected void OnDraw (canvas canvas) {//TODO auto-generated Method Stub//figure Center of top Display int x = (This.getmeasuredwidth ()-Bitmap.getWidth ())/2;        int y = 0;        Canvas.drawbitmap (bitmap, x, y, null); The coordinates need to be converted, because by default the text in the button is centered//The text needs to be displayed at the bottom canvas.translate (0, (This.getmeasuredheight ()/2)-(int) This        . GetTextSize ());    Super.ondraw (canvas); }        }

Then call in the layout file:

<com.test.imagetextbutton2   android:id= "@+id/bt2"   android:layout_margintop= "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"? ><relativelayout  xmlns:android= "http://schemas.android.com/apk /res/android "  android:layout_width=" wrap_content "  android:layout_height=" wrap_content ">    < ImageView   android: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   android:id= "@+id/textview   " Android:layout_width= "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:

Package Com.test;import Android.content.context;import Android.util.attributeset;import Android.view.layoutinflater;import Android.widget.imageview;import Android.widget.relativelayout;import      Android.widget.textview;public class ImageTextButton1 extends Relativelayout {private ImageView imgview;    Private TextView TextView;    Public ImageTextButton1 (Context context) {super (context,null);                } public ImageTextButton1 (context Context,attributeset AttributeSet) {Super (context, attributeset);                Layoutinflater.from (context). Inflate (R.LAYOUT.IMG_TEXT_BT, this,true);        This.imgview = (ImageView) Findviewbyid (R.id.imgview);                This.textview = (TextView) Findviewbyid (R.id.textview);        This.setclickable (TRUE);    This.setfocusable (TRUE);    } public void Setimgresource (int resourceID) {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= "@drawable/button_bg"  />

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 public            void OnClick (View v) {                //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