Develop Reference

Android - Button text center gravity not working

I have this XML layout in my App (example of one button):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollViewMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff0e8" >
///some views
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
///some views
</RelativeLayout>
</ScrollView>
But when I start my app at Android 4.3, the text of buttons isn´t in center of button. Look at the screenshot (in red rectangle):
Where can be problem?
EDIT:
Whole layout

When you specify:
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
It does make the bottom/right/top edge of your button match the bottom edge of the given anchor view ID & accommodates bottom/right/top margin, but while doing that, the android_gravity does not take the resultant height/width into consideration.
So the gravity of the text is center according to wrap_content for layout_height and layout_width.
You can verify that by setting values for layout_height and layout_width (Eg. 200dp and 100dp to try with) and you will get the text with gravity center but for that height and width.
To confirm the same, what you can do is use a container LinearLayout for your Button like:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckStastnych"
android:layout_alignRight="#+id/chckStastnych"
android:layout_alignTop="#+id/chckStastnych"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118" >
<Button
android:id="#+id/btnVysledkyStastnych"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkyStastnych"
android:text="Archiv výsledků"
android:textStyle="bold" />
</LinearLayout>
Set the gravity of LinearLayout as center and then center the Button within or as shown above, use layout_gravity for the button to center it in parent LinearLayout.
This will work as a solution when you do that for all 4 buttons, however there might be better options if you restructure your xml and avoid this kind of nesting.

Try This:
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center_vertical"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />

Issue with RadioButton in AlertDialog

I have two RadioButtons within a View that is set within an AlertDialog. Although the text for the first one appears horizontal, the text for the second button comes out vertical. Initially, I thought this was due to the View not filling the width of the dialog itself, but that doesn't appear to be the problem (I've tried making the text smaller and the I get the same result). I'm sure I've come across this in the past, but I can't remember how I resolved it. I'm using RadioButtons elsewhere in my app within AlertDialog's with no issue, so I'm pretty stumped. This is what it looks like. At no point do I hard-code the width of any layout or item in dp; I only ever use match_parent or wrap_content:
So, any help in trying to resolve this would be greatly appreciated!
My layout (LayoutInflator is called on it and then values/listeners are applied):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/template"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:orientation="horizontal">
<CheckBox
android:id="#+id/check_box"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.45"
android:textSize="16sp"
android:textColor="#color/Black" />
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:orientation="horizontal"
android:enabled="False">
<RadioButton
android:id="#+id/radio_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textDirection="ltr"
android:enabled="False"
android:textColor="#color/Black"/>
<RadioButton
android:id="#+id/radio_button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:enabled="False"
android:textColor="#color/Black"
android:checked="true"/>
</RadioGroup>
</LinearLayout>
Inflating the layout like this works fine and gives the desired output:
LinearLayout inflatedLayout = (LinearLayout) this.getLayoutInflater().inflate(R.layout.template, null);
currDialog = CreateDialog.getDialog(this, "Title", inflatedLayout );
currDialog.show();
However, when I add this to a TableRow object, which is then added to a TableLayout object, it gives the unexpected result. I'm going to try with a RelativeLayout first.

You're using layout weights, and you are forcing your RadioGroup take up only 55% of the space. Since the space is not enough, the text goes to vertical. To be 100% sure that your radiogroup will fit, you will need to set it's width to wrap_content.
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:enabled="False">
You might also want to consider changing the orientation to vertical, in which case it will probably fit with only 55% of the space, but I still highly recommend wrap_content

android:id="#+id/radio_button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
There isn't enough available space for the second RadioButton to fit it's text, so it stretches the height to be able to fit the text.

Right-align button with dynamic text

In my user interface, I have a fragment with a RelativeLayout. At the bottom of this RelativeLayout, I have two buttons: one should be on the left, the other on the right, with empty space between them. The left one has static text (but because the app will be translated, I don't know what width it will be). The text in the right one can change arbitrarily.
Since I already have a RelativeLayout, I started out trying to lay them out inside the RelativeLayout like this:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/right" />
But this has the problem that if the text in the right-hand button is too long, it will overlap the left-hand button.
I next tried to constrain the left-hand edge of the right-hand button by adding android:layout_toRightOf="#+id/button_left", but with this, the right-hand button would always fill the available width. When the text in the right-hand button is short, I want it to shrink to leave a gap between it and the left-hand button.
I next tried to use a LinearLayout, so I could set layout_gravity on the buttons, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:drawableLeft="#drawable/pass"
android:text="#string/right" />
</LinearLayout>
Still no joy. I expected this to work, but the right-hand button stays just to the right of the left-hand button, instead of sticking to the right edge of the screen. I can see in the layout editor that the LinearLayout correctly fills the width of the screen, but the button stubbornly stays next to its friend.
I tried adding android:layout_weight="1" to the right-hand button too, but again, that made it always expand to fill the available space.
Next, I tried to add an empty View between the buttons, to expand and force the right button to the right, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</LinearLayout>
This works fine when the text is short, just like my original RelativeLayout did, but now when the text on the right-hand button is long, its width is limited by the width of the screen, not the available space, so it extends off the right-hand edge of the screen. Again, I can see in the layout editor that the LinearLayout has the correct width, but the button is extending ourside its parent's bounds. This happens even if the button has android:layout_width="match_parent". Oddly enough, increasing the layout_gravity on the right-hand button makes it smaller until it fits inside the available space, but of course that also makes it fill the space when the text is small.
I can't believe it's this hard to get this right. I've seen half a dozen similar questions on SO, but they all have easy workarounds. If the button text is fixed, you can set the margin to a fixed width by hand. If the expanding widget is a TextView instead of a Button, you can just let it expand and use android:gravity to move the text inside the widget, but you can't do that with a button because the background and borders are visible on the screen.

It turns out that adding the LinearLayout was the wrong approach. Using android:layout_toRightOf="#+id/button_left" android:layout_alignParentRight="true" works fine with a TextView, because that can soak up the available space without changing its appearance. Instead of trying to change the layout, I just need to use something that can expand to fill the available space and contain the Button: a FrameLayout. Here's the working code, which still goes inside my root RelativeLayout:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/button_left" >
<Button
android:id="#+id/Turn_button_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</FrameLayout>
Now, the FrameLayout always takes up all the space to the right of the left-hand button, and lays out the right-hand button inside that space using android:layout_gravity="right".
This answer only adds one extra layout, but if someone has a way to do it only using the existing RelativeLayout, to minimise the number of ViewGroups in the layout, I'll accept that as a solution.

IF you can live with the constraint, that the right button only can take up to up half of the available space, this could be a solution for you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A short text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="A very long text which is limited to one half of the available space" />
</RelativeLayout>
</LinearLayout>

You could just use a TextView and make it look like a button. Create a dummy button, extract the background and set that background to the textfield programmatically.
(Not tested but should give it the apperance of a button)
Drawable d = button1.getBackground();
textView1.setBackground(d);
then you just set the onClickListener and that should yield what you're looking for. The TextView would take the place of the "button_right" in your first layout.
**Edit
Your xml would look something like this
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<TextView
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:maxEms="10"
android:text="TextView" />

Why are my "centered" objects slightly off-center in my RelativeLayout?

I wanted to make two equally-sized radio buttons with a custom background, text, and an image to the right of the text. Because of how different these are from a standard "Button", I made them using a clickable "RelativeLayout".
The text and the image are of different heights, but I want each one to be centered vertically in the button. I also want the combination of the text+image to be centered horizontally in the button. This second part is what I'm having trouble with; it's off-center, close to the left side. In the image below, the left side is what I want, but the right side is what's happening. The image on one of the buttons (the one with the longer text) is resized to be smaller, too... Though there is still plenty of space on the right side of the button.
Here is my code:
<LinearLayout
android:baselineAligned="false"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/my_button"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/button_textview"
android:text="#string/button_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/button_imageview"
android:layout_centerVertical="true"
android:src="#drawable/my_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
... same thing for the second button ...
</RelativeLayout>
</LinearLayout>
What am I doing wrong?

Use this as your button:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="MyButton"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/my_image"/>
</LinearLayout>
Now, you can place it in other parent views. To apply layout attributes to above button, place those attributes in the outer <LinearLayout> tag of above button.
Alternative:
You can set custom images to be drawn on sides(Left,Right,Top,Bottom) of a TextView using attributes like:
android:drawableLeft="#drawable/my_image"

Turns out the solution was adding
android:paddingRight="0dip"
strangely enough, even though I didn't put any padding there in the first place.

Scrolling Text Above Buttons, Buttons Fixed At Bottom

I'm having difficulty getting the GUI layout results I want in an Android app.
A brief description of what I want:
The GUI is to include two TextViews and four Buttons.
The four Buttons are to be laid out horizontally, all in the same row, and fixed at the bottom-right of the screen.
The first of the two TextViews is to start at the top of the screen, with text contents varying from one line to many dozens of lines - more than will fit on the screen without scrolling. So, scrolling is sometimes necessary to see all of the contents. Even when scrolling is necessary, the buttons are not to participate in the scrolling: they are to always remain fixed in a single row at the bottom-right of the screen. When scrolling is necessary, the scrolling text is to always be above the buttons - the buttons are not to overlay the text.
The second of the two TextViews is to appear immediately beneath the first TextView, and will normally only add one or two lines to the total length of text. When scrolling is necessary, the second TextView is to scroll with the first TextView, always appearing immediately beneath the first TextView.
Additional constraints include that I want the layout to look decent on all of the following Android devices, in both vertical and horizontal screen layouts:
Android 1.5 API3 QVGA MDPI (320x240) devices
Android 1.5 API3 HVGA MDPI devices
Android 1.6 API4 QVGA LDPI devices
Android 2.3 API10 WVGA800 devices
Everything with screens in between the above devices
I'll worry about tablets another day (like tomorrow).
--
I've tried many different combinations of Layouts, but nothing yet has come very close to the goal.
(With some of the layout combinations I tried, I can fix the buttons at the bottom-left of the screen with RelativeLayout, but everything I try with the scolling text always results with the text scrolling behind the buttons - the buttons overlay the text. I haven't figured out getting the buttons to align to the bottom-right.)
If anyone is up for helping me figure this out, the layout example xml below is a conversation starting point, but it definately fails to achieve the goal result, as demonstrated in the following screen shots, generated using this same layout example xml. (While some of the screen shots demonstrate the same problem, they help to show where I'm at with the different screens.)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 1. Text varies from a few lines to many more lines than what fits on the screen. Scrolling is necessary to see it all." />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 2. Short text entry sits below Text View 1." />
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 1" />
<Button
android:id="#+id/button_2"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 2" />
<Button
android:id="#+id/button_3"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 3" />
<Button
android:id="#+id/button_4"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 4" />
</LinearLayout>
</LinearLayout>
1.5_API3_HVGA_Horizontal_MDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.5_API3_HVGA_Vertical_MDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.5_API3_QVGA_240x320_MDPI - short_text:
Issue: 4th Button is smashed. Prefer text on first three buttons to wrap when necessary, leaving enough room to display 4th button.
--
1.5_API3_QVGA_320x240_MDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.6_API4_QVGA_Horizontal_LDPI - long_text:
Issue: When the text almost fills the screen, the row of buttons get smashed. The row of buttons should not be smashed, and should be fixed at the bottom-right of the screen. The text should scroll above the buttons.
--
1.6_API4_QVGA_Horizontal_LDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.6_API4_QVGA_Horizontal_LDPI - very_long_text, scrollbar at top:
Issue: The buttons are not on the screen. They should be fixed at the bottom-right of the screen.
--
1.6_API4_QVGA_Horizontal_LDPI - very_long_text, scrollbar at bottom:
Issue: The buttons are no where to be found, though the text scrollbar is at the bottom. They should be fixed at the bottom-right of the screen.
--
1.6_API4_QVGA_Vertical_LDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
Any advice?
--
Additional Info: When I try to use RelativeLayout, and fix the buttons at the bottom of the screen with android:layout_alignParentBottom="true", then my problem is that I don't know how to fix the bottom of the scroll view with the top of the buttons. Using android:layout_alignBottom="#id/buttons" just aligns the bottom of the scroll view with the bottom of the buttons, but then the buttons overlay the text, like this:
--
Update: The problem of fixing the buttons to the bottom-right, with the scrolling text above the buttons is resolved.
Here's the changed layout XML that works so far (paste more text into text view 1 if you want to see the scrolling):<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 1. Text varies from a few lines to many more lines than what fits on the screen. Scrolling is necessary to see it all." />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 2. Short text entry sits below Text View 1." />
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right">
<Button
android:id="#+id/button_1"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 1" />
<Button
android:id="#+id/button_2"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 2" />
<Button
android:id="#+id/button_3"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 3" />
<Button
android:id="#+id/button_4"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 4" />
</LinearLayout>
</LinearLayout>I have a remaining problem for which I'll post a new question.

Set your ScrollView's layout_height to 0dp and set its layout_weight to 1. That should push the buttons to the bottom of the screen but no further.

Change the layout used to a RelativeLayout, this will help you attach your buttons accross the bottom of the screen.
I also agree with the use of the layout_height="0dip" and layout_weight="1" on the scrollable that can be of varrying length.
EDIT
I just changed the code to this and it worked fine for me on my HTC Desire. It should hopefully work on your test cases. Ended up just using a linear layout, but it seems fine.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 1. Text varies from a few lines to many more lines than what fits on the screen. Scrolling is necessary to see it all." />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 2. Short text entry sits below Text View 1." />
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button_2"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button_3"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 3" />
<Button
android:id="#+id/button_4"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 4" />
</LinearLayout>
</LinearLayout>