Button with text AND an image (Android)

Question

I want to create an android button with both an image and text, but the text is automatically centered. How do I place the text at the bottom of the button?

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

possible duplicate of [Android: combining text & image on a Button or ImageButton](http://stackoverflow.com/questions/1532876/android-combining-text-image-on-a-button-or-imagebutton) — Victor Sergienko, Sep 20 '13 at 14:13

score 43 · Answer 1 · answered Jul 22 '11 at 16:59

43

You can declare where on the button you want to assign the image (Im assuming you already have the 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 set padding between the text and image with android:drawablePadding(int)

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

answered Jul 22 '11 at 16:59

Adam Storm

724
1
6
13

2

@Adam's should've probably been the answer accepted. I think he just started accepting to raise his percentage. – FoamyGuy Jul 25 '11 at 14:11
This worked for me and cleaner than a custom view! But I wanted to add that the drawablePadding attribute will let you put padding between your text and icon. – Henry Oct 03 '12 at 18:22
1

how to set image size ? – sarfarazsajjad Aug 13 '15 at 05:46
Can you elaborate on "I'm assuming you already have the image on the button"? How do you put an image on a `Button` (as opposed to an `ImageButton`)? Do you just mean by using `drawableTop=`? – LarsH Jul 21 '17 at 20:14

score 6 · Answer 2 · answered May 15 '14 at 05:31

You can also do like this

enter image description here

<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) {

FoamyGuy · Accepted Answer · 2012-01-20T18:11:34.750

4

If I were you I would just not use a Button. Use LinearLayout, or RelativeLayout and just give it the Button background(Hint: use a selector if you want it to have different images for each state) and place your TextView inside of it, then you can use the drawableLeft, drawableTop etc.. attributes to put the picture on whichever side you want. If you want a greater level of control as to where the picture goes in relation to the text then use one TextView and one ImageView. Then in your java just get a reference to your layout and treat it just like you would a button, with setOnClickListener().

edited Jan 20 '12 at 18:11

answered Jul 22 '11 at 16:55

FoamyGuy

46,603
18
125
156

Great idea ! This way (a textview and imageview inside a linearlayout) one could control the exact positions and sizes of the text and icon. – Leeeeeeelo Jan 22 '13 at 09:05
Or see [Adam Storm's answer](http://stackoverflow.com/a/6793454/199364), for a simple way to combine text and image, with image at specified edge of button. – ToolmakerSteve Dec 02 '16 at 00:37

score 0 · Answer 4 · answered Mar 11 '14 at 20:06

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

<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>

score 0 · Answer 5 · answered Jul 22 '11 at 17:00

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"**/>

Button with text AND an image (Android)

5 Answers5

Linked