Develop Reference

Working with the UI design of a ListView custom row (Android)

I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>

Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.

<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.

How to equally divide two buttons horizontally without using layout_weight?

I have two Buttons called btnBeginner and btnAdvanced.
I have divided these two Buttons equally by using the layout_weight property. But the layout_weight is bad for performance.
Because of that, I would like to change my existing code - which is shown below.
<LinearLayout
android:id="#+id/lLayoutBeginAdv"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnBeginner"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#color/color_exam_btn_hlight"
android:text="beginner"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal" />
<Button
android:id="#+id/btnAdvanced"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#color/color_exam_btn_normal"
android:text="advanced"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal" />
</LinearLayout>
Please help me to do the same without using the layout_weight property.

EDIT : PercentRelativeLayout was deprecated in API level 26.1.0.
consider using ConstraintLayout and associated layouts instead.
Nested weights are bad for performance because :
Layout weights require a widget to be measured twice. When a
LinearLayout with non-zero weights is nested inside another
LinearLayout with non-zero weights, then the number of measurements
increase exponentially.
So in your case, weight will not create the performance problem. But still if you want to divide the layout into two equal parts without using weight, you can use PercentRelativeLayout
Sample :
android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnBeginner"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_exam_btn_hlight"
android:text="beginner"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%"
/>
<Button
android:id="#+id/btnAdvanced"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_exam_btn_normal"
android:text="advanced"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>
Visit this Github repo for more information

I'd place a dummy View in the center of a RelativeLayout.
Then set a Button to the right of it and another one to the left of it.
Something like so
<RelativeLayout>
<!-- Dummy in the center -->
<View
android:id="#+id/dummy"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<!-- Left Button -->
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:toLeftOf="#id/dummy"
android:text="New Button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<!-- Right Button -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:toRightOf="#id/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>

You should set layout_width = "0dp" for all the buttons in Linear Layout.
As layout_weight, superseding layout_width. So essentially the layout_width is getting ignored.
So basically you code should be like :
<LinearLayout
android:id="#+id/lLayoutBeginAdv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/btnBeginner"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
...../>
<Button
android:id="#+id/btnAdvanced"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
..... />
</LinearLayout>
For more reference you should this link :
layout_width and layout_weight - performance

If you don't want use layout_weight use Relative Layout`
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>`

If you are looking out to divide two buttons in single row using constraint layout then below is the example for you.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.com.schooldemo.example.MainActivity">
<Button
android:id="#+id/buttonA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintEnd_toStartOf="#+id/buttonD"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/buttonD"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="D"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/buttonA" />
</android.support.constraint.ConstraintLayout>

Android layout - Two views next to each other, equal width, use full screen-width

I have a problem with a layout in android. I want that two views should have the equal width, and they should almost use the full width of the screen. Each view should contain a centered label.
It should look like this when it's done:
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="10dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp" />
<View
android:id="#+id/view2"
android:layout_width="10dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp" />
</RelativeLayout>
I just have placeholder values for the width right now.
Thanks.

You have to use android:layout_weight attribute in xml so try below code hope it will resolve your problem :-
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="Register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
<Button
android:text="Not this time"
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>
To create a linear layout in which each child uses the same amount of
space on the screen, set the android:layout_height of each view to
"0dp" (for a vertical layout) or the android:layout_width of each view
to "0dp" (for a horizontal layout). Then set the android:layout_weight
of each view to "1"
For more info you need to read Linear layout.

It will be easier with LinearLayout, set the layout to match_parent with horizontal orientation.
After that, set layout_width to 0px and layout_weight=1 in both of your view.
See this for good explanation :
Layout buttons so each divides up the space equally

You have to use layout_weight attribute for this.
<Button
android:text="Register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
<Button
android:text="Not this time"
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>

Why GridLayout doesn't fill all the available space?

I have a GridLayout (to which I add the children programmatically).
The result is ugly because the GridLayout doesn't fill all the available space.
This is the outcome:
this is my XML:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.GridLayout
android:id="#+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" >
</android.support.v7.widget.GridLayout>
</HorizontalScrollView>
</ScrollView>

I think that everything is fine with your layout's behavior.
The android:layout_width="match_parent" setting for GridLayout, which is placed inside HorizontalScrollView, has no effect. A single child view inserted into GridLayout determines GridLayout's actual width (height if you used vertical ScrollView container), that can be bigger than the parent's screen width (width=match_parent setting thus has no effect here; and also for childviews). The columns and rows of the GridLayout have the size of the biggest childview inserted (assigned for this column/row).
This whole is a very dynamic structure. The number of columns and rows is recalculated automatically. Remember to tag the childviews with layout_row, and layout_column, and possibly setting the desired size - following the above mentioned rules, for example:
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/editText1"
android:layout_row="2"
android:layout_column="8" />
So, by changing the childviews' width you can control the columns' width of the GridLayout. You can study the following example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:background="#f3f3f3">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#a3ffa3">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Col 1,Row4"
android:id="#+id/button"
android:layout_gravity="center"
android:layout_row="4"
android:layout_column="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start.."
android:layout_column="4"
android:layout_row="8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Col 6, Row 1."
android:id="#+id/button2"
android:layout_row="1"
android:layout_column="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Col 6, Row 2."
android:id="#+id/button3"
android:layout_row="2"
android:layout_column="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button4"
android:layout_gravity="center"
android:layout_column="9"
android:layout_row="3" />
<TextView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_row="3"
android:layout_column="8" />
<CheckBox
android:layout_width="250dp"
android:layout_height="wrap_content"
android:text="New CheckBox"
android:id="#+id/checkBox"
android:layout_row="6"
android:layout_column="7"
android:textColor="#212995" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:ems="10"
android:id="#+id/editText"
android:layout_row="5"
android:layout_column="8"
android:textColor="#952a30" />
</GridLayout>
</HorizontalScrollView>
</LinearLayout>
I hope this was helpful. Best Regards :)
In addition:
I have found that the above may be actually difficult to achieve programmically. You might be considering changing the GridLayout to GridView or TableLayout, which are easier to handle. To learn more about it, please check these sites:
GridLayout.LayoutParams
GridLayout
gridlayout-not-gridview-how-to-stretch-all-children-evenly

You should modify your
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
and add android:fillViewPort="true". This should make the content stretch to fill the screen (i.e. the viewport).

TextView reps = new TextView(this);
android.support.v7.widget.GridLayout.LayoutParams repsLayoutParam = (LayoutParams) reps.getLayoutParams();
repsLayoutParam.setGravity(Gravity.FILL_HORIZONTAL | Gravity.FILL_VERTICAL);
This creates a text view that is placed in a grid layout - setting gravity to FILL_HORIZONTAL and also FILL_VERTICAL should ensure it fills the cell in the layout.

Because grid view have own scroll.

When you add the views remember to add the right LayoutParams to the view first.

Mabye it is because of the missing
</ScrollView>
at the end.

How to evenly space out radiobuttons in Android?

I have three radiobuttons and I want to evenly space them across the screen. When I use android:layout_weight="1", the buttons are stretched out across the screen. So how would I have the same amount of space in between each of them that also scales on different screen sizes?
<RadioGroup
android:id="#+id/auton_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:layout_below="#id/clear_fields"
>
<RadioButton
android:id="#+id/auton_radio_1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/auton_col"
android:layout_weight="1"
/>
<!-- android:layout_marginRight="380dp" -->
<RadioButton
android:id="#+id/auton_radio_2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/auton_col"
android:layout_weight="1"
/>
<RadioButton
android:id="#+id/auton_radio_3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/auton_col"
android:layout_weight="1"
/>
</RadioGroup>

If you want them to share screen width equally you need to set android:layout_width="match_parent" on each View. Your xml would become:
<RadioGroup
android:id="#+id/auton_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/clear_fields"
android:orientation="horizontal"
android:paddingLeft="10dp" >
<RadioButton
android:id="#+id/auton_radio_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/auton_col" />
<!-- android:layout_marginRight="380dp" -->
<RadioButton
android:id="#+id/auton_radio_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/auton_col" />
<RadioButton
android:id="#+id/auton_radio_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/auton_col" />
</RadioGroup>
To elaborate, layout_weight can be used in two ways.
If you have multiple views in a vertical linear layout and you want the last one to take up all the remaining space, you can set their heights to wrap_content and give the last view a weight of 1.
If you want all views to share the available space, set all width/heights to 0dp or match_parent and give each view the same weight value. They will share the space equally.
To have your background drawable scale, make a new xml that goes in your drawable/ folder that looks like this
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:src="#drawable/auton_col" />
Name it whatever you like (e.g. auton_col_scale.xml) and reference that drawable as your background.

I noticed that using layout weights for the RadioButton's caused them to be aligned off-center, eventhough they definitely each shared 50% of the screen (they were left-aligned). Setting a gravity for each RadioButton caused only the text to be centered /facepalm
The XML below shows how to horizontally align two radiobuttons (could be any views) and center them:
<RadioGroup
android:id="#+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/radioyes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/yes"
android:checked="false"/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RadioButton
android:id="#+id/radiono"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/no"
android:checked="false"/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</RadioGroup>

set width to match parent of each layout and then add weight jsut like linear layout.
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/bigMarginStart"
android:layout_marginTop="#dimen/smallMarginTop"
android:layout_marginEnd="#dimen/baseMarginEnd"
android:orientation="horizontal"
android:weightSum="3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/all_"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/smallMarginTop"
android:layout_weight="1"
android:background="#drawable/radio_flat_selector"
android:button="#android:color/transparent"
android:checked="true"
android:gravity="center"
android:paddingLeft="#dimen/bigPaddingStart"
android:paddingTop="#dimen/smallPaddingTop"
android:paddingRight="#dimen/bigPaddingStart"
android:paddingBottom="#dimen/smallPaddingBottom"
android:text="All" />
<RadioButton
android:id="#+id/future_"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/smallMarginStart"
android:layout_marginTop="#dimen/smallMarginTop"
android:layout_marginEnd="#dimen/smallMarginEnd"
android:layout_weight="1"
android:background="#drawable/radio_flat_selector"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingLeft="#dimen/bigPaddingStart"
android:paddingTop="#dimen/smallPaddingTop"
android:paddingRight="#dimen/bigPaddingStart"
android:paddingBottom="#dimen/smallPaddingBottom"
android:text="Future" />
<RadioButton
android:id="#+id/direct_"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/smallMarginTop"
android:layout_weight="1"
android:background="#drawable/radio_flat_selector"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingLeft="#dimen/bigPaddingStart"
android:paddingTop="#dimen/smallPaddingTop"
android:paddingRight="#dimen/bigPaddingStart"
android:paddingBottom="#dimen/smallPaddingBottom"
android:text="Direct" />
</RadioGroup>