Button with text AND image (Android)

Question

I want to create an android button with an image and text, but the text will be automatically centered. How to place text at the bottom of a button?

I know that I can use relative layout to place the second text button below the image, but I prefer to minimize the code.

Answer 1

If I were you, I simply would not use the button. Use a LinearLayout or RelativeLayout and just give it a Button background (hint: use a selector if you want it to have different images for each state) and place a TextView inside it, then you can use drawableLeft, drawableTop, etc. to place the image on the side you want. If you need a higher level of control regarding where the image goes in relation to the text, use one TextView and one ImageView. Then in your java just get a link to your layout and handle it the same way as a button using setOnClickListener ().

Answer 2

You can declare where on the button you want to assign the image (Suppose you already have an image on the button):

<Button android:id="@+id/button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="- I'm a Button -" android:drawableTop="@drawable/icon" /> 

you can also indent between text and image using android: drawablePadding (int)

The drawableTop attribute can be changed to drawableRight, Left, Bottom, etc. good luck!

Answer 3

You can also do it

 <LinearLayout android:id="@+id/image_button_2" style="@android:style/Widget.Button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="5dp" android:src="@drawable/ic_gear" /> <TextView android:id="@+id/image_button_2_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/black" android:text="Button 2" /> </LinearLayout> 

In your activity

  final View button2 = findViewById(R.id.image_button_2); button2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { 

Answer 4

 <Button android:layout_width="0dp" android:layout_weight="1" android:background="@drawable/home_button" android:drawableLeft="@android:drawable/ic_menu_edit" android:drawablePadding="6dp" android:gravity="left|center" android:height="60dp" android:padding="6dp" android:text="AndroidDhina" android:textColor="#000" android:textStyle="bold" /> 

for more information http://androiddhina.blogspot.in/2015/09/how-to-add-image-inside-button.html

Answer 5

You can try something like this

 <Button android:id="@+id/ButtonTest" android:text="this is text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/icon" **android:gravity="bottom"**/> 

Answer 6

I think the easiest way to achieve this (with pure XML):

 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="onClickMethod" android:orientation="vertical" android:clickable="true"> <ImageView android:src="@drawable/YOUR_DRAWABLE" android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="false"/> <TextView android:text="@string/YOUR_TEXT" android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="false"/> </LinearLayout>