How to show the text on a ImageButton?

Question

I have an ImageButton and I want to show a text and an image on it. But when I try on emulator:

<ImageButton 
    android:text="OK" 
    android:id="@+id/buttonok" 
    android:src="@drawable/buttonok"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" />

I get the image but without the text. How can I show the text? Please help me!

score 300 · Accepted Answer · edited Jul 28 '15 at 16:08

300

As you can't use android:text I recommend you to use a normal button and use one of the compound drawables. For instance:

<Button 
    android:id="@+id/buttonok" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/buttonok"
    android:text="OK"/>

You can put the drawable wherever you want by using: drawableTop, drawableBottom, drawableLeft or drawableRight.

UPDATE

For a button this too works pretty fine. Putting android:background is fine!

<Button
    android:id="@+id/fragment_left_menu_login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_bg"
    android:text="@string/login_string" />

I just had this issue and is working perfectly.

edited Jul 28 '15 at 16:08

MC Emperor

22,334
15
80
130

answered Dec 16 '10 at 02:55

Cristian

198,401
62
356
264

2

This option works best, unless you need some sort of crazy looking button layout, like an image sandwhiched by two textviews. I originally tried a layout object defined as widget.button, then put an imageview and a textview in it, but after profiling that, and the Button layout above, I saved nearly 30% in measure time, 50% in layout time, and 15-20% in Draw time on my FramLayout, and went from 38 objects down to 26. that's a pretty substantial savings. – Evan R. Sep 12 '12 at 20:49
What's the difference between the drawableTop, bottom etc.? – shim Oct 24 '12 at 20:45
3

@shim drawableTop will place the drawable at the top of the button, drawableRight at the bottom, etc. – Cristian Oct 25 '12 at 12:11
Is there any way to put drawableLeft programmatically? – Renan Bandeira Jan 13 '14 at 13:30
1

@RenanBandeira yes, uset `setCompoundDrawables*()` methods – Cristian Jan 16 '14 at 05:21
7

How can I scale the image to fit the button? Or it would automatically adjust the image to fit with the button. – Alston Apr 25 '14 at 06:54
3

Same question as @Stallman, how to fit the image with the button, and set it to the left? – Twitter khuong291 Sep 21 '15 at 11:11
Use `android:drawableStart` in combination with `android:drawableLeft` so you can support RTL layout as well. ( `android:drawableStart` was introduced only in API 17 so if you want to support older versions, you still need to provide a fallback to `android:drawableLeft` ) – Akshay Agarwal Oct 08 '15 at 20:25
if you want to use VECTOR (srcCompat) as an drawable (drawableLeft, drawableRight and so on), you have to override Button class, otherwise app will crash on api below 19 http://stackoverflow.com/a/40250753/2163045 – murt Feb 16 '17 at 14:43
@EvanR. I don't think having an image and text to be placed at the center, next to each other is "crazy". This solution places an icon at the start of the button and aligns text in the middle. Craziness is Android core team not giving shit about such s simple component – Farid Apr 03 '21 at 17:39

score 69 · Answer 2 · edited Sep 06 '18 at 12:36

69

It is technically possible to put a caption on an ImageButton if you really want to do it. Just put a TextView over the ImageButton using FrameLayout. Just remember to not make the Textview clickable.

Example:

<FrameLayout>
    <ImageButton
        android:id="@+id/button_x"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@null"
        android:scaleType="fitXY"
        android:src="@drawable/button_graphic" >
    </ImageButton>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="false"
        android:text="TEST TEST" >
    </TextView>
</FrameLayout>

edited Sep 06 '18 at 12:36

xarlymg89

2,552
2
27
41

answered Jul 19 '11 at 16:30

UncleIstvan

982
9
14

This not seem to work on Lollipop though works perfectly on others. – Hong Jul 18 '15 at 15:37
2

The problem with this approach is that the text is not affected by the button state (disabled etc.)... unless you do that manually. – TheOperator Jul 13 '16 at 12:56

score 17 · Answer 3 · answered Jul 05 '17 at 10:00

Guys I need to develop the setting and logout button, I used the below code.

    <Button
        android:id="@+id/imageViewLogout"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/size_30dp"
        android:layout_alignParentLeft="true"
        android:text="Settings"
        android:drawablePadding="10dp"
        android:background="@android:color/transparent"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/logout" />

score 4 · Answer 4 · edited May 03 '15 at 16:50

I solved this by putting the ImageButton and TextView inside a LinearLayout with vertical orientation. Works great!

<LinearLayout
    android:id="@+id/linLayout"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/camera_ibtn"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@drawable/camera" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/take_pic"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

</LinearLayout>

score 4 · Answer 5 · answered Jan 06 '17 at 21:02

You can use a LinearLayout instead of using Button it's an arrangement i used in my app

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@color/mainColor"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/ic_cv"
            android:textColor="@color/offBack"
            android:textSize="20dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="@string/cartyCv"
            android:textColor="@color/offBack"
            android:textSize="25dp" />

    </LinearLayout>

Great solution! onClick works perfectly on LinearLayout too. Don't see a reason why we should use a Button or ImageButton — Sam, Jun 17 '17 at 15:03

Samuel · Answer 6 · 2010-12-16T03:27:57.460

4

Actually, android:text is not an argument accepted by ImageButton but, If you're trying to get a button with a specified background (not android default) use the android:background xml attribute, or declare it from the class with .setBackground();

edited Dec 16 '10 at 03:27

answered Dec 16 '10 at 02:52

Samuel

4,337
3
29
35

score 3 · Answer 7 · answered Dec 16 '10 at 02:56

3

you can use a regular Button and the android:drawableTop attribute (or left, right, bottom) instead.

answered Dec 16 '10 at 02:56

Nathan Schwermann

31,285
16
80
91

I found this answer to me the quickest and most effective solution for adding an image such as an icon next to button text – mcfisty Jul 06 '21 at 06:27

eloytxo · Answer 8 · 2012-10-19T06:53:14.040

2

Best way:

<Button 
android:text="OK" 
android:id="@+id/buttonok" 
android:background="@drawable/buttonok"
android:layout_width="match_parent" 
android:layout_height="wrap_content"/>

edited Oct 19 '12 at 06:53

answered Oct 18 '12 at 12:25

eloytxo

31
3

2

This doesn't appear to be any different to what the OP originally tried. – PhonicUK Oct 18 '12 at 12:30
Sorry, i mistake my code. Wasn´t ImageButton, was just Button. – eloytxo Oct 19 '12 at 06:54

score 1 · Answer 9 · answered May 10 '15 at 16:35

Heres a nice circle example:

drawable/circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#ff87cefa"/>

    <size
        android:width="60dp"
        android:height="60dp"/>
</shape>

And then the button in your xml file:

<Button
    android:id="@+id/btn_send"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/circle"
    android:text="OK"/>

score 1 · Answer 10 · answered Sep 22 '20 at 02:07

Here is the solution

<LinearLayout
    android:id="@+id/buttons_line1"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageButton
        android:id="@+id/btn_mute"
        android:src="@drawable/btn_mute"
        android:background="@drawable/circle_gray"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
    <ImageButton
        android:id="@+id/btn_keypad"
        android:layout_marginLeft="50dp"
        android:src="@drawable/btn_dialpad"
        android:background="@drawable/circle_gray"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
    <ImageButton
        android:id="@+id/btn_speaker"
        android:layout_marginLeft="50dp"
        android:src="@drawable/btn_speaker"
        android:background="@drawable/circle_gray"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
</LinearLayout>
<LinearLayout
    android:layout_below="@+id/buttons_line1"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_marginTop="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:text="mute"
        android:clickable="false"
        android:textAlignment="center"
        android:textColor="@color/Grey"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="keypad"
        android:clickable="false"
        android:layout_marginLeft="50dp"
        android:textAlignment="center"
        android:textColor="@color/Grey"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="speaker"
        android:clickable="false"
        android:layout_marginLeft="50dp"
        android:textAlignment="center"
        android:textColor="@color/Grey"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>
</LinearLayout>

score 1 · Answer 11 · edited Dec 06 '20 at 19:25

Best way to show `Text` on `button`(with image)

Your Question: How to show text on imagebutton?

Answer: You can not display text with imageButton. Method that tell in Accepted answer also not work.

because

If you use android:drawableLeft="@drawable/buttonok" then you can not set drawable in center of button.

If you use android:background="@drawable/button_bg" then color of your drawable will be changed.

In android world there are thousands of option to do this. But here i provide best alternate according to my point of view. (see below)

Solution: Use cardView with LinearLayout

Your drawable/image use in LinearLayout because it shows in center. And with help of textView you can set text on this. We makes cardView background to transparent.

<androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="99dp"
                android:layout_margin="16dp"
                app:cardBackgroundColor="@android:color/transparent"
                app:cardElevation="0dp"
                app:cardUseCompatPadding="true">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/your_selected_image"
                    >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Happy Coding"
                        android:textSize="33sp"
                        android:gravity="center"
                        >
                    </TextView>

                </LinearLayout>
            </androidx.cardview.widget.CardView>

here i explain some terms:

app:cardBackgroundColor="@android:color/transparent" for make transparent background of cardView

app:cardElevation="0dp" for hide evelation lines around cardView

app:cardUseCompatPadding="true" its provide actual size of cardView. Always use this when you use cardView

set your image/drawable in LinearLayout as a background.

Sorry, for my Bad English.

Happy Coding:)

score 0 · Answer 12 · edited Dec 30 '16 at 09:07

0

ImageButton can't have text (or, at least, android:text isn't listed in its attributes).

The Trick is:

It looks like you need to use Button (and look at drawableTop or setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

edited Dec 30 '16 at 09:07

Satan Pandeya

3,747
4
27
53

answered Dec 22 '14 at 12:09

Ajay Venugopal

1,544
1
17
30

How to show the text on a ImageButton?

12 Answers12

Best way to show `Text` on `button`(with image)

Solution: Use `cardView` with `LinearLayout`

Happy Coding:)

Linked

Related

How to show the text on a ImageButton?

12 Answers12

Best way to show Text on button(with image)

Solution: Use cardView with LinearLayout

Happy Coding:)

Linked

Related

Best way to show `Text` on `button`(with image)

Solution: Use `cardView` with `LinearLayout`