I have a RadioGroup with radio buttons:
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/radioGroup1"
>
<RadioButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:checked="true"
android:text="AAA"
android:button="#null"
android:drawableLeft="#drawable/flag_icon"
android:drawableRight="#android:drawable/btn_radio"
android:drawablePadding="60dp"
android:id="#+id/radio2"/>
<RadioButton.../>
</RadioGroup>
As you see above, for the RadioButton I defined the following attributes:
...
android:button="#null"
android:drawableLeft="#drawable/flag_icon"
android:drawableRight="#android:drawable/btn_radio"
...
So that the radio button is located on the right side of the radio button text. The left side of button text is a flag icon.
In order to have spaces between button text and flag icon and button icon, I use android:drawablePadding="60dp" to space them.
However, with above code, the 60dp padding space is applied to both left drawable (flag icon) and right drawable (radio button), which ends up with radio text located in the middle between the two drawables.
I would like to have radio button text and left drawable(flag icon) has smaller space between, while radio button text and right drawable (radio button) has larger space between. How to define the different spaces for left drawable and right drawable of radio button ?
Simply check this:
<RadioButton
android:id="#+id/radio0"
style="#style/my_recording_title_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#null"
android:button="#null"
android:checked="true"
android:drawableRight="#drawable/presets_sel"
android:padding="12dp"
android:text="Play with EarPhones" />
<View
android:layout_width="fill_parent"
android:layout_height="3dp"
android:background="#drawable/line" />
<RadioButton
android:id="#+id/radio1"
style="#style/my_recording_title_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#null"
android:button="#null"
android:drawableRight="#drawable/presets_sel"
android:padding="12dp"
android:text="Play with internal speakers" />
</RadioGroup>
try this xml file or add Property android:gravity="center_horizontal|center_vertical" or android:gravity="center" in your Radio Button and remove padding
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/logo"
android:button="#null"
android:drawableRight="#drawable/ic_launcher"
android:gravity="center_horizontal|center_vertical"
android:text="RadioButton" />
</RadioGroup>
</LinearLayout>
This sort of thing comes up often. And the sad truth is that the limitations of using RadioGroup with RadioButtons severely limit your ability to make your layouts look right.
I posted a very detailed solution here that involves abandoning RadioGroups. I know it seems like a lot of work, but the code is very straight-forward. Until RadioGroups are implemented in a better fashion, this is the best solution I've found.
Good luck!
Related
I was trying to figure out how to fit a set of radiobuttons into the available space. The problem was that I was using a horizontal layout and the text beside each button made the whole radiogroup too big to fit. It looked ugly. What I wanted to do was to put the text for each radio button above the radiobutton.
This answer is actually WRONG. I discovered, with some additional testing, that putting the LinearLayouts and TextFields in the RadioGroup gives you a non-functional RadioGroup. The only way I could restore proper functioning was to remove the TextFields and LinearLayouts. I had to become a little more creative in how I arranged things in order to get stuff to fit.
It just goes to show that when you think you're being clever, you usually aren't. :)
------- Wrong Answer --------
I discovered that I could put layouts within the radiogroup, so I used a vertically oriented LinearLayout for each of the radiobuttons within the radiogroup. I included a textfield above each button and put the label text in there. I removed the label text from the button itself, and voila, I had a radiogroup with the labels for the buttons above the buttons.
Here's an example:
<RadioGroup
android:id="#+id/bar_display_filter_radiogroup"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:checkedButton="#+id/bar_filter_all"
android:orientation="horizontal" >
<LinearLayout
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:text="#string/bar_radiobutton_all_text"
style="#style/RadioButton"
/>
<RadioButton
android:id="#+id/bar_filter_all"
style="#style/RadioButton"
android:onClick="onFilterClick"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
style="#style/RadioButton"
android:text="#string/bar_radiobutton_enroute_text" />
<RadioButton
android:id="#+id/bar_filter_enroute"
style="#style/RadioButton"
android:onClick="onFilterClick" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
style="#style/RadioButton"
android:text="#string/bar_radiobutton_delivered_text"/>
<RadioButton
android:id="#+id/bar_filter_delivered"
style="#style/RadioButton"
android:onClick="onFilterClick"
/>
</LinearLayout>
</RadioGroup>
I hope this proves useful for someone else encountering the same problem.
I am working on an Android app where I have a radiogroup with 3 radio button.
The following is the code for the same:
<RadioGroup android:id="#+id/radioButtonGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" >
<RadioButton android:id="#+id/oneRadioButton" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:button = "#null"
android:text="#string/one_text"
android:gravity="center" >
</RadioButton>
<RadioButton android:id="#+id/twoRadioButton" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/two_text"
android:button = "#null" android:gravity="center">
</RadioButton>
<RadioButton android:id="#+id/threeRadioButton" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/three_text"
android:button = "#null" android:gravity="center" >
</RadioButton>
</RadioGroup>
From the code you can see that I have set android:button = "#null". I have done this just because I don't want the button and I just want the text.
My problem is that even when I have set button to null I am able to see a gap on left side text for each radio button, like this
| (gap)rbt1(gap)rbt2(gap)rbt3 |
| |
How do I remove this gap? I tried android:layout_marginLeft="-20dp" which made the text closer but this also made the button overlap each other.
Try to use android:background="#android:color/transparent" for radiobutton in xml file like this with android:button = "#null" also
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"
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" />
I want to create a simple layout like the following:
(o) Radio button A
(o) Radio button B [textedit]
[x] checkbox
For that I've created the following layout.xml:
<RadioGroup
android:layout_above="#+id/RadioButton_Count"
android:id="#+id/RadioGroup01"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<RadioButton
android:layout_height="wrap_content"
android:id="#+id/RadioButton_A"
android:text="Play forever"
android:checked="true"
android:layout_width="fill_parent"
android:textSize="20sp">
</RadioButton>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/RadioButton_B"
android:text="Count:"
android:textSize="20sp">
</RadioButton>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/EditText_NumCount"
android:inputType="number"
android:layout_toRightOf="#+id/RadioButton_B"
android:width="70sp" >
</EditText>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/CheckBox_StopCount"
android:text="Stop"
android:layout_below="#+id/RadioButton_B"
android:textSize="18sp">
</CheckBox>
</RelativeLayout>
</RadioGroup>
It looks right, but the problem is that the radiobuttons doesn't connect between each other, i mean that they can be both on in the same moment.
I think it's because even if they're hanging from the same the second one is inside another layout :\
Does anyone have some idea how could I make this kind of layout (Mainly the [textedit] just right the RadioButton B), getting working also the radiobuttons?
Thank you very much
You simply can't do it. I was also trying to do something similar and got stuck.
"RadioButtons have to be direct children of RadioGroup."
https://code.google.com/p/android/issues/detail?id=1214
The first thing to try is to close your RadioGroup right after you close the last RadioButton instead of at the end. A better solution is to use a RelativeLayout as the overall container. Next add your RadioGroup and both buttons and close the group. Add the other elements relative to the rest of the layout.