I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>
Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />
You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.
I have two clickable text views with the same drawable left image. When I open fragment first time the first image looks bigger then second one. After clicking on first text view the next fragment is opening and then when I return back two images have the same size. What's wrong? Please help to find out reason of this bug.
This is my layout:
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/dmvLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/dmv_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider"
android:background="#color/lineColor" />
<RelativeLayout
android:id="#+id/tlcLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/tlc_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
</LinearLayout>
This is image drawable (lawyer_selected.xml), where femida is png image, and white background is needed for selected state (button in selected state is green and image should be with white frame):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<padding
android:bottom="#dimen/dash_icon_padding"
android:left="#dimen/dash_icon_padding"
android:right="#dimen/dash_icon_padding"
android:top="#dimen/dash_icon_padding"/>
<solid android:color="#android:color/white"/>
<corners
android:radius="#dimen/dash_icon_radius"/>
</shape>
</item>
<item android:drawable="#drawable/femida"/>
</layer-list>
Image femida.png
Just use nested LinearLayout instead and use android:layout_weight="1" or any required value to you and it will work for sure.
**In your case it will be 1 only, while the main parent LinearLayout can have wrap_content as height
There is a default rectangular background in my Image Button. I want to remove this
This is related codes:
<ImageButton
android:layout_width="62dp"
android:layout_weight="1"
android:layout_height="60dp"
android:id="#+id/im16"
android:layout_gravity="fill_horizontal"
android:src="#drawable/off1"/>
Just try this
<ImageButton
android:layout_width="62dp"
android:layout_weight="1"
android:layout_height="60dp"
android:id="#+id/im16"
android:layout_gravity="fill_horizontal"
android:background="#drawable/off1"/>
just change your android:src to android:background
You will want to set the background of the imageButton to be something invisible. I do this by making the following XML drawable and setting it to the ImageButton's background. This will let the button still show a color when it is clicked, but blank otherwise.
blank_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/some_color" />
<item android:drawable="#android:color/transparent" />
</selector>
<ImageButton
android:layout_width="62dp"
android:layout_weight="1"
android:layout_height="60dp"
android:id="#+id/im16"
android:layout_gravity="fill_horizontal"
android:src="#drawable/off1"
android:background="#drawable/blank_selector" />
best solution is
android:background="#null"
This happens very frequently to me when starting to work on android. The text within the button element is not showing fully. What can be wrong? I tried text direction, alignment, gravity but nothing works.
The code behind it:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="#string/latestButtonString"
android:background="#drawable/roundbutton" />
Please help and much appreciated.
Update: This is the roundbutton.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="#ABABAB"/>
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
I had this problem, I solved it by chaning the xml for the button from using tools: to android: for the text attribute. Example below (last line is the line thats changed):
<Button
android:id="#+id/btn_settings"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#F6F6F6"
tools:text="App Settings" />
becomes...
<Button
android:id="#+id/btn_settings"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#F6F6F6"
android:text="App Settings" />
try to replace
android:text="#string/latestButtonString"
and put direct hardcode string here
as,
android:text="hello"
or
try to replace this line in roundbutton.xml:
<android:shape="rectangle" android:padding="10dp">
with
<android:shape="rectangle" android:padding="3dp">
Can you please check by removing android:background="#drawable/roundbutton" from your button attribute. If text shown fully, then you need to modify the #drawable/roundbutton" there may be you have set fixed width thus your text in button is not fully visible.
It seems that you have a paddingLeft on your Button. Can you check if this is present in your styles.xml?
If it is in your styles.xml, it is probably important for the theme of your app.
If you would just want to cancel it in that certain Button, just put
android:paddingLeft="0dp"
Faced a similar problem...following attribute made it work:
android:layout_weight="1"
please remove these line android:background="#drawable/roundbutton" but view not create like you if you want to create same view please try these code :
code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="40dp"
android:padding="20dp"
android:background="#drawable/roundbutton">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="latestButtonString"
android:textColor="#000000"
android:textSize="18sp"/>
</LinearLayout>
I'm trying to have an image (as the background) on a button and add dynamically, depending on what's happening during run-time, some text above/over the image.
If I use ImageButton I don't even have the possibility to add text.
If I use Button I can add text but only define an image with android:drawableBottom and similar XML attributes as defined here.
However these attributes only combine text & image in x- and y-dimensions, meaning I can draw an image around my text, but not below/under my text (with the z-axis defined as coming out of the display).
Any suggestions on how to do this? One idea would be to either extend Button or ImageButton and override the draw()-method. But with my current level of knowledge I don't really know how to do this (2D rendering). Maybe someone with more experience knows a solution or at least some pointers to start?
For users who just want to put Background, Icon-Image and Text in one Button from different files: Set on a Button background, drawableTop/Bottom/Rigth/Left and padding attributes.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home_btn_test"
android:drawableTop="#drawable/home_icon_test"
android:textColor="#FFFFFF"
android:id="#+id/ButtonTest"
android:paddingTop="32sp"
android:drawablePadding="-15sp"
android:text="this is text"></Button>
For more sophisticated arrangement you also can use RelativeLayout (or any other layout) and make it clickable.
Tutorial: Great tutorial that covers both cases: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx
There's a much better solution for this problem.
Just take a normal Button and use the drawableLeft and the gravity attributes.
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/my_btn_icon"
android:gravity="left|center_vertical" />
This way you get a button which displays a icon in the left side of the button and the text at the right site of the icon vertical centered.
You can call setBackground() on a Button to set the background of the button.
Any text will appear above the background.
If you are looking for something similar in xml there is:
android:background attribute which works the same way.
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:background="#drawable/home_button"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:drawablePadding="6dp"
android:gravity="left|center"
android:height="60dp"
android:padding="6dp"
android:text="AndroidDhina"
android:textColor="#000"
android:textStyle="bold" />
Just use a LinearLayout and pretend it's a Button - setting background and clickable is the key:
<LinearLayout
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:src="#drawable/image" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="5dp"
android:text="Do stuff" />
</LinearLayout>
just replace
android:background="#drawable/icon"
with
android:background="#android:color/transparent"
android:drawableTop="#drawable/[your background image here]"
izz a pretty good trick.. ;)
I took a different approach from the ones stated here, and it is working really well, so I wanted to share it.
I'm using a Style to create a custom button with image at the left and text at the center-right. Just follow the 4 "easy steps" below:
I. Create your 9 patches using at least 3 different PNG files and the tool you have at: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch. After this you should have:
button_normal.9.png, button_focused.9.png and button_pressed.9.png
Then download or create a 24x24 PNG icon.
ic_your_icon.png
Save all in the drawable/ folder on your Android project.
II. Create a XML file called button_selector.xml in your project under the drawable/ folder. The states should be like this:
<item android:state_pressed="true" android:drawable="#drawable/button_pressed" />
<item android:state_focused="true" android:drawable="#drawable/button_focused" />
<item android:drawable="#drawable/button_normal" />
III. Go to the values/ folder and open or create the styles.xml file and create the following XML code:
<style name="ButtonNormalText" parent="#android:style/Widget.Button">
<item name="android:textColor" >#color/black</item>
<item name="android:textSize" >12dip</item>
<item name="android:textStyle" >bold</item>
<item name="android:height" >44dip</item>
<item name="android:background" >#drawable/button_selector</item>
<item name="android:focusable" >true</item>
<item name="android:clickable" >true</item>
</style>
<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
<item name="android:drawableLeft" >#drawable/ic_your_icon</item>
</style>
ButtonNormalTextWithIcon is a "child style" because it is extending ButtonNormalText (the "parent style").
Note that changing the drawableLeft in the ButtonNormalTextWithIcon style, to drawableRight, drawableTop or drawableBottom you can place the icon in other position with respect to the text.
IV. Go to the layout/ folder where you have your XML for the UI and go to the Button where you want to apply the style and make it look like this:
<Button android:id="#+id/buttonSubmit"
android:text="#string/button_submit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/ButtonNormalTextWithIcon" ></Button>
And... voilà! You got your button with an image at the left side.
For me, this is the better way to do it! because doing it this way you can manage the text size of the button separately from the icon you want to display and use the same background drawable for several buttons with different icons respecting the Android UI Guidelines using styles.
You can also create a theme for your App and add the "parent style" to it so all the buttons look the same, and apply the "child style" with the icon only where you need it.
Important Update
Don't use normal android:drawableLeft etc... with vector drawables, else it
will crash in lower API versions. (I have faced it in live app)
For vector drawable
If you are using vector drawable, then you must
Have you migrated to AndroidX? if not you must migrate to AndroidX first. It is very simple, see what is androidx, and how to migrate?
It was released in version 1.1.0-alpha01, so appcompat version should be at least 1.1.0-alpha01. Current latest version is 1.1.0-alpha02, use latest versions for better reliability, see release notes - link.
implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'
Use AppCompatTextView/AppCompatButton/AppCompatEditText
Use app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompat and app:drawableEndCompat
For regular drawable
If you don't need vector drawable, then you can
use android:drawableLeft, android:drawableRight, android:drawableBottom, android:drawableTop
You can use either regular TextView, Button & EditText or AppCompat classes.
You can achieve Output like below -
<Button android:id="#+id/imeageTextBtn"
android:layout_width="240dip"
android:layout_height="wrap_content"
android:text="Side Icon With Text Button"
android:textSize="20sp"
android:drawableLeft="#drawable/left_side_icon"
/>
You can use drawableTop (also drawableLeft, etc) for the image and set text below the image by adding the gravity left|center_vertical
<Button
android:id="#+id/btn_video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#null"
android:drawableTop="#drawable/videos"
android:gravity="left|center_vertical"
android:onClick="onClickFragment"
android:text="Videos"
android:textColor="#color/white" />
MaterialButton has support for setting an icon and aligning it to the text:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My button"
app:icon="#drawable/your_icon"
app:iconGravity="textStart"
/>
app:iconGravity can also be to start / end if you want to align the icon to the button instead of the text inside it.
Since version 1.5.0-beta01, app:iconGravity can also be top / textTop (commit)
<Button
android:id="#+id/groups_button_bg"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Groups"
android:drawableTop="#drawable/[image]" />
android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop
http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/
Probably my solution will suit for a lot of users, I hope so.
What I am suggesting it is making TextView with your style. It works for me perfectly, and has got all features, like a button.
First of all lets make button style, which you can use everywhere...I am creating button_with_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#8dbab3" />
<gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F" />
</shape>
<!--#284682;-->
<!--border-color: #223b6f;-->
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#284682" />
<solid android:color="#284682"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#color/ControlColors" />
<gradient android:angle="-90" android:startColor="#color/ControlColors" android:endColor="#color/ControlColors" />
</shape>
</item>
</selector>
Secondly,
Lets create a textview button.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="right|bottom"
android:gravity="center"
android:padding="12dip"
android:background="#drawable/button_with_hover"
android:clickable="true"
android:drawableLeft="#android:drawable/btn_star_big_off"
android:textColor="#ffffffff"
android:text="Golden Gate" />
And this is a result. Then style your custom button with any colors or any other properties and margins. Good luck
This code works for me perfectly
<LinearLayout
android:id="#+id/choosePhotosView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:clickable="true"
android:background="#drawable/transparent_button_bg_rev_selector">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/choose_photo"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="#string/choose_photos_tv"/>
</LinearLayout>
To combine Button and drawableTop and still get the click response, you can use button style #style/Widget.AppCompat.Button.Borderless to make it transparent.
<Button
android:id="#+id/settings"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_baseline_settings_24"
android:drawableTint="?attr/colorPrimary"
android:text="#string/settings"
android:textColor="?attr/colorPrimary" />
<Button android:id="#+id/myButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Image Button"
android:drawableTop="#drawable/myimage"
/>
Or you can programmatically:
Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button
You can use this:
<Button
android:id="#+id/reset_all"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/btn_med"
android:text="Reset all"
android:textColor="#ffffff" />
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="#drawable/btn_med"
android:text="Undo"
android:textColor="#ffffff" />
in that i have put an image as background and also added text..!
Make a fake button.
It's really the only way
<FrameLayout
android:id="#+id/fake_button"
android:layout_width=" .. "
android:layout_height=" .. "
android:background="#android:color/transparent"
android:clickable="true"
android:onClick="tappedNext">
<ImageView
android:id="#+id/fake_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/your_amazing_drawable" />
<TextView
android:id="#+id/fake_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Next"
android:fontFamily="#font/ .. "
android:textColor="#color/ .. "
android:textSize=" .. " />
</FrameLayout>
<ImageView
android:id="#+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/temp"
/>