Android RelativeLayout

Question

I'm very new to Android development and I'm trying to figure out how to use the RelativeLayout tag to position my Views. My goal is to have a large TextView on the left, with two ButtonViews to the right of it, stacked on top of each other. Here's the XML code I'm using:

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/main_layout"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:background="@drawable/wood_tile">
       <TextView
          android:id="@+id/life_counter"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="00" />
       <Button android:text="@string/button_up"
          android:id="@+id/button_up"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_toRightOf="@id/life_counter"/>
       <Button android:text="@string/button_down"
          android:id="@+id/button_down"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 
          android:layout_below="@id/button_up"/>
    </RelativeLayout>

I feel that I must not be using the tag properly. Can someone explain how it works? Thanks in advance.

Kyle Ivey · Accepted Answer · 2011-04-07T00:59:44.467

You have the left side TextView's width set to fill_parent, this will make it consume the entire screen. Anything placed to the right of it will be off screen. Use wrap_content or a specific width for the elements within the relative layout.

Your approach is also a bit off. If you want the two buttons aligned to the right of the screen, use this:

<RelativeLayout 
   android:id="@+id/main_layout"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">

   <TextView
      android:id="@+id/life_counter"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="00" />

   <Button android:text="Button Up"
      android:id="@+id/button_up"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"/>

   <Button android:text="Button Down"
      android:id="@+id/button_down"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true"
      android:layout_below="@+id/button_up"/>
</RelativeLayout>

Thanks, now all the views are visible! As for your second part, what I actually want to do is center all three, not align them left and right respectively. I'll have to figure out how to do this also. — Nathan Wiles, Apr 07 '11 at 00:43
To center them you will need to place them within a nested RelativeLayout that has the attribute `android:layout_centerInParent="true`. See [this solution](http://stackoverflow.com/questions/1499258/can-we-put-layout-in-center-of-the-screen-in-android/1501534#1501534). — Kyle Ivey, Apr 07 '11 at 01:02
Beautiful. This is coming alone nicely. Thanks for the great help! — Nathan Wiles, Apr 07 '11 at 01:14

Android RelativeLayout

1 Answers1