android:layout_below not properly working

Question

I have a RelativeLayout with three views. Both TextViews should be to right of the ImageView and the seconds one should be below the first TextView .

Code:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#bdbdbd"
    android:paddingBottom="15dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="15dp" >

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_centerVertical="true"
        android:src="@drawable/default_avatar" />

    <TextView
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/avatar"
        android:text="Chris"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/university"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username"
        android:layout_toRightOf="@id/avatar"
        android:text="Oxford"
        android:textSize="13sp" />
</RelativeLayout>

Result:

After removing android:layout_centerVertical="true" from the first TextView, everything works as expected (except that it's not vertical).

Why is this and how can I make the first TextView vertical centered?

Answer 1

For some reason the RelativeLayout's height param is giving the problem. Try setting it to 94dp (64 of the image + 15 of bottom padding + 15 of top padding). This should solve the problem

Answer 2

@f. de is right. The problem is android:layout_height="wrap_content" , as the height of relative layout is determined my it's content setting it's content to vertically center based on it's height wont work. You need to set this to match_parent or to a fixed value.

Answer 3

You also could wrap your data, in your case Name and University inside another RelativeLayout or any other ViewGroup and make it to align center.

Like that

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#bdbdbd"
    android:paddingBottom="15dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="15dp">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_centerVertical="true"
        android:src="@drawable/default_avatar" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_toEndOf="@id/avatar"
        android:layout_toRightOf="@id/avatar">

        <TextView
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Chris"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/university"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/username"
            android:text="Oxford"
            android:textSize="13sp" />
    </RelativeLayout>
</RelativeLayout>

This makes sense in order to group related views (TextViews) and also it produces better result because whole container is aligned center, in your initial example Name view is centered vertically but other view is below it and it makes it to look not as good as it will in case of container where baseline is vetical center of container.

Answer 4

Since trying to place both TextViews center vertical, they overlap. Use the padding attribute for the advantage. So to align them as required, use this code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#bdbdbd"
    android:paddingBottom="15dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="15dp" >

<ImageView
    android:id="@+id/avatar"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_centerVertical="true"
    android:src="@drawable/default_avatar" />

<TextView
    android:id="@+id/username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/avatar"
    android:text="Chris"
    android:paddingBottom="7dp"
    android:textSize="16sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/university"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/username"
    android:layout_toRightOf="@id/avatar"
    android:paddingTop="7dp"
    android:text="Oxford"
    android:textSize="13sp" />
</RelativeLayout>

I wish this solves your problem...

Answer 5

The problem is with your RelativeLayout's height attribute, if you change it to "match_parent" then it will work the way you wanted.

Or

you can make another Relativelayout in your main RelativeLayout who's height is "match_parent". After doing so you can place everything at any place without any problem.