How to show the text on a ImageButton?
AndroidImagebuttonAndroid Problem Overview
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!
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
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>
Solution 3 - Android
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" />
Solution 4 - Android
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();
Solution 5 - Android
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>
Solution 6 - Android
you can use a regular Button
and the android:drawableTop attribute (or left, right, bottom) instead.
Solution 7 - Android
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>
Solution 8 - Android
Best way:
<Button
android:text="OK"
android:id="@+id/buttonok"
android:background="@drawable/buttonok"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Solution 9 - Android
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"/>
Solution 10 - Android
<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>
Solution 11 - Android
Text
on button
(with image)
Best way to show
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:)
Solution 12 - Android
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))
.