RelativeLayout layout_below issue in android

Question

I am having an issue with getting my date TextView to be below my unit TextView when the activity name is too long in the rows for my ListView.

Here is my row layout code for my listview:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Name"
    android:id="@+id/activityName"
    android:textSize="25dp"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/pound"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="unit"
    android:id="@+id/unit"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="5dp"
    android:textSize="20dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="/"
    android:id="@+id/slash"
    android:layout_toLeftOf="@+id/unit"
    android:layout_centerVertical="true"
    android:layout_marginRight="2dp"
    android:textSize="20dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Number"
    android:id="@+id/number"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@+id/slash"
    android:layout_marginRight="5dp"
    android:textSize="20dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="#"
    android:id="@id/pound"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@+id/number"
    android:layout_marginRight="2dp"
    android:textSize="20dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Date"
    android:id="@+id/date"
    android:layout_below="@+id/unit"
    android:layout_alignRight="@+id/unit"
    android:textSize="10sp" />
</RelativeLayout>

My ListView rows look like this:

Question:

How do I get my date TextView to always be below my unit TextView? Also for the pound, number, slash, and unit TextViews to be all on the same line and all above the date Textview. As well as the activityName TextView to be the left of the pound TextView so it does not overlap with the pound, number, slash, and unit TextViews. Like what the walk and exercise rows look like.

Answer 1

Take a LinearLayout for right sided items(unit,date,slash etc.) put it in relative layout and set as align_parentright = "true"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="10dip"
    android:paddingRight="10dip" >

    <TextView
        android:id="@+id/activityName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/verticalLayout"
        android:text="New Name"
        android:textSize="25sp" />

    <LinearLayout
        android:id="@id/verticalLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/pound"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:text="#"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/unit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dp"
                android:text="unit"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/slash"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:text="/"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Number"
                android:textSize="20sp" />
        </LinearLayout>

        <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="Date"
            android:textSize="10sp" />
    </LinearLayout>

</RelativeLayout>

Answer 2

Try putting the pound TextView & the date TextView inside a vertical LinearLayout, and then have the LinearLayout be aligned to center vertically and to the right.

Hope this helps :)

Answer 3

// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:gravity="center">

    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="New Name"
        android:id="@+id/activityName"
        android:textSize="25dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="#"
        android:id="@+id/pound"
        android:layout_marginRight="2dp"
        android:textSize="20dp" />



    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Number"
        android:id="@+id/number"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:textSize="20dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/"
        android:id="@+id/slash"
        android:layout_marginRight="5dp"
        android:textSize="20dp" />



    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="5dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="unit"
            android:id="@+id/unit"
            android:textSize="20dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Date"
            android:id="@+id/date"
            android:layout_marginTop="3dp"
            android:textSize="10sp" />
    </LinearLayout>
</LinearLayout>

Answer 4

If you have such problem in ListView make sure that you use proper inflation method. Parent view group must be specified for correct inflation.

mLayoutInflater.inflate(R.layout.listitem, parent, false);

Instead of

mLayoutInflater.inflate(R.layout.listitem, null);