Develop Reference

Button size and padding within RelativeLayout

I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?

RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.

To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>

Centering the contents of a view inside a LinearLayout

Here's the layout (below). I'm trying to reposition the location of the checkbox; move it to the right of the view. android:gravity and android:layout_gravity seem to have no effect. Any explanation? This LinearLayout is a child of a Relative Layout.
<LinearLayout
android:id="#+id/deviceLinear"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#id/view1" >
<ImageView
android:contentDescription="#string/devices_icon"
android:id="#+id/devices_img"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="0.15"
android:layout_gravity="center"
android:src="#drawable/hardware_phone" />
<TextView
android:id="#+id/devices"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.43"
android:text="#string/devices"
android:textSize="20sp" />
<CheckBox
android:id="#+id/check_devices"
android:button="#drawable/custom_checkbox"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.42"
android:onClick="onCheckboxClicked" />
</LinearLayout>

I assume that you want the CheckBox to be on the right side of the LinearLayout. Since you have given it a layout_weight it will always take up some fixed percentage of the width regardless of its size as you can see by that blue bounding box.
Try wrapping the checkbox in another LinearLayout that has android:orientation='horizontal'. Give the 0.42 weight to the wrapping LinearLayout and then set the LinearLayout's android:gravity to be right. That should keep your spacing while moving the checkbox to the far right.
Something like this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="0.42"
android:layout_height="wrap_content"
android:gravity="right" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
You might also want to consider a RelativeLayout which enables you to position Views based on where other views are.

You are giving layout_weight="0.42" to your checkbox, that means that it will be measured with a width based on the LinearLayout's width. By this approach you will never manage to put it on the right.
The best way to achieve your goal is to use a RelativeLayout. Here is my list item layout with a checkbox on the right. Sorry about the merge tag but it is merged inside a RelativeLayout with
android:layout_width="match_parent"
android:layout_height="wrap_content"
attributes
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/imgChannelIcon"
android:layout_alignParentLeft="true"
style="?muListItemImage60x60" />
<CheckBox android:id="#+id/chkIsChecked"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_alignTop="#+id/imgChannelIcon"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/imgChannelIcon"
android:layout_marginLeft="#dimen/list_item_checkbox_margin_left"
android:layout_marginRight="#dimen/list_item_checkbox_margin_right"
android:layout_marginTop="#dimen/list_item_checkbox_margin_top"
android:layout_marginBottom="#dimen/list_item_checkbox_margin_bottom"
android:focusable="false"
android:focusableInTouchMode="false" />
<TextView android:id="#+id/lblChannelTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgChannelIcon"
android:layout_alignTop="#+id/imgChannelIcon"
android:layout_toLeftOf="#+id/chkIsChecked"
android:layout_alignWithParentIfMissing="true"
android:includeFontPadding="false"
android:textStyle="bold"
android:text="#string/channel_item_dummy_title"
style="?muListItemTextBig" />
<TextView android:id="#+id/lblChannelSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgChannelIcon"
android:layout_below="#+id/lblChannelTitle"
android:layout_toLeftOf="#+id/chkIsChecked"
android:layout_alignWithParentIfMissing="true"
android:includeFontPadding="false"
android:textStyle="normal"
android:text="#string/channel_item_dummy_subtitle"
style="?muListItemTextNormal" />
<TextView android:id="#+id/lblChannelCategory"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/imgChannelIcon"
android:layout_below="#+id/lblChannelSubtitle"
android:layout_alignBottom="#+id/imgChannelIcon"
android:layout_toLeftOf="#+id/chkIsChecked"
android:layout_alignWithParentIfMissing="true"
android:includeFontPadding="false"
android:paddingLeft="3dp"
android:gravity="center_vertical|left"
android:textStyle="italic"
android:text="#string/channel_item_dummy_category"
style="?muListItemTextNormal_Inverse" />
<TextView android:id="#+id/lblChannelUpdate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/imgChannelIcon"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:includeFontPadding="false"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:textStyle="italic"
android:text="#string/channel_item_dummy_update"
style="?muListItemTextTiny" />
</merge>
As you can see I first place an image with layout_alignParentLeft="true" then the checkbox with layout_alignParentRight="true" and finally I arrange the other components based on those two. From your image I can see that you can use your devices_img as the left component (but you will have to give it a fixed height and maybe some margins in order to became the Layout's height) and your check box as your right.
Keep in mind that in a RelativeLayout with wrap_content as height you cannot use the AlignParentBottom attribute.
Hope this helps...

How to create Textview in left side and two button in right side in same line?

In Android lay out how to create a TextView in leftside and two button on right side with same line.
Which layout is better to use for this layout Table Or Relative ?

You can use a LinearLayout to achieve this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_weight="1"
android:text="a text"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1">
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2">
</Button>
</LinearLayout>

Its is better to use Relative Layout for this kind of view. use android:layout_alignParentRight="true" to Align Right and android:layout_alignParentLeft="true" to Align Left. e.g
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" >
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Large Text"
android:textColor="#76D4F7"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

The easiest would be to use a LinearLayout (orientation horizontal) as pointed out in the previous answer. You can also set the property under Layout Weight to 1 for each button and textview. Then set the layout width for all those object to 0. This will enable you to proportionally scale how much of the area is taken up horizontally by each object. So for example if you set the Layout Weight on the Textview to 2 and each button to 1, then the textview will take up 50% of the space horizontally (2/(2+1+1)). This makes it easier to scale the objects on different device and hopefully starts to address the question of which is the best layout to use in this case.

Center multiple items in a RelativeLayout without putting them in a container?

I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>

android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>

Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>

android:layout_gravity="center"
will almost give what you're looking for.

Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>

LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.

Manage Layout Inside a Horizontal Oriented Radiogroup

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" />