Android RelativeLayout header issue

Question

I have a very simple problem, but I am clearly doing something wrong. I've tried many ways to do this, but there's always something screwing up.

I have a ListView with a horizontal LinearLayout serving as a header. I want to have < and > serving as "back and next" widgets, on the very left and very right portions of the LinearLayout. The LIST HEADER portion should be centered between them.

Making LIST HEADER have the attribute android:layout_width="match_parent" cuts off the right hand arrow. Otherwise it lays on top of the left arrow, even though it appears after the LIST HEADER TextView in the XML file.

<     LIST HEADER     >
List item number 1
List item number 2
List item number 3

I'm not new to Android at this stage but this seems basic. Any help would be appreciated. I should add that I'm not using eclipse.

CURRENT XML (sort of messy after trying so many things, apologies):

<LinearLayout
android:orientation="vertical"  
android:layout_width="match_parent"
android:layout_height="match_parent">

  <LinearLayout
  android:orientation="horizontal"
  android:gravity="center"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <RelativeLayout
      android:id="@+id/LeftFormulaHeaderLayout"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="left"
      android:textSize="@dimen/text_huge"
      android:id="@+id/LeftFormulaHeader"
      android:text="&lt;"/>
  </RelativeLayout>
  <TextView
      android:layout_width="200dip"
      android:layout_height="wrap_content"
      android:textSize="@dimen/text_huge"
      android:ellipsize="end"
      android:scrollHorizontally="false"
      android:singleLine="true"
      android:gravity="center"
      android:id="@+id/FormulaHeader"/>

  <RelativeLayout
      android:id="@+id/RightFormulaHeaderLayout"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
    <TextView
    android:id="@+id/RightFormulaHeader"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:textSize="@dimen/text_huge"
    android:text="&gt;"/>
  </RelativeLayout>
</RelativeLayout>
</LinearLayout>


  <ListView
  android:id="@+id/TheList"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="#000033"
  android:layout_weight="1"
  android:drawSelectorOnTop="false" />

  <TextView
      android:id="@+id/empty_list_item"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:visibility="gone"
      android:text="@string/empty_list" />
</LinearLayout>

Answer 1

You can use the below code with the help of RelativeLayout instead of messing up with LinearLayout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Wrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
     android:layout_gravity="center"
      android:orientation="horizontal"
   >

         <ImageView
                android:id="@+id/icon1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"
                android:layout_alignParentLeft="true"  />

            <ImageView
                android:id="@+id/icon2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"
                android:layout_centerVertical="true"
                android:layout_centerInParent="true"  />

               <ImageView
                android:id="@+id/icon3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"
                android:layout_alignParentRight="true"  />

</RelativeLayout>

OutputScreenShot:

Even this code helps center your views in layout vertically. You can Change the 2nd ImageView to TextView to have a text to be displayed. Hope this helps.

Answer 2

Your main issue: gravity affects positioning of the text within the TextView . You want alignParentLeft /- Right and centerHorizontal for what you are doing (although gravity="center" remains to keep the header centered in its view).

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentLeft="true"
  android:textSize="@dimen/text_huge"
  android:id="@+id/LeftFormulaHeader"
  android:text="&lt;"/>
<TextView
  android:layout_width="200dip"
  android:layout_height="wrap_content"
  android:textSize="@dimen/text_huge"
  android:ellipsize="end"
  android:scrollHorizontally="false"
  android:singleLine="true"
  android:layout_centerHorizontal="true"
  android:gravity="center"
  android:id="@+id/FormulaHeader"
  android:text="HEADER"/>

<TextView
android:id="@+id/RightFormulaHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textSize="@dimen/text_huge"
android:text="&gt;"/>
</RelativeLayout>

Answer 3

You should be able to work with the weight attribute here:

<!-- Your header layout. -->

<LinearLayout orientation="horizontal" weight_sum="1">

    <!-- Button left. -->

    <TextView layout_width="30dp" layout_height="30dp" />

    <!-- Headline. -->

    <TextView layout_width="0dp" layout_height="30dp" layout_weight="1" gravity="center" />

    <!-- Button right. -->

    <TextView layout_width="30dp" layout_height="30dp" />

</LinearLayout>

The above code is not working for copy/paste. You need to add your details. I just wanted to point out the most important things:

• For this solution it's important to have a fixed width for the left/right widgets
• Note that the headline has a width of 0dp ...
• ... and a weight of 1!

So the headline will end up taking all the wrapper's available space except the 2*30dp of the left/right widgets.

Answer 4

Try out with my below code i have done some relevant changes.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:id="@+id/LeftFormulaHeaderLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/LeftFormulaHeader" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:text="&lt;" android:textSize="20sp" /> </RelativeLayout> <TextView android:id="@+id/FormulaHeader" android:layout_width="200dip" android:layout_height="wrap_content" android:ellipsize="end" android:gravity="center" android:layout_centerHorizontal="true" android:scrollHorizontally="false" android:singleLine="true" android:text="kajsgfuisagf" android:textSize="20sp" /> <RelativeLayout android:id="@+id/RightFormulaHeaderLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/RightFormulaHeader" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_alignParentRight="true" android:text=">" android:textSize="20sp" /> </RelativeLayout> </RelativeLayout> </LinearLayout> <ListView android:id="@+id/TheList" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:background="#000033" android:drawSelectorOnTop="false" /> <TextView android:id="@+id/empty_list_item" android:layout_width="match_parent" android:layout_height="match_parent" android:text="empty_list" android:visibility="gone" />