I am trying to have a button that has a small icon and text inside the button, the icon is sitting way to the left of the button, how can I move it closer to the text which is centered?
This is my XML for the button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/home_icon"
android:text="BACK"
android:id="#+id/button"
android:width="160dp"
android:height="70dp"
android:textStyle="bold" />
Unfortunately it is not possible to do with drawableLeft attribute. This attribute positions the image to the far left position (no matter where your text is).
You need to create your own button for this:
<LinearLayout
android:id="#+id/button"
style="?android:attr/buttonStyle"
android:layout_width="160dip"
android:layout_height="70dip"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BACK"
android:textColor="#android:color/black" />
</LinearLayout>
You can't move it closer. Your only option if you want to have them closer together is building your own button:
<RelativeLayout
android:id="#+id/rlButton"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/ivLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_toLeftOf="#id/tvText"/>
</RelativeLayout>
You can use a margin to control the distance between the TextView and ImageView. You can use it pretty much the same as a button:
RelativeLayour rlButton = (RelativeLayout) view.findViewById(R.id.rlButton);
rlButton.setOnClickListener(new OnClickListener() {
....
});
But of course you have to apply your button style to the RelativeLayout so it looks the same as a button.
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/btn_star_big_on"
android:text="Drawable left"/>
Related
How do I make it so that Button 3 AND the relativelayout (with the blue background) are both in front of Button 2? They are both higher (in value) in the component tree but Button 2 is still in front of everything.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="75dp"
android:layout_marginTop="64dp"
android:text="Button 2" />
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignStart="#+id/button2"
android:layout_alignTop="#+id/button2"
android:layout_marginStart="48dp"
android:background="#android:color/holo_blue_bright"
android:id="#+id/relativeLayout">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/relativeLayout"
android:layout_alignTop="#+id/button2"
android:layout_marginStart="11dp"
android:layout_marginTop="17dp"
android:text="Button 3" />
</RelativeLayout>
The answer lies in material design specs. Raised buttons (and that is the button that has no style applied) has a default elevation of 2dp, while RelativeLayout has 0dp.
My suggestion is to apply style="#style/Widget.AppCompat.Button.Borderless" to the button2. Then it has 0dp elevation. If you want colored button, apply android:background to it.
Ok this is something I can do in iOS in like five minutes.. but I can't seem to get it for android:
i simply want to show a progress bar ontop of a button. I managed to render the progress bar just fine beside the button like so
using this code
<RelativeLayout
android:id="#+id/readBookContainer"
android:layout_below="#+id/image"
android:layout_marginLeft="#dimen/margin_medium"
android:layout_alignRight="#+id/ratingBar"
android:gravity="center"
android:layout_width="300dp"
android:layout_height="40dp">
<Button
android:id="#+id/readBook"
android:background="#drawable/button_read_now"
android:elevation="#dimen/margin_xsmall"
android:singleLine="true"
android:textSize="14sp"
android:text="#string/download"
android:layout_width="200dp"
android:gravity="left"
android:layout_height="match_parent"
android:textColor="#color/book_item_bg" />
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:tint="#000000"
android:layout_toLeftOf="#id/readBook"
android:layout_marginRight="20dp"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
however i can't seem to be able to do this:
i tried stuff like this (framelayout, relative layout)..
<FrameLayout
android:id="#+id/readBookContainer"
android:layout_below="#+id/image"
android:layout_marginLeft="#dimen/margin_medium"
android:layout_alignRight="#+id/ratingBar"
android:gravity="center"
android:layout_width="100dp"
android:layout_height="40dp">
<android.support.v4.widget.ContentLoadingProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:tint="#000000"
android:layout_gravity="right|center"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
<Button
android:id="#+id/readBook"
android:background="#drawable/button_read_now"
android:elevation="#dimen/margin_xsmall"
android:singleLine="true"
android:textSize="14sp"
android:text="#string/download"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/book_item_bg" />
but it doesn't work.. (i tried substituting the library progress bar with android's but no luck).. ideas?
update
this is what the final thing looks like (based on the correct answer below):
<LinearLayout
android:id="#+id/readBook"
android:background="#drawable/button_read_now"
style="#style/Widget.AppCompat.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="#string/download"
android:textAppearance="#style/TextAppearance.AppCompat.Button" android:textColor="#FFFFFF"/>
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:indeterminate="true"
android:visibility="invisible"
android:tint="#ffffff"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
</LinearLayout>
Starting from API level 21, a default Button (which is called a raised button in Material Design) has a resting elevation and a pressed elevation.
For example in API level 23 The values are 2dp and 6dp respectively.
Your ProgressBar is in the correct position, however it's below the Button because its elevation is 0.
So by simply adding an elevation greater than 6dp to your ProgressBar you can make it appear above the button.
android:elevation="7dp"
Alternatively, you can create a layout to mimic a button and give it a button style:
<LinearLayout
style="#style/Widget.AppCompat.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Button"
android:textAppearance="#style/TextAppearance.AppCompat.Button"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
The second approach is more forward compatible since the elevation might change in a future release.
For example in API level 21 the values were 1dp and 3dp
<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>
This is API level 23
<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">2dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">4dp</dimen>
You can wrap it to the RelativeLayout.
create parent RelativeLayout having background same as of your button.
Using Buttons will add the borders to view so you can use Textview with selector.xml which will work as Button. check here.
place Textview inside the RelativeLayout and align the ProgressBar to the Right of Textview.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_read_now"
>
<TextView
android:id="#+id/readBook"
android:gravity="center"
android:clickable="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:background="#drawable/selector"
android:singleLine="true"
android:textSize="14sp"
android:text="download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white" />
<android.support.v4.widget.ContentLoadingProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/readBook"
style="?android:attr/progressBarStyleSmall"
android:visibility="visible"/>
</RelativeLayout>
The problem is in Button style. You can find more information in this answer https://stackoverflow.com/a/32898915/1554094
Remove following
android:layout_toLeftOf="#id/readBook"
from
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:tint="#000000"
android:layout_toLeftOf="#id/readBook"// remove this
android:layout_marginRight="20dp"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
android:layout_toLeftOf="#id/readBook"
have 2 text views 1 next to another (using layout_toLeftOf attribute) and I'm trying to place a button above each one of the text views:
1) if I'm using above, alignLeft and alignRight attributes on the button, the button width and height enlarges to fit the size of the text views
2) so I thought of using linear layout so it will fit to the size of the textview , and then place a button with layout_gravity="center", but it's not centered, it's aligned to the left.
Here is the code(its all inside a RelativeLayout):
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/countdown_hours_tv"
android:layout_alignLeft="#id/countdown_hours_tv"
android:layout_alignRight="#id/countdown_hours_tv">
<Button
android:layout_width="#dimen/plus_minus_button_size"
android:layout_height="#dimen/plus_minus_button_size"
android:layout_gravity="center"
android:background="#drawable/plus_sign_button"
android:onClick="increaseHourClicked"/>
</LinearLayout>
<Button
android:layout_width="#dimen/plus_minus_button_size"
android:layout_height="#dimen/plus_minus_button_size"
android:layout_below="#id/countdown_hours_tv"
android:layout_alignLeft="#id/countdown_hours_tv"
android:layout_alignRight="#id/countdown_hours_tv"
android:background="#drawable/minus_sign_button"
android:onClick="decreaseHourClicked"/>
Try using FrameLayout for putting one view on top of another, which is in your case a button on top of textView.
Try adding the Button and the TextView inside a LinearLayout with vertical orientation. Something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/layout1"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
I have a simple layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
and this is the output:
But I want the button with the background to stay the same size as it would without an image as a background (the right one). Basically, I want to "place" the button over the image so that the center of the image is on the button background, but the button doesn't resize to fit the whole background.
I have tried android:scaleType="centerCrop" on the Button but it didn't change anything. Any help is appreciated, thanks
Edit The size of the button needs to wrap_content because the text is dynamic
The button width and height are set to wrap_content. In this case, the background Image is a content, too.
Simply change width and height to the value you want:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/button6"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
If you want all buttons to have the same size, consider creating a dimen value:
Dimen
<resources>
<dimen name="button_width">100dp</dimen>
<dimen name="button_height">50dp</dimen>
</resources>
Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="#dimen/button_with"
android:layout_height="#dimen/button_height"
android:layout_weight="1"
android:background="#drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/button6"
android:layout_width="#dimen/button_with"
android:layout_height="#dimen/button_height"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
Also, consider using a ImageButton for your purpose.
ImageButton
EDIT
Try this out:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_background"
android:layout_alignStart="#+id/buttonId"
android:layout_alignEnd="#+id/buttonId"
android:layout_alignTop="#+id/buttonId"
android:layout_alignBottom="#+id/buttonId"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonId"/>
</RelativeLayout>
Additionally, add a scaleType to the ImageView to make it centered, streched, whatever...
android:scaleType="center"
EDIT 2
adding padding to the button works for me:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_settings"
android:layout_alignStart="#+id/buttonId"
android:layout_alignEnd="#+id/buttonId"
android:layout_alignTop="#+id/buttonId"
android:layout_alignBottom="#+id/buttonId"
android:scaleType="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:text="This is a button with a very long text that may take up multiple lines and stuff"
android:id="#+id/buttonId"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_settings"
android:layout_alignStart="#+id/buttonId2"
android:layout_alignEnd="#+id/buttonId2"
android:layout_alignTop="#+id/buttonId2"
android:layout_alignBottom="#+id/buttonId2"
android:scaleType="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a button with a very long text that may take up multiple lines and stuff"
android:id="#+id/buttonId2"/>
</RelativeLayout>
Note: You can't really see the paddingStart and paddingEnd in the screenshot, but it works just fine.
To expand on the nine-patch suggestion, Android supports the ability to use a nine-patch image to scale an image for a button/view group to any size. One caveat is that the image has to be one that fits the nine-patch requirement -- generally speaking, image where the corners are constant, and the middle/edges must be able to scale to any dimension. If your image is a photo for instance, it won't work. Most nine-patch images have a solid color center and 'simple' edges.
The first step is to create a nine-patch drawable in your drawable folder that references your nine-patch image. The nine-patch image should have a filename similar to *.9.png.
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/button_image" />
Once this is done, you can add the background property to the Button and it should scale seamlessly with the content (the background property below should refer to the <nine-patch> XML resource you created above.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_background"
android:text="My button"/>
I will note that your image in particular, with the horizontal lines, looks like a bad candidate for the nine-patch solution, but it might be worth a look if you're flexible on the image used.
Please have a look at the following code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#373734"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backToLanguageSelectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:paddingTop="5dp"
android:src="#drawable/thunderbolt" />
<ImageView
android:id="#+id/internetButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/globe_small_2" />
<Button
android:id="#+id/giveUpButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="350dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="Button" />
</LinearLayout>
This is a common layout code which I am using for all the android activities. The problem is the button, I want it to move to the most right corner. Margin thing not seems to work properly because in different devices the button is in different places.
How can I move this to the most right corner which will be displayed same in all the devices?
I believe you could add a view between your second ImageView and your button, and set it to layout_width="0dp", layout_weight="1".
And remove the left margin of your button.
User Relative layout instead. And apply android:layout_alignParentRight="true" to your Button.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#373734"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backToLanguageSelectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:paddingTop="5dp"
android:src="#drawable/social_share" />
<ImageView
android:id="#+id/internetButton"
android:layout_toRightOf="#+id/backToLanguageSelectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/social_share" />
<Button
android:id="#+id/giveUpButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="Button" />
have you tried android:layout_gravity="right"?
Use RelativeLayout and set its height to be as small as you want. This way a small part of your screen will be filled. When you use RelativeLayout, you can use android:layout_alignParentRight="true" to put any item at right. Now, instead of button, you can use image and set its android:scaleType="centerInside" if there are problems with the buttons scaling.
I was having the same problem as you and I sove it using RelativeLayout.
It can be done with RelativeLayout
<Button
android:id="#+id/giveUpButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="350dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="Button"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />