Android - RelativeLayout with image and text, design problems

Question

I have a relative layout with an image and two textviews (one for the news title and the other one for the date). I put a hardcoded value for the width of the textview with the title. If I use wrap content it overlaps the date.

Here's my xml code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >

<LinearLayout
    android:id="@+id/thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="5dp"
    android:padding="3dp" >

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/internet"
        android:contentDescription="News" />
</LinearLayout>

<TextView
    android:id="@+id/txtTitle"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/thumbnail"
    android:layout_toRightOf="@+id/thumbnail"
    android:text="Timberlake's fourth studio album The 20/20 Experience – 2 of 2 was released on September 30, 2013."
    android:textSize="14sp" />

<TextView
    android:id="@+id/txtDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/txtTitle"
    android:layout_marginRight="5dp"
    android:gravity="right"
    android:text="23.09.2013"
    android:textColor="#C0C0C0"
    android:textSize="10sp" />

</RelativeLayout>

For the screen size 4,7 it looks like this:

screen size 4,7

But for the screen size 5,1 it looks bad:

screen size 5,1

My goal is that I have the same look for each screen size. The space between the title and the date should always be the same. How can I achieve this?

Answer 1

You're already using a RelativeLayout, so surprisingly there is a quick fix for you here. Leave your TextView's width as match_parent, but what you want to do is sandwich it between the ImageView and the TextView you use for your date. Try doing the following (note that I have to switch the order of the TextViews in your layout to make this work).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp" >

    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dp"
        android:padding="3dp" >

            <ImageView
                android:id="@+id/imgIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="News" />
    </LinearLayout>

    <!-- Note: I switched txtDate and txtTitle in your layout file ONLY -->
    <!-- This will NOT change their order in your actual view           -->
    <TextView
        android:id="@+id/txtDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/txtTitle"
        android:layout_marginRight="5dp"
        android:gravity="right"
        android:text="23.09.2013"
        android:textColor="#C0C0C0"
        android:textSize="10sp" />

   <!-- This is the important part, note the android:layout_toLeftOf -->
   <!-- Also remember to change the width back to "wrap_content -->
   <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:layout_toLeftOf="@id/txtDate"  
        android:text="Timberlake's fourth studio album The 20/20 Experience – 2 of 2 was released on September 30, 2013."
        android:textSize="14sp" />

</RelativeLayout>

This should give you your desired view.

Hope this helps. Good luck and happy coding!