I want the text centered in the Button. But whenever I add android:drawableLeft xml attribute to the Button, it offsets the text. How can I fix that?
The only way I managed to fix it is by setting a negative number in android:drawablePadding:
But I'm looking for a cleaner solution to achieve it.
unfortunately that is the Button behaviour and I agree with you that negative padding is kind of a dirty hack, so I'll propose two other hacks that to me sounds a little less dirty because they rely on expected behaviour (negative padding although works it's not by design):
set android:paddingRight on the button to the size of the drawables
create a drawable with the same size of the left drawable but with all transparent pixels and put as right drawable.
So I ended up going with the lesser of the evils, and that's placing the drawable and the text inside RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Button.ButtonGray"
android:id="#+id/share_button">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btn_share"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:textStyle="bold"
android:layout_centerInParent="true"
style="#style/TextNormalWeight"
android:text="#string/post_share"/>
</RelativeLayout>
The RelativeLayout then receives click events and acts and looks like a button.
android:gravity="center_vertical"
Unfortunately there's no clean way to do this. One fairly straightforward way is to set a transparent ColorDrawable of equal size on the opposite side of the button.
val drawableSize = button.height // adjust this as desired of course
realDrawable.setBounds(0, 0, drawableSize, drawableSize)
val emptyDrawable = ColorDrawable(Color.TRANSPARENT).apply {
setBounds(0, 0, drawableSize, drawableSize)
}
button.setCompoundDrawables(realDrawable, null, emptyDrawable, null)
It works with:
android:gravity="center"
Related
There is some closeable view in my app and it has a close button in header. I want make this button borderless and small.The code:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#android:drawable/ic_menu_close_clear_cancel"/>
In result the button is borderless but has much empty place around cross image (button is hitted on screenshot to make empty space visible)
How could I fix it?
You should use:
android:background="?selectableItemBackgroundBorderless"
Added
android:minHeight="0dp"
android:minWidth="0dp"
android:padding="2dp"
The result
Also I'll use negative margins to place the button closer to corner.
You can use the following on your ImageButton to remove the 'border':
android:background="#android:color/transparent"
or
android:background="#null"
If you would like change the background when the user clicks the button you can create a selector. Example ImageButton doesn't highlight on click with Transparent background.
With the introduction of ConstraintLayout, you can use constraints to reduce the width of the borderless ImageButton, that's way too wide by default, by constraining it to be as wide as the height:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_closeable_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/action_close"
android:src="#android:drawable/ic_menu_close_clear_cancel"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I don't recommend you to make it any smaller than this because the touch target needs to be at least 48dp x 48dp, as for Google's Material Design guidelines, otherwise a user would have a hard time trying to touch it.
If you really need it to look like it's closer to the edges of the view, you can always use an image that's not centered (has transparent padding on one or two sides), but I'd try my best to avoid doing this workaround and try rethinking my app's design in order to accommodate the button as it is.
use textView for that..
and use textview.OnTouchListener
finally onTouch change the color of text.. thats it
or else in your code just use
android:background="#null"
I'm trying to achieve the following layout: a fixed width TextView aligned to the left of its parent, with the text inside it aligned to the right side of that TextView (that's why fixed width, can it be done other way?) and the rest of the parent is filled with a drawable (simple line). Like this:
It's a ListView containing 2 types of rows and the layout for the rows with lines is quite trivial - LinearLayout with TextView and ImageView (I can post the exact code later if needed). And I'm getting a warning that it could be replaced with a single TextView with compound drawable.
I'm all for optimization so I really tried to follow that advice. Unfortunately I wasn't able to get the same result - the line is either constrained to TextView's width or text is aligned to the right side of the ListItem, now to fixed position.
Am I missing something?
Edit: Apparently it is not actually possible and since there are some other complications (the drawable is now a level-list drawable, which is not always a line and sometimes it has a non-fixed height that I have to set) I will leave it as it is now - linear layout, containing one TextView and one ImageView.
I don't think that you're missing anything. The TextView compound drawable features are not very customizable and in general are not worth the time you spend trying to get them to look right. Some lint warnings are a little overzealous and premature.
The optimization that the lint refers to is something that is better attributed for a fixed size image. In your case, the line has to stretch the rest of the screen length and as such it is not something that can be done with a textview with compound drawable. This kind of lint warning is more of a suggestion rather than something that MUST be done and is detected by just checking for a linear layout with only a textview and an imageview rather than checking what would need to go in the image view. If you already have it working the way you did it I think you should leave it alone.
Your view create from this -
<?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:orientation="horizontal" >
<TextView
android:id="#+id/time"
android:layout_width="#dimen/today_time_width"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="right"
android:layout_marginRight="5dp" />
<ImageView
android:layout_gravity="center"
android:id="#+id/border"
android:layout_width="match_parent"
android:layout_height="#dimen/today_current"
android:src="?attr/item_boundary" />
</LinearLayout>
There is no way to achive this using only standart TextView. If you really want to reduce view count you can create your custom TextView class, set layoutWidth to matchParent and draw line from text end to right border. But it's not worth to be doing. Some extra views won't slow your list.
I am not sure if you will be able to achieve what you really want to , but then you could change the linear layout in the link you posted to something like this:
<RelativeLayout
android:id="#+id/relTrial"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtTime"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="right"
android:text="12:45 AM"
android:layout_alignParentLeft="true"/>
<LinearLayout
android:id="#+id/lnrSep"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:gravity="bottom"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:background="#android:color/darker_gray"
android:layout_toRightOf="#+id/txtTime"
android:layout_alignParentRight="true"></LinearLayout>
</RelativeLayout>
This way the time text will be right aligned although being at the left side, and the line will also be visible.
Hope that helps.
If I got you right, you want to add bottom border to list view item?
What about to try this:
android:drawableBottom="#drawable/line"
My question is very simple.
How do I center the text on a button in android?
I tried to set padding to 0, gravity to center but the result when i run it still that the text is horizontal centred but not vertical. The text is a bit shifted to the bottom.
<Button
android:id="#+id/btnSame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:background="#drawable/layout_button_different"
android:gravity="center_vertical|center_horizontal"
android:height="30dp"
android:padding="0dip"
android:text="#string/equals"
android:textColor="#drawable/layout_button_different"
android:textSize="50dp"
android:width="70dp" />
My be also relevant:
In activity I do this:
btnEquals.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.up2), null, null);
btnEquals.setPadding(0, 5, 0, 0);
btnEquals.setTextSize(15);
This works but after this I set this:
btnEquals.setCompoundDrawables(null, null, null, null);
btnEquals.setPadding(0, 0, 0, 0);
Result is a bad vertical alignment.
It's easy peasy, you can put this:
android:textAlignment="center"
Your existing layout cannot hope to center the text due to the sizes you have selected. You've set the button height to 30dp and your textSize is 50dp, and for whatever reason, Android is unable to deal with that and center the text. If you make your button larger or your text smaller you'll see that the centering works.
There are three systems to consider. The xml layout designer, the simulator, and real phone. The text in the button if you specify gravity="center" will look like this.
In xml layout designer it will look like the leftmost letter is in the center of the button but the rest of the letters are to the right. (looks incorrect)
In simulator, the text shows well in the center. (correct)
In phone, the text shows well in the center. (correct)
You can just add this line to your Button in layout xml code:
android:gravity="center"
You can also use negative numbers in setPadding. This may help if your font is large and your button is small. Try also setting the top or bottom to a more negative number if it's still off center.
You just have to set layout_height to wrap_content and vary the padding attribute for whatever value you want
<Button
android:id="#+id/AnswerE"
style="#style/defaultbuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="AnswerCheck"
android:text=" E "
android:textStyle="bold" />
This worked for me
I have a row of buttons with custom 9 patch images, and variable length text. I would like the buttons to be the same height. When the text is long enough to wrap, it expands the button size, making the button with wrapped text bigger than the others. I'm laying these buttons out in code in linear layouts. I can fix the size of the button, but then it just cuts off the bottom. How can I make the text take up more of the padding space of the button, so that the text butts up against the top line of the button?
9patch content area is just used to set a padding. If you change the button's padding you will override the one set by the 9patch.
edit
try something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:text="ButtonButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="0dp"
android:paddingBottom="10dp"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
</LinearLayout>
this way the button will be as high as the others. Sadly, I don't know if it depends on the original button's 9patch that might have asymmetrical paddings, but I can't make the text align with that from other buttons (I think gravity is by default set to center). Maybe with your 9patch it works though. (EDIT: oh, but if you'll have two lines of text who cares about alignment)
Ultimately I was unable to find a nice way of doing this without creating a custom view class.
I have a button. It seems to have bottom padding I cannot get rid of:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Foo"/>
In the resource editor, I can click the button, and you see the padding below the bottom edge of the button there. This seems to block me from properly centering the button vertically in a parent RelativeLayout.
I tried setting padding=0dip and layout_margin=0dip, no effect. That bottom padding persists.
Thanks
The padding is in the 9-patch of the buttons themselves.
I'd advise against trying to compensate because these graphics resources can change without notice. You'd be better off building your own 9-patch or editing the existing one to remove the padding.
setting android:layout_marginBottom="-5dp" for the button worked nicely for me.
I am late to answer this but thought to share if someone come across similar use case( Removing all the inner and outer padding in Button )
<Button
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-5dp"
android:layout_marginLeft="-5dp"
android:layout_marginRight="-5dp"
android:layout_marginTop="-5dp"
android:minHeight="-2dp"
android:minWidth="-2dp"
android:text="TextView"
android:textSize="12sp" />
Hmn really strange. Never noticed that. Probably because u usally want a little space around your buttons.
Also tried margin/padding=0dp and did in fact not work.
You could set android:layout_marginBottom="-10dp" however :).