Search code examples
androidlistviewtextviewimageviewoverlap

TextView overlapping ImageView in RelativeLayout


I've a listitem.xml inflated in a getView, for video listing. When txtTitle is long, it overlaps the arrowImage on its right, covering it.

Any suggestions to avoid this ? How can the title's text returned on a new line ?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >


<ImageView
    android:id="@+id/imgIcon"
    android:background="@drawable/image_bg"
    android:layout_width="109dp"
    android:layout_height="68dp"
    android:scaleType="fitXY"
    android:padding="3dip"/>

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#b0b0b0"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imgIcon"
        android:typeface="sans"
        android:textSize="12dip"
        android:layout_marginLeft="6dip"
        android:layout_marginRight="6dip"
        android:paddingRight="10dip"
        android:textStyle="bold" />


    <ImageView    
    android:id="@+id/arrowImage"
    android:src="@drawable/arrow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:padding="3dip"
    android:paddingLeft="10dip"
    android:paddingRight="10dip" />

   </RelativeLayout>

Solution

  • try this code

    Add code in your TextView

    android:layout_toLeftOf="@+id/arrowImage" 
    android:layout_toRightOf="@+id/imgIcon"
    

    Final code

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/list_selector"
      android:orientation="horizontal"
      android:padding="5dip" >
    
              <ImageView
                 android:id="@+id/imgIcon"
                 android:background="@drawable/image_bg"
                 android:layout_width="109dp"
                 android:layout_height="68dp"
                 android:scaleType="fitXY"
                 android:padding="3dip"/>
    
             <TextView
                 android:id="@+id/txtTitle"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:textColor="#b0b0b0"
                 android:layout_centerVertical="true"
                 android:layout_toRightOf="@+id/imgIcon"
                 android:layout_toLeftOf="@+id/arrowImage"
                 android:typeface="sans"
                 android:textSize="12dip"
                 android:layout_marginLeft="6dip"
                 android:layout_marginRight="6dip"
                 android:paddingRight="10dip"
                 android:textStyle="bold" />
    
             <ImageView    
                 android:id="@+id/arrowImage"
                 android:src="@drawable/arrow"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentRight="true"
                 android:layout_centerVertical="true"
                 android:padding="3dip"
                 android:paddingLeft="10dip"
                 android:paddingRight="10dip" />
    
    </RelativeLayout>