What is the most efficient way to achieve such layout

Question

I have to achieve the following layout in one of my android applications:

Edit:

I also need the selection of one of the elements to be displayed in a similar way as that:

So each of the 3 elements have to take 1/3 of the Horizontal space to make the selection drawable big enough.

/Edit

I can't find most efficient way to make it.

I've first tried:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/forums_navbar"
    android:layout_width="fill_parent" android:layout_height="@dimen/forums_navbar_height"
    android:background="@color/white">
    <TextView android:id="@+id/forums_navbar_TextView_debut"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/forums_nav_debut"
        android:textStyle="bold"
        android:textColor="@color/forum_nav_blue"
        android:textSize="15sp"
        android:drawablePadding="4dip"
        android:drawableLeft="@drawable/nav_fast_backward">
    </TextView>
    <TextView android:id="@+id/forums_navbar_TextView_precedent"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/forums_nav_precedent"
        android:textStyle="bold"
        android:textColor="@color/forum_nav_blue"
        android:textSize="15sp"
        android:drawablePadding="4dip"
        android:drawableLeft="@drawable/nav_backward">
    </TextView>
    <TextView android:id="@+id/forums_navbar_TextView_suivant"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/forums_nav_suivant"
        android:textStyle="bold"
        android:textColor="@color/forum_nav_blue"
        android:textSize="15sp"
        android:drawablePadding="4dip"
        android:drawableRight="@drawable/nav_fast_forward">
    </TextView>
</LinearLayout>

The result is not exactly what expected:

I've changed the layout to have it work:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/forums_navbar"
    android:layout_width="fill_parent" android:layout_height="@dimen/forums_topics_navbar_height"
    android:background="@color/white">
    <RelativeLayout 
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1">
        <TextView android:id="@+id/forums_navbar_TextView_debut"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/forums_nav_debut"
            android:textStyle="bold"
            android:textColor="@color/forum_nav_blue"
            android:textSize="15sp"
            android:drawablePadding="4dip"
            android:drawableLeft="@drawable/nav_fast_backward">
        </TextView>
    </RelativeLayout>
    <RelativeLayout 
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1">
        <TextView android:id="@+id/forums_navbar_TextView_precedent"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/forums_nav_precedent"
            android:textStyle="bold"
            android:textColor="@color/forum_nav_blue"
            android:textSize="15sp"
            android:drawablePadding="4dip"
            android:drawableLeft="@drawable/nav_backward">
        </TextView>
    </RelativeLayout>
    <RelativeLayout 
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1">
        <TextView android:id="@+id/forums_navbar_TextView_suivant"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/forums_nav_suivant"
            android:textStyle="bold"
            android:textColor="@color/forum_nav_blue"
            android:textSize="15sp"
            android:drawablePadding="4dip"
            android:drawableRight="@drawable/nav_fast_forward">
        </TextView>
    </RelativeLayout>
</LinearLayout>

The result:

It works, but it's just not efficient at all. Is there a better way?

Answer 1

You just need to have RelativeLayout at top.

1. use android:layout_alignParentLeft="true" for Left side view
2. use android:layout_centerHorizontal="true" for Center view
3. use android:layout_alignParentRight="true" for Right view

Output:

You can have above output by using below solution:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:layout_alignParentLeft="true">   // For view at Left side
    </TextView>

     <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        android:layout_centerHorizontal="true">  // For view at center
    </TextView>


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right"
        android:layout_alignParentRight="true">  // for view at Right side
    </TextView>

</RelativeLayout>

Answer 2

Why not use a relativelayout as top and then put the three groups in each their linearlayout. Then for each group (linearlayout) you can set android:layout_alignParent to center, left and right.

Answer 3

I see two options:

1. As Warpzit said, use a RelativeLayout . That should easily do the trick: just align the middle one in the middle ( android:layout_centerHorizontal="true" ) and the other ones to the left and right ( android:layout_alignParentLeft="true" , same for right).
2. With a LinearLayout , you could have the three TextView s have a android:layout_width="0px" (yes, zero pixels) and a layout_weight="1" . This will make the LinearLayout give the TextView s equal widths. Now you just have to align the text to the left, center and right respectively in each of the TextView s, which you can do using android:gravity .

Answer 4

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" 
    android:background="#FFFFFF"
    android:weightSum="1">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="20dp" 
        android:background="#FF0000"
        android:layout_weight="0.33">
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="20dp" 
        android:background="#00FF00"
        android:layout_weight="0.34">

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#0000FF"
        android:layout_weight="0.33">

    </LinearLayout>
</LinearLayout>