textview overlapping in relativeLayout

Question

I m having a Custom List for a chat application.

It has basically Two imageView in the either side and textView for the "chat message" in the middle. Below all the three above there is textview for time at the bottom. The screenshot below would better suffice.

The problem here is the time textView is overlapping over the imageView if the text of the "chat message" is only line.

This problem is better corrected with html-css as float clear:both.

I went through another answer for this with a nested RelativeLayout within LinearLayout here but i want to keep it clean with a single RelativeLayout.

The layout xml is as below -

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

<ImageView
    android:id="@+id/icon1"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/msgText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom"
    android:textSize="20sp"
    android:layout_marginLeft="42dp"
    android:layout_marginRight="42dp"
    android:text="this is a test" />

<ImageView
    android:id="@+id/icon2"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentRight="true"
    android:src="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/timeText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="40px"
    android:layout_marginTop="10dp"
    android:layout_below="@+id/msgText"
    android:layout_alignParentRight="true"
    android:gravity="right"
    />
</RelativeLayout>

The screenshot for this as below -

may be some prob with your browser. Here - http://i.stack.imgur.com/lAWim.png — Pradyut Bhattacharya, Oct 19 '15 at 08:30

luiscosta · Answer 1 · 2015-10-19T08:43:59.863

1

You have this:

android:layout_below="@+id/msgText"

Change to this:

android:layout_below="@id/icon2"

EDIT

Put a minHeight on your message TextView which is equal to the image height and don't change as I told you above.

edited Oct 19 '15 at 08:43

answered Oct 19 '15 at 08:20

luiscosta

855
1
10
16

then it is overlapping with the msgText if that is multi-line. Either way it is overlapping with something. – Pradyut Bhattacharya Oct 19 '15 at 08:24

score 1 · Answer 2 · answered Oct 19 '15 at 08:46

You should use LinearLayout instead

The layout example which avatar on the left side

<?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="wrap_content"
    android:orientation="vertical" >

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

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="50dp"
            android:background="#ff0000"
            android:layout_height="50dp" />

        <TextView
            android:id="@+id/content"
            android:layout_width="0dp"
            android:text="content here"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

    <TextView
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:text="date here"
        android:layout_height="wrap_content" />

</LinearLayout>

The layout example which avatar on the right side

<?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="wrap_content"
    android:orientation="vertical" >

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

        <TextView
            android:id="@+id/content"
            android:layout_width="0dp"
            android:text="content here"
            android:gravity="right"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="50dp"
            android:background="#ff0000"
            android:layout_height="50dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:text="date here"
        android:layout_height="wrap_content" />

</LinearLayout>

textview overlapping in relativeLayout

2 Answers2