I want to create a Button like this:
Here is my code:
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:drawablePadding="10dp"
android:id="#+id/button"
android:text="Play Game"
android:background="#drawable/ronaldo"
android:drawableRight="#drawable/messi" />
But the messi.jpeg is too large, and it doesn't show the text in this situation. How to decrease the image size to fit the button?
May anyone help me to solve this problem?
If you are using API >= 23, you can put the drawable resource within a XML file like this
messi_smaller.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/messi"
android:width="smaller_width_in_dp"
android:height="smaller_height_in_dp">
</item>
</layer-list>
You must make sure to keep the drawable ratio when you set the width and the height. And just use this drawable in your button:
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:drawablePadding="10dp"
android:id="#+id/button"
android:text="Play Game"
android:background="#drawable/ronaldo"
android:drawableRight="#drawable/messi_smaller" />
By this way, you can change the drawable size just in xml code
Solution 1:
Adding a drawable to a button has very limited functions. You can't change the drawable size, so the best way to fix it is to add a button with an image view beside it in a linear layout like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/ronaldo"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:text="Play Game"
android:textColor="#ff0000"
android:textStyle="italic" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:src="#drawable/messi" />
</LinearLayout>
Solution 2:
You can also do the following if you prefer this one, but you will have to add onClickListener() for each one of them:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/ronaldo"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:background="#null"
android:text="Play Game"
android:textColor="#ff0000"
android:textStyle="italic" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:src="#drawable/messi" />
</LinearLayout>
Solution 3:
As you have suggested in the comments, you would do something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center"
android:background="#drawable/ronaldo">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_alignLeft="#+id/buttonLayout"
android:layout_alignRight="#+id/buttonLayout"
android:background="#null" />
<LinearLayout
android:id="#+id/buttonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:gravity="center"
android:text="Play Game"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ff0000"
android:textStyle="italic" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:src="#drawable/messi" />
</LinearLayout>
</RelativeLayout>
I deleted the button and made a layer like a button
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#android:color/background_light"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="go_map"
android:clickable="true"
android:orientation="vertical">
<ImageView
android:id="#+id/img_m0"
style="#style/menu2img"
app:srcCompat="#drawable/ico_m0" />
<TextView
android:id="#+id/textView2"
style="#style/menu2text"
android:text="#string/men_map" />
</LinearLayout>
[]
you can use a RelativeLayout like this:
<RelativeLayout
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/ronaldo">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="play game"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#drawable/messi"
android:scaleType="fitXY"
/>
</RelativeLayout>
Try this :
final Button button = (Button) findViewById(R.id.button1);
ViewTreeObserver vto = button.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
button.getViewTreeObserver().removeOnPreDrawListener(this);
//scale to 90% of button height
DroidUtils.scaleButtonDrawables(button, 0.9);
return true;
}
});
If you are handling multiple screen sizes, creating alternative version for given screen (drawable-mdpi folder and so on...) can be solution.
If you are importing a vector directly you can use the following:
<vector android:height="30dp" android:tint="#00FF41"
android:viewportHeight="24" android:viewportWidth="24"
android:width="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#android:color/white" android:pathData="M20,6h-8l-2,-2L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,8c0,-1.1 -0.9,-2 -2,-2zM20,18L4,18L4,8h16v10zM8,13.01l1.41,1.41L11,12.84L11,17h2v-4.16l1.59,1.59L16,13.01 12.01,9 8,13.01z"/>
</vector>
For API >= 23 and for android.support.design.widget.FloatingActionButton(FAB) , you can put the drawable resource (SVG) within a XML file with the path: File/New/Vector Asset and save the file under the name for example: ic_water_white_24dp.xml
and add app:maxImageSize attribute to the FAB:
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnAddProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:maxImageSize="40dp" // add this line to increase the icon inside the fab
app:srcCompat="#drawable/ic_water_damage_white_24dp" />
Try using vector files instead of JPEG. Also, you can even convert jpeg to svg format too.
Once you import svg file into Android Studio project, you are going to see <vector> resource then just change the size as you want by width, height attributes.
viewportWidth and viewportHeight is to set size for drawing on virtual canvas.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp" <!-- fix the size here -->
android:height="20dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path .../> <!-- your shapes are here -->
<path .../>
</vector>
Related
Iam designing a food ordering page, so i need to use small button to add the food on cart.The problem was when i giving 24dp width and height the button size reduces but i cant able to add the text("+" "-").
I have tried
android:minWidth="0dp"
android:minHeight="0dp"
style="?android:attr/negativeButtonText"
<android.support.design.button.MaterialButton
android:id="#+id/incrementButtton"
style="?android:attr/buttonStyleSmall"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:minWidth="0dp"
android:minHeight="0dp"
android:text="+"
android:textColor="#color/ash"
android:textSize="#dimen/fm_food_price_text_size" />
I want to know how to set button 24dp and show "+" text. as like below image.
In this image i used textView, so text is visibile. I want this by using button.
Try this way. This is much more efficient
<android.support.constraint.ConstraintLayout
android:layout_width="#dimen/_dp_85"
android:layout_height="#dimen/_dp_35"
android:id="#+id/quantityviewer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/productName"
android:background="#drawable/quantity"
app:layout_constraintBottom_toBottomOf="#+id/productName">
<TextView
android:textColor="#color/black"
android:text="#string/_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/quantity"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="#+id/increase"
app:layout_constraintStart_toEndOf="#+id/decrease"
/>
<ImageView
app:layout_constraintStart_toStartOf="#id/quantityviewer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/decrease"
app:layout_constraintEnd_toStartOf="#id/quantity"
android:src="#drawable/ic_minus"
app:layout_constraintTop_toTopOf="#id/quantityviewer"
app:layout_constraintBottom_toBottomOf="#id/quantityviewer"
android:contentDescription="#string/todo"
/>
<ImageView
app:layout_constraintEnd_toEndOf="#id/quantityviewer"
android:layout_width="wrap_content"
android:src="#drawable/ic_plus"
android:layout_height="wrap_content"
android:id="#+id/increase"
app:layout_constraintTop_toTopOf="#id/quantityviewer"
app:layout_constraintBottom_toBottomOf="#id/quantityviewer"
android:contentDescription="#string/todo" app:layout_constraintStart_toEndOf="#+id/quantity"
/>
</android.support.constraint.ConstraintLayout>
quantitiy.xml(shape of the layout)
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<corners android:radius="#dimen/_dp_5" />
<stroke
android:width="#dimen/_dp_1"
android:color="#color/quantitystokecolor" />
</shape>
I have solved by using ImageButton instead of button.
<ImageButton
android:id="#+id/incrementButtton"
android:layout_width="24dp"
android:layout_height="24dp"
android:padding="8dp"
android:layout_gravity="center"
android:gravity="center"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_minus_symbol"
android:scaleType="centerInside"
/>
for ripple effect i used
android:background="?attr/selectableItemBackgroundBorderless"
Is there an easy way to place a TextView on top of ImageView?
My code:
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/finaloval"
android:elevation="10dp"
android:layout_centerHorizontal="true"
android:id="#+id/greencircleId"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="23dp"
android:id="#+id/textView"
android:textSize="40sp"
android:textColor="#color/colorAccent" />
Example Image
The green circle would be my #drawable/finaloval. And the %100 organic would be the TextView.
<TextView android:id="#+id/tv_versionstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:drawableBottom="#drawable/icon_new"
android:text="text"
android:textColor="#363636"
android:textSize="20sp" />
drawableBottom is also a choise for you
Please try to set the background for the layout and place your textviews inside that , i have coded it as per the image you shared in it example
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:background="#drawable/finaloval">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="100% natural"
android:layout_marginTop="23dp"
android:id="#+id/natural"
android:textSize="20sp"
android:textColor="#color/colorAccent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="organic"
android:layout_marginTop="23dp"
android:layout_below="#id/"
android:id="#+id/natural"
android:textSize="40sp"
android:textColor="#color/colorAccent" />
</RelativeLayout>
try this xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/finaloval"
android:layout_gravity="center"
android:elevation="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:textSize="40sp"
android:layout_gravity="center"
android:textColor="#color/text_black" />
</FrameLayout>
Just use a LinearLayout as root and re-sequence your views from top to bottom, meaning in your case should be TextView then ImageView.
Edited based on comment
To do overlap of views, you can use RelativeLayout or FrameLayout as suggested by others.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_marginTop="23dp"
android:id="#+id/textView"
android:textSize="40sp"
android:textColor="#color/colorAccent" />
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/finaloval"
android:elevation="10dp"
android:id="#+id/greencircleId"/>
</RelativeLayout>
Think this is the simplest way of doing. Hope this helps
Try to set the imageview as the background of the textview.
Do you want to put some words upon a image or a sharp drawable?
I'll use a shape drawable to make an example.
Now I have a shape like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<size
android:height="100dp"
android:width="100dp"
/>
<solid
android:color="#66ccff"
/>
</shape>
Then set it as the background of a textview in a layout xml.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle"
android:text="Hello World!"
/>
That looks like it. It's a 100dp*100dp one.
100*100
And try to modify the width and height of the textview.
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/circle"
android:text="Hello World!"
/>
Now it looks like this. A Lot Larger.
200*200
So the conclusion is:
Change the size of drawable and use wrap_content in the layout xml.
Change "layout_width" and "layout_height" in the layout xml.
But if you want to use the smaller one or the lager one, maybe you should add some control codes in the control java file.
(Sorry I'm not in a English-spoken country so maybe my words is not clear enough)
I'm sorry that I didn't obverse the rules before answer (cuz it's my first answer).
I want to make a shopping cart image, with a little indicator at the top-right corner to show how many products were selected/ordered.
The thing is, I can't place it in the top right corner, only the left one (default) or center.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/shoppingCartIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_cart" />
<ImageView
android:id="#+id/indicatorIcon"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="top|right"
android:src="#0066ff" />
</RelativeLayout>
By using FrameLayout you can give it with some padding & margin
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/shoppingCartIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_cart" />
<ImageView
android:id="#+id/indicatorIcon"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="top|right"
android:src="#0066ff" />
</FrameLayout>
UPDATE
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/shoppingCartIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_cart" />
<TextView
android:id="#+id/indicatorIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_marginLeft="25dp"
android:background="#drawable/circle_shape"
android:text="5"
android:textSize="24sp" />
</FrameLayout>
You can create shape as per your wish
res/drawable/circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#0066ff"></solid>
</shape>
Apart from this i would suggest you other third library which is very nice for displaying this type of badge or highlighted view
https://github.com/jgilfelt/android-viewbadger
https://github.com/mikepenz/Android-ActionItemBadge
you can add this code to your ImageView tag.
android:layout_marginLeft="90dp"
It will make the ImageView go right marginLeft gives a blank depends on the size you want. You can change the size however you want.
The parent is a RelativeLayout so try to use the properties :
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
on your "#+id/indicatorIcon".
Hope it helps.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/shoppingCartIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_cart" />
<ImageView
android:id="#+id/indicatorIcon"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#0066ff" />
</RelativeLayout>
I want to create a textview like the below image. I tried but not able to get like this format.
This is my xml file.
<View android:background="#ff340c1c"
android:layout_width="fill_parent"
android:layout_height="0.5dip"
android:layout_above="#+id/genere"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/genere"
android:text="Search by Movie Genere"
android:layout_above="#+id/rating"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="78dp"
android:textSize="20sp"/>
<View android:background="#ff340c1c"
android:layout_width="fill_parent"
android:layout_height="0.5dip"
android:layout_alignBottom="#+id/genere"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
Use custom background with border and drawableLeft -
drawable/my_rect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="0.5dp"
android:color="#color/gray" />
<solid android:color="#color/white" />
<corners android:radius="0px" />
</shape>
In XML:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/genere"
android:text="Search by Movie Genere"
android:layout_above="#+id/rating"
android:drawableLeft="#drawable/someimage" // ADD
android:background="#drawable/my_rect" // ADD
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="78dp"
android:textSize="20sp"/>
Note: Many possible solution exists.
It can be done by using a simple linear layout as a border.
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EEEEEE"
android:orientation="horizontal"
android:padding="1dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_search_category_default" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Search By Venue" />
</LinearLayout>
</LinearLayout>
For adding an image to the TextView, see android:drawableLeft. For adding a border, you could take a look at 9-patch images. Generate a 9-patch image as described, and set that as the background of the TextView.
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!
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.
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>
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" />
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();
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>
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>
you can use a regular Button and the android:drawableTop attribute (or left, right, bottom) instead.
Best way:
<Button
android:text="OK"
android:id="#+id/buttonok"
android:background="#drawable/buttonok"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
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"/>
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>
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:)
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)).