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>

Issues with layout_toLeftOf

I have the following layout file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="TOP"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<RelativeLayout
android:background="#color/azul_pressed"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv1"
android:paddingLeft="100dp"
android:text="|RIGHT--"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tv2"
android:layout_toLeftOf="#id/tv1"
android:text="--LEFT|"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<TextView
android:text="BOTTOM"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Which produces the following output:
This line:
android:layout_toLeftOf="#id/tv1"
causes tv2 to disapear from the screen and creates all that extra blue space.
Why?

In a relative layout you have to align you have to align your content to either the parent or to another widget.
I believe this is what you are looking for:
<TextView
android:id="#+id/tv1"
android:paddingLeft="100dp"
android:text="|RIGHT--"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv2"/>
<TextView
android:id="#+id/tv2"
android:layout_alignParentLeft="true"
android:text="--LEFT|"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
See how I aligned tv1 to the left of the parent and then tv2 to the right of tv1.
You can also do it the other way around.

Are you confusing padding with margin? Padding will move the text around in the TextView, and isn't actually part of the boundary. Use margins instead if you want to push them from the side, or padding on the parent ViewGroup (same thing).
<TextView
android:id="#+id/tv2"
android:layout_alignParentLeft="true"
android:text="--LEFT|"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tv1"
android:text="|RIGHT--"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv2"/>
This will place the views right next to each other.
If you want to then offset them by 100 pixels on the left, then add:
android:margin_left="100dp" to tv2. Since tv1 is attached to the right of tv2, it will push both over by 100dp. I'm not really sure what your intentions are, but I think a LinearLayout with gravity set on the children would be better since both textviews would occupy the same amount of space and be spread out evenly.
edit: note that this is similar to Carlos Paulino's answer. I think you were confusing the padding offset of the text with the layout boundary.

Relative Layout giving a lot of trouble

Here's the code:
<RelativeLayout
android:id="#+id/tc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tc"
android:layout_marginLeft="185dip"
android:layout_marginTop="25dip"
>
<ImageView
android:id="#+id/tc_icon"
android:background="#drawable/count_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tc"
android:layout_mar
/>
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
/>
</RelativeLayout>
I have somehow managed to make the image and the text views overlap each other (which I wanted). Now, I want them to be placed to the bottom left corner of their parent RelativeLayout (with id 'tc').... However, they just wouldn't move.
If I used alignParentBottom.... the entire relative layout stretches across the screen and aligns to its parent relativeLayout.
Please help. Thanks! :)

If you wanna overlap an image and a textview, simplw use a android:drawableleft or ony position where you want.
For example:
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
android:drawableleft="#drawable/yourimage.jpg"/>
This will give you an image on the left of your textview. Check it out

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.

Centering a TextView while keeping it to the right of a button?

I'm pretty sure I've done this before, but I've forgotten how.
Here's the problem:
I've got a button and a textview, and I want the textview to be centered, while the button is on the left side.
No problem? Just put them in a relativelayout, make the textview centerinparent, and the button alignparentleft.
But now I'm going to dynamically change the text, so it can potentially be written on top of the button! I'll just add toRightOf="#id/button" on the textview. No, now it's no longer centered.
I wish I could provide a screenshot, but it seems the computer is out of memory and can't do that.
Here's some code: http://pastebin.com/3N70Vjre (Since I can't paste xml...?)
<RelativeLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<Button
android:id="#+id/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="text!"
/>
<TextView
android:id="#+id/toptext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_toRightOf="#id/leftbutton"
android:layout_centerInParent="true"
android:textSize="16sp"
android:textStyle="bold"
android:text="Text!"
android:singleLine="true"
/>
</RelativeLayout>

Try this (unfortunately I'm at work so can't jump into Eclipse to get you some code) -
Change the layout_width of the TextView to fill_parent.
Set the gravity of the TextView to center (so the text centers inside the TextView)
Set the layout_weight of the Button to 1 and the layout_weight of the TextView to 2. Note that you may have to fudge with these numbers to get the layout you're looking for.
This should center the text of the TextView after the Button, though it will not center the TextView itself. You can accomplish that by replacing the TextView with a container (Linear/Relative Layout) and doing the same method as above on the Layout instead of the TextView. You would then put your TextView inside the container and set the container's gravity to "center".
Hope this helps point you in the right direction :)

You can try this (pseudo-code):
<RelativeLayout>
<Button>
<LinearLayout toLeftOf="toptext" type="horizontal">
<TextView gravity="center">
</LinearLayout>
</RelativeLayout>
You might have to have the LinearLayout as width="fill_parent". Not sure if that will work nor not. You can subsequently try some of the things listed here: http://thinkandroid.wordpress.com/2010/01/14/how-to-position-views-properly-in-layouts/

Try declaring the TextView first, then aligning the button to the left of the text view. Keep in mind you may run into issues if the TextView becomes too wide.
EDIT: I see, so you're trying to do something sort of like the iPhone's header with back/next buttons (similar anyway). Try this modification. I still believe you're going to run into issues if the TextView gets large enough to hit the Button, though.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/toptext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_alignParentCenter="true"
android:textSize="16sp"
android:textStyle="bold"
android:text="Text!"
android:singleLine="true"
/>
<Button
android:id="#+id/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="text!"
/>
</RelativeLayout>
Try this FrameLayout instead. This may do more what you're expecting:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/toptext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
android:text="Text!"
android:singleLine="true"
/>
<Button
android:id="#+id/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text!"
/>
</FrameLayout>