I want ask how to we can design Radio Group in Android like this picture
"My Style"
I'm design XML like this :
<RadioGroup
android:layout_below="#+id/btnGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:id="#+id/rdiEasy"
android:text="EASY"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:id="#+id/rdiMedium"
android:text="MEDIUM"
android:layout_marginRight="8dp"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:id="#+id/rdiHard"
android:text="HARD"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:id="#+id/rdiHardest"
android:text="HARDEST"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RadioGroup>
I'm use RadioButtonGroup wrap 2 RelativeLayout , each RelativeLayout contain two Radio Button. But with this design , i can't choose only one Radio Button , still can choose multi radio button. So anyone can help me how to design Radio Button with this design but just only choose one option.
I think this will work for you
https://gist.github.com/ishitcno1/9544243
Use this code it work perfect.
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:transitionGroup="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="30dp">
<RadioButton
android:id="#+id/rdiEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Easy" />
<RadioButton
android:id="#+id/rdiHard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hard" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="30dp">
<RadioButton
android:id="#+id/rdiMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/rdiEasy"
android:text="Medium" />
<RadioButton
android:id="#+id/rdiHardest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/rdiHard"
android:text="Hardest" />
</LinearLayout>
</RadioGroup>
</RelativeLayout>
Try this code without using layouts inside radiogroup.and try to achieve the desired pattern by setting gravity,like this and check if radio button is selected only one or multiple
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="500dp"
android:layout_height="250dp"
android:layout_weight=".07"
android:gravity="center">
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginLeft="5dp"
android:text="New RadioButton" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:layout_marginRight="5dp"
android:text="New RadioButton" />
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginLeft="5dp"
android:text="New RadioButton" />
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="5dp"
android:text="New RadioButton" />
</RadioGroup>
Related
I can't figure out how to get these radio groups/text views into a scrollview. Can anyone help me? Heres what i've tried but I keep getting the error scrollview can only host one child and I don't know how to fix it.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ContactSettingsActivity" >
<RelativeLayout
android:id="#+id/navbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/navbar_background" >
<ImageButton
android:id="#+id/imageButtonList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/imageButtonMap"
android:src="#drawable/contactlisticon" />
<ImageButton
android:id="#+id/imageButtonMap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/mapicon" />
<ImageButton
android:id="#+id/imageButtonSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/imageButtonMap"
android:src="#drawable/settingsicon" />
</RelativeLayout>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/navbar">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Sort Contact By:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:layout_marginLeft="35dp"
android:layout_marginTop="10dp"
>
<RadioButton
android:id="#+id/radioName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Name" />
<RadioButton
android:id="#+id/radioCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City" />
<RadioButton
android:id="#+id/radioBirthday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Birthday" />
</RadioGroup>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/radioGroup1"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Sort Order:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="#+id/radioGroup2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="35dp"
android:layout_marginTop="10dp"
android:layout_below="#+id/textView2" >
<RadioButton
android:id="#+id/radioAscending"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Ascending" />
<RadioButton
android:id="#+id/radioDescending"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Descending" />
</RadioGroup>
</ScrollView>
</RelativeLayout>
Choose a single container layout for all the child items you want to appear in a ScrollView. Most of the time this will be a LinearLayout to get them stacked vertically, but it could really be any view you want. You just need to choose one and arrange the children in it manually.
Add a layout inside scroll view and move the ui widgets(textview and radiogroup) inside that layout.
I have defined 3 controls on my screen, placed in the following order:
button
- textView
- button
I want to place the first button on the left side and place the textView in the middle. The second button should be on the right side.
However, I cannot find a way to force the buttons to stick to the left/right side and for the textView too stick to the middle.
This is the code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:id="#+id/button" />
</LinearLayout>
And this is the screenshot:
And this is what I want to have (without the padding):
Try this code :
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:gravity="center_vertical"
android:text="Today Data"
android:textAlignment="center"
android:textColor="#0000ff"
android:background="#00000000"
android:textSize="20dp"
android:textStyle="bold|italic"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
Output :
set layoutgravity and gravity as left, center and right respectively for all the three widgets
You can try a RelativeLayout. Like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:layout_alignParentLeft="true"
android:id="#+id/button2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:layout_alignParentRight="true"
android:id="#+id/button" />
</RelativeLayout>
Please use a Relative Layout instead of a LinearLayout.
Add to Button
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
Add to TextView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Add to the Right Button
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
You could use layout weights to get exactly what you are looking for:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Today Data"
android:textAlignment="center"
android:textStyle="bold|italic"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button"
/>
Remember that Android makes two passes when determining the size and position of the components in a layout. The first pass uses the layout_width and layout_height settings. In this case it is wrap_content for most of the widgets which will make them their "natural" size to fit their content. The second pass uses the layout_weight attribute to allocate any remaining pixels. Given that this is a horizontal linear layout, those pixels will be allocate to the horizontal size of the widgets. Only the TextView specifies a weight attribute, so it will get 100% of the remaining pixels.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:gravity="left">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.60"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="data"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:gravity="right">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
</LinearLayout>
</LinearLayout>
This is also working
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:text="<<"
android:id="#+id/button2" />
<TextView
android:layout_width="0sp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text=">>"
android:id="#+id/button" />
</LinearLayout>
I want to set distance between two radio buttons.
Like
How i can achieve this? My code is like
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/textView_your_order"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Delivery" />
<RadioButton
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PickUp" />
</RadioGroup>
</LinearLayout>
Above code output looks like below picture
you can achieve this result with :
using layout_weigth and matching radio group to fill the screen
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/textView_your_order"
android:orientation="horizontal">
<RadioButton
android:layout_weight="1"
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Delivery" />
<RadioButton
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PickUp" />
</RadioGroup>
or
even adding a dummy view that pushes both radio button to left end and right end like this:
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/textView_your_order"
android:orientation="horizontal">
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Delivery" />
<TextView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RadioButton
android:gravity="end"
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PickUp" />
</RadioGroup>
Try android:gravity="right" in the xml for the RadioButton which you want it to be right.
This should do want you want.
I have done after changing my code to this one.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/SkyBlue"
android:orientation="vertical"
android:padding="8dp" >
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/textView_your_order"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Delivery" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PickUp" />
</RadioGroup>
</LinearLayout>
Just change layout width in the first radio button, Put :
android:layout_width = "200dp"
I want to show the customized buttons as if they are attached. Here is what I got so far:
<RelativeLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.15"
android:orientation="horizontal"
android:scaleType="fitXY" >
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btntoggle_selector"
android:textColor="#android:color/white" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="62dp"
android:background="#drawable/btntoggle_selector"
/>
</RelativeLayout>
By the above code they are always showing as if there is some gap between them. How can I correct it?
How about you set the leftMargin to some negative value?
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btntoggle_selector"
android:textColor="#android:color/white" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="-5dp" //Modify this value to make them as close as possible
android:background="#drawable/btntoggle_selector"
/>
In the XML to follow, each RadioButton is set to android:gravity="center".
All three buttons show up, but the button descriptions are centered. The buttons themselves are not. How do I center the buttons as well as their descriptions?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:text="RadioButton" />
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:checked="true"
android:text="RadioButton" />
<RadioButton
android:id="#+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center"
android:text="RadioButton" />
</RadioGroup>
</LinearLayout>
In this picture, you can ignore the top bar. That's already been coded in. What I'm seeing is the RadioButtons far to the right of the "RadioButton" text (the button itself is up against the layout bounds). The desired end result is, since I can't post images: Here it is.
I have tried editing your layout to do what is in your screenshot. I don't think this is an efficient way to do this but this is the only way that worked for me.
I inserted every radiobutton inside a parent linerlayout, and then used gravity center.
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center" >
<RadioButton
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center" >
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="RadioButton" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:gravity="center" >
<RadioButton
android:id="#+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton" />
</LinearLayout>
</RadioGroup>
I really hope there's a better solution than this. But here, hope it helps. :)
Just add widget.Space in between, so the entire widget.RadioButton will get shifted to right...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</RadioGroup>