I am using a TableLayout with TableRows as my main activity.
Inside the TableLayout is a Radio Group containing 2 Radio Buttons inside the activity (the Radio Group being inside a table row). I want to be able to align the rightmost radio button to the right edge screen, so the "gap" is between the left radio button and right button (instead of after the right radio button). i.e.
So instead of having
| (x) (x) gap |
I will have
|(x) gap (x)|
where (x) are the Radio Buttons and | are the edges of the screen
I can use gravity (center_horizontal) to put both the buttons in the middle (i.e. | gap (x)(x) gap|) however I can't seem to be able to split them the way I want as said before
All you need to evenly space an arbitrary number of buttons horizontally across the screen:
RadioGroup has to have
android:orientation="horizontal" &
android:layout_width="fill_parent"
Each radio button has to have
android:layout_weight="1", except
the rightmost button (to make it
line up on the right edge of the
screen)!
This took me hours to figure out.
Here is some example code, with a bonus of two text labels and the right and left edges of the screen, for a survey app.
<RadioGroup
android:id="#+id/radio_group"
android:orientation="horizontal"
android:layout_below="#id/question"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
>
<RadioButton
android:id="#+id/strong_disagree_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"
/>
<RadioButton
android:id="#+id/disagree_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/disagree"
/>
<RadioButton
android:id="#+id/neutral_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/neutral"
/>
<RadioButton
android:id="#+id/agree_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/agree"
/>
<RadioButton
android:id="#+id/strong_agree_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
</RadioGroup>
<TextView
android:id="#+id/disagree_label"
android:text="#string/strongly_disagree_txt"
android:layout_below="#id/radio_group"
style="#style/TextAppearance"
android:visibility="gone"
/>
<TextView
android:id="#+id/agree_label"
android:text="#string/strongly_agree_txt"
android:layout_below="#id/radio_group"
android:layout_alignParentRight="true"
style="#style/TextAppearance"
android:layout_width="wrap_content"
android:visibility="gone"
/>
Found my solution. A combination of weights and gravity and removing the margins. The radio group can have layout_width="fill_parent". Each radio button should have layout_weight="1", but the layout_width for each radiobutton must still be specified to override the default of "37" which I guess is the default radio button image width.
<RadioGroup android:id="#+id/overall"
android:layout_width="fill_parent" android:layout_height="80dp"
android:gravity="center"
android:orientation="horizontal">
First button should have:
android:layout_weight="1"
android:layout_gravity="center|left"
Last button should have:
android:layout_gravity="center|right"
Note: all buttons have layout_gravioty set, but no layout_weight setting for the right most button!
Did you ever find a solution to this? My intermediate solution might help, but it's not the full picture for me. I've been able to do this by setting specific widths, but this does not allow the view to resize to fit the screen width:
<RelativeLayout
android:id="#+id/overall_layout"
android:layout_width="290dp" android:layout_height="wrap_content">
<RadioGroup android:id="#+id/overall"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton android:id="#+id/overall_1" android:tag="1"
android:button="#drawable/radio_1"
android:layout_width="50dp"
android:layout_marginRight="10dp"
android:layout_height="wrap_content"></RadioButton>
<RadioButton android:id="#+id/overall_2" android:tag="2"
android:button="#drawable/radio_2"
android:layout_width="50dp"
android:layout_marginRight="10dp"
android:layout_height="wrap_content"></RadioButton>
<RadioButton android:id="#+id/overall_3" android:tag="3"
android:button="#drawable/radio_3"
android:layout_width="50dp"
android:layout_marginRight="10dp"
android:layout_height="wrap_content"></RadioButton>
<RadioButton android:id="#+id/overall_4" android:tag="4"
android:button="#drawable/radio_4"
android:layout_width="50dp"
android:layout_marginRight="10dp"
android:layout_height="wrap_content"></RadioButton>
<RadioButton android:id="#+id/overall_5" android:tag="5"
android:button="#drawable/radio_5"
android:layout_width="50dp"
android:layout_height="wrap_content"></RadioButton>
</RadioGroup>
<TextView android:text="left" android:id="#+id/left"
android:layout_below="#id/overall"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<TextView android:text="right" android:id="#+id/right"
android:layout_below="#id/overall"
android:layout_alignParentRight="true"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</RelativeLayout>
Note there is no margin on the last button.
I am trying to have 5 custom buttons in a radio group, with the 1st left-justified and the last right-justified. The buttons are exactly 50 pixels wide and I don't want any text associated with the buttons individually. The 2 texts below are left and right-justfied in the relative layout. Using "layout_gravity" has no effect and "layout_weight" adds padding to the right of each button, which causes the right-most button to no longer be justified.
Much hair-pulling on this.
If i understand you question right, you can also try next code inside RadioGroup:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Related
I want to place text in a button on the extreme edges that is
Click on the left part of the button and Here on the right part of the button. How this can be achieved.
i have used the TAGandroid:text="Click Here", as the button is on the full screen i want these words to be at extreme edges
Use the below RelativeLayout. You can customize the values. Here you can make all of the RelativeLayout and TextViews act like a button by setting them OnClickListeners.
<RelativeLayout
android:id="#+id/mybutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="#3983B1" >
<TextView
android:id="#+id/leftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Click"
android:textColor="#ffffff" />
<TextView
android:id="#+id/rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Here"
android:textColor="#ffffff" />
</RelativeLayout>
The layout looks like:
I am trying to display 4 ImageButtons at the bottom of the layout. I am able to get only 3 ImageButtons. The fourth ImageButton is not visible. and here is my code for that.
I am using Relative Layout for to display the application.
<ImageButton
android:id="#+id/Button1"
android:layout_weight="1.0"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:longClickable="true"
android:layout_width="wrap_content"
android:layout_height="75sp"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton2"/>
<ImageButton
android:id="#+id/Button2"
android:layout_gravity="bottom"
android:layout_toRightOf="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="75sp"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_weight="1.0"
android:layout_marginLeft="2dp"
android:longClickable="true"/>
<ImageButton
android:id="#+id/Button3"
android:layout_gravity="bottom"
android:layout_toRightOf="#+id/Button2"
android:layout_height="75sp"
android:layout_width="wrap_content"
android:layout_weight="1.0"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_marginLeft="2dp"
android:longClickable="true"/>
<ImageButton
android:id="#+id/Button4"
android:layout_gravity="bottom"
android:layout_height="75sp"
android:layout_width="wrap_content"
android:layout_weight="1.0"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_marginLeft="2dp"
android:longClickable="true"
android:layout_alignParentRight="true"/>
Put it in a LinearLayout with weights and align this LinearLayout tot he bottom of the parent like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/ib1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Note that this method will decrease the performance somewhat.
First you need to remove this from your ImageButton attributes if you want to keep using RelativeLayout as their parent layout:
android:layout_weight="1.0"
It is used in LinearLayout, Lint should be giving you a warning about it (invalid layout param in RelativeLayout).
If you want your 4 buttons to show in the bottom of the screen you need to include
android:layout_alignParentBottom="true"
in all 4 ImageButtons, I tried the xml you provide and only the 1st button is showing in the bottom.
And last but not least, if you want your button to have the same size to have some design consistency, I would suggest putting them in a horizontal LinearLayout with
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
and configure the ImageButtons with
android:layout_width="0dp"
android:layout_weight="1.0"
then include that LinearLayout in your RelativeLayout.
Another thing : since you're using
android:layout_width="wrap_content"
for your ImageButtons, you need to make sure the image is not too wide, otherwise some of your buttons might not be shown on screen because the first one(s) is taking too much space, leaving the last one(s) to the right of your screen.
On a side note, I hope you're not trying to make a iOS-style lower tab bar, this is frowned upon in Android, more info here ...
Have a good one !
Like some people say, in the last button, you don't have android:layout_toRightOf = "#id/Button3" so it's going to be in the top of the layout.
Other way to do this that I usually do is:
android:layout_toRightOf = "#id/Button1"
android:layout_alignbottom = #id/Button1"
It's going to align with the bottom of the button1. I do this because sometimes this button isn't align with the other one, depends of the layout.
At the last ImageButton you don't have:
android:layout_toRightOf="#+id/Button3"
You will need this if you want it to be at the bottom.
I would also suggest that you remove some of your code:
android:layout_gravity="bottom"
android:layout_weight="1.0"
This only works in FrameLayout or LinearLayout.
If you want to know for sure every ImageButton is at the bottom of the screen use what you used for the first button:
android:layout_alignParentBottom="true"
So in my layout, I've got three buttons on the same line, one left, center and right aligned. I also have TextViews below the buttons to serve as labels, but they too are aligned left, center and right respectively. I'd like them to instead be centered below the buttons and on the same line as one another, but I can't figure out how to do this without explicitly setting coordinates, which will then break on some phones. I tried setting various weights and layout options, but it just doesn't work how I'd like. Is there a way to do this in a RelativeLayout? Or maybe it's just not possible. Finally, I've got more three TextViews on the same line and one button on the bottom. I would like to align as shown bellow:
http://imgur.com/vYuqk
Thanks in advance.
You can't center one element below another with RelativeLayout. You could try a horizontal LinearLayout with three RelativeLayouts (one for each column). You could contain the whole thing in a vertical LinearLayout to get the bottom button.
TableLayout or GridLayout are possibilities as well.
As people suggested, there is no way to center a View below another View in RelativeLayout. You could maybe use this hack if you can confirm that the TextView width need not be more the Button width. The solution is: you make the TextView align its left and right edge to the Button above. Then set the gravity of the TextView to center so that the text inside TextView is centered.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="130dp"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_centerHorizontal="true"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignParentRight="true"
android:text="Button3" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button1"
android:layout_alignRight="#id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button2"
android:layout_alignRight="#id/button2"
android:layout_below="#+id/button2"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button3"
android:layout_alignRight="#id/button3"
android:layout_below="#+id/button3"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt3" />
</RelativeLayout>
I have this header:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip">
<Button android:id="#+id/home"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Home"
/>
<Button android:id="#+id/questions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Questions"
/>
<Button android:id="#+id/questions"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Questions"
android:layout_toRightOf="#+id/home" />
<Button android:id="#+id/businesses"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Businesses"
android:layout_toRightOf="#+id/businesses"
/>
<Button android:id="#+id/learn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Learn"
android:layout_toRightOf="#+id/learn"
/>
<Button android:id="#+id/extra_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Help"
android:layout_toRightOf="#+id/learn"
/>
</RelativeLayout>
and for some reason, the buttons display 50% on top of each other all bunched up, each covering half of the other.
Any idea what is wrong with my layout?
Thanks!
You are using a relative layout, you need to manage both horizontal and vertical alignment. For example, all the android:layout_toRightOf are used for horizontal positioning, you need to also add attributes to handle the vertical positioning.
All the possible attributes are found here:
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
UPDATE
Seeing your comments below, it seems you just want to have one horizontal row. In that case, just make sure each is aligned to the previous one(But then why not use a linear layout?)
Check your id's though, and #+id/learn is aligned to the right of itself. Revisit that. And you also have a button right after "Home" that isn't handled at all.
I have a textview on the left side and RadioGroup on the right side. Before I put my buttons in a radio group I had the buttons on the right side of the screen. What I am doing wrong after putting it in a RadioGroup?
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/radioButton1"
android:layout_alignParentLeft="true"
android:text="#string/hair"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/Yes" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/radioButton1"
android:layout_below="#+id/radioButton1"
android:text="#string/No" />
</RadioGroup>
</RelativeLayout>
All of the "align" parameters that you have set on the buttons individually (like layout_alignParentRight) are no longer valid because the buttons are inside of a RadioGroup, which is a subclass of LinearLayout. In order to right-align the group as a whole, you need to add the proper parameters to the RadioGroup itself.
Also, you may want the RadioGroup width to wrap_content instead of fill_parent. Otherwise any horizontal layout alignments you do will likely not be visible with the container trying to fill up all available space.
HTH
you can also add this to your RadioGroup and it will work fine aswell!
android:gravity="center|left"