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!
This question is related to
android
imagebutton
Best way:
<Button
android:text="OK"
android:id="@+id/buttonok"
android:background="@drawable/buttonok"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
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>
<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>
you can use a regular Button
and the android:drawableTop attribute (or left, right, bottom) instead.
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))
.
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();
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>
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
withLinearLayout
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.
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>
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"/>
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" />
Source: Stackoverflow.com