Android Design 2 Images and text LinearLayout

Question

I'm trying to create a layout like this:

Basically I have 2 Images that I would like to stick to either side of the LinearLayout and in the center have some text. I'm setting the width of the images in code based on the density of the screen, so that is of variable width.

Here is the code I have so far:

<RelativeLayout
        android:id="@+id/user_header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/user_loading_wrapper"
        android:layout_alignWithParentIfMissing="true"
        android:layout_alignParentTop="true"
        android:layout_margin="@dimen/default_spacing">

        <!--User Poster-->
        <ImageView
            android:id="@+id/user_poster"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitXY"
            android:contentDescription="User Poster"
            android:layout_alignParentLeft="true"/>

        <!--Review Details-->
        <LinearLayout
            android:id="@+id/screen_details"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/user_poster"
            android:layout_alignParentTop="true"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:layout_marginLeft="@dimen/default_spacing_max"
            android:orientation="vertical">

            <!--User Title-->
            <TextView
                android:id="@+id/user_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#333"
                android:singleLine="false"
                android:layout_gravity="center"/>

            <!--Location-->
            <TextView
                android:id="@+id/user_location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#333"
                android:singleLine="false"
                android:layout_gravity="center"/>

            <!--User 2 Title-->
            <TextView
                android:id="@+id/user_secondary_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#333"
                android:layout_marginTop="4dp"
                android:singleLine="false"
                android:layout_gravity="center"
                tools:text="Life of Pi"/>

        </LinearLayout>

        <!--Poster-->
        <ImageView
            android:id="@+id/user_poster_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitEnd"
            android:layout_toRightOf="@id/screen_details"
            android:contentDescription="Poster"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

But it doesn't work at all. I want the Center Layout to expand and occupy all the space in the middle between the two images.

Answer 1

try this

   <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/user_header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignWithParentIfMissing="true"
    android:layout_alignParentTop="true"
    android:layout_margin="5dp">

    <!--User Poster-->
    <ImageView
        android:id="@+id/user_poster"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:scaleType="fitXY"
        android:contentDescription="User Poster"
        android:layout_alignParentLeft="true"/>

    <!--Review Details-->

    <LinearLayout
        android:id="@+id/screen_details"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="70dp"
        android:layout_toRightOf="@id/user_poster"
        android:gravity="center"
        android:orientation="vertical" >

        <!--User Title-->
        <TextView
            android:id="@+id/user_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:singleLine="false"
            android:layout_gravity="center"/>

        <!--Location-->
        <TextView
            android:id="@+id/user_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:singleLine="false"
            android:layout_gravity="center"/>

        <!--User 2 Title-->
        <TextView
            android:id="@+id/user_secondary_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:layout_marginTop="4dp"
            android:singleLine="false"
            android:layout_gravity="center"
            android:text="Life of Pi"/>

    </LinearLayout>

    <!--Poster-->

    <ImageView
        android:id="@+id/user_poster_2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:contentDescription="Poster" />

</RelativeLayout>

Answer 2

i fixed it .... check output it in image and flow in code.

And Code is:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/user_header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignWithParentIfMissing="true" >

    <ImageView
        android:id="@+id/user_poster"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@android:color/black"
        android:scaleType="fitXY" />
    <LinearLayout
        android:id="@+id/screen_details"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/user_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@android:color/darker_gray"
            android:paddingLeft="10dp"
            android:singleLine="false"
            android:text="Life of Pi"
            android:textColor="#333" />
        <TextView
            android:id="@+id/user_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray"
            android:paddingLeft="10dp"
            android:singleLine="false"
            android:text="Life of Pi"
            android:textColor="#333" />
        <TextView
            android:id="@+id/user_secondary_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray"
            android:paddingLeft="10dp"
            android:singleLine="false"
            android:text="Life of Pi"
            android:textColor="#333" />
    </LinearLayout>
    <ImageView
        android:id="@+id/user_poster2"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_weight="0"
        android:background="@android:color/black"
        android:scaleType="fitXY" />

</LinearLayout>