Relative layout messed up in listview

Problem description

I use PullToRefreshListview to display a folder list, the list item layout used a customized layout.

In the list item layout, I use RelativeLayout as a root container. When run the apk, the layout of the ListView works fine at the begining, but problem occurs when click into a folder which has a lost of sub-folders and files.

The sub-folders layout is messed up. Weird things is that not all of the sub-folders layout get messy, only the sub-folders with lost of files and sub-sub-folders. I tested it via a 1280 * 720 pix, hdpi screen Android device with a Kitkat OS installed.

messy layout screenshot

enter image description here

xml code

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="48dp" android:background="@color/white"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/list_item_icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:paddingBottom="4dp"
        android:src="@drawable/folder" />

    <ImageView
        android:id="@+id/list_item_action"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="2dp"
        android:layout_marginEnd="2dp"
        android:layout_width="60dp"
        android:src="@drawable/folder"
        android:layout_height="fill_parent" />

    <TextView
        android:id="@+id/list_item_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/list_item_icon"
        android:layout_toEndOf="@id/list_item_icon"
        android:layout_toStartOf="@id/list_item_action"
        android:layout_toLeftOf="@id/list_item_action"
        android:lines="1"
        android:singleLine="true" android:text="list_item_titlelist_item_titlelist_item_titlelist_item_titlelist_item_titlelist_item_title"
        android:textColor="#282828"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/list_item_subtitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/list_item_title"
        android:layout_toRightOf="@id/list_item_icon"
        android:layout_toLeftOf="@id/list_item_action"
        android:layout_toEndOf="@id/list_item_icon"
        android:layout_toStartOf="@id/list_item_action"
        android:textColor="#555555" android:text="list_item_titlem_titlelist_item_title"
        android:textSize="12sp" />

</RelativeLayout>

Preview in Graphical layout tool

enter image description here

Upvotes: 0

Answers (2)

M S Gadag

Reputation: 2057

try this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="48dp"
    android:background="@color/white"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/list_item_icon"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/folder" />

    <ImageView
        android:id="@+id/list_item_action"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/folder" />

    <TextView
        android:id="@+id/list_item_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/list_item_action"
        android:layout_toRightOf="@id/list_item_icon"
        android:gravity="left"
        android:lines="1"
        android:paddingLeft="8dp"
        android:singleLine="true"
        android:text="list_item_titlelist_item_titlelist_item_titlelist_item_titlelist_item_titlelist_item_title"
        android:textColor="#282828"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/list_item_subtitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/list_item_title"
        android:layout_below="@id/list_item_title"
        android:layout_toLeftOf="@+id/list_item_action"
        android:gravity="left"
        android:paddingLeft="8dp"
        android:text="list_item_titlem_titlelist_item_title"
        android:textColor="#555555"
        android:textSize="12sp" />

</RelativeLayout>

Upvotes: 1

Hareshkumar Chhelana

Reputation: 24848

Use LinearLayout with weight instead RelativeLayout which can be easily done your requirement :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/white"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/list_item_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/folder" />


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">
        <TextView
            android:id="@+id/list_item_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lines="1"
            android:singleLine="true" 
            android:text="list_item_titlelist_item_titlelist_item_titlelist_item_titlelist_item_titlelist_item_title"
            android:textColor="#282828"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/list_item_subtitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#555555" 
            android:text="list_item_titlem_titlelist_item_title"
            android:textSize="12sp" />

    </LinearLayout>


    <ImageView
        android:id="@+id/list_item_action"
        android:layout_width="60dp"
        android:src="@drawable/folder"
        android:layout_height="match_parent" />
</LinearLayout>