CODEWITHSUNDEEP
androidlistview
vetalitet
vetalitet

Reputation: 703

Increase listview's item height if inner textview's height takes up more than one line

I have a ListView component with the following item layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

    <ImageView
            android:layout_width="42dp"
            android:layout_height="42dp"
            android:background="@drawable/ic_launcher"
            android:id="@+id/event_listview_item_icon"
            android:contentDescription=""
            android:layout_marginTop="9dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/event_listview_item_name"
            android:textSize="18dp"
            android:layout_toRightOf="@+id/event_listview_item_icon"
            android:layout_alignTop="@+id/event_listview_item_icon"
            android:textStyle="bold"
            android:textColor="#FFF"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/event_listview_item_comment"
            android:textSize="14dp"
            android:layout_alignLeft="@+id/event_listview_item_name"
            android:layout_alignBottom="@+id/event_listview_item_icon"/>
</RelativeLayout>

The listview looks like:

enter image description here

But what if I wanted to use a long comment that takes up more than one line, and wraps?

In that case I get a result like:

enter image description here

Could you help me design my xml in such a way that listview items would have a flexible height? And if I use 2 or 3 lines for comment, will everything be visible correctly?

UPDATED

I have changed layout a little bit

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:minHeight="60dp"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

    <ImageView
            android:layout_width="42dp"
            android:layout_height="42dp"
            android:background="@drawable/ic_launcher"
            android:id="@+id/event_listview_item_icon"
            android:contentDescription=""
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/event_listview_item_name"
            android:textSize="18dp"
            android:layout_toRightOf="@+id/event_listview_item_icon"
            android:layout_alignTop="@+id/event_listview_item_icon"
            android:textStyle="bold"
            android:textColor="#FFF"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/event_listview_item_comment"
            android:layout_below="@+id/event_listview_item_name"
            android:textSize="14dp"
            android:layout_alignLeft="@+id/event_listview_item_name"/>
</RelativeLayout>

and now everything is almost done except one strange thing:

enter image description here

Why in case of multiline textview imageview is not centered vertical?

Upvotes: 0

Views: 907

Answers (5)

ishu
ishu

Reputation: 1332

Hi Please Try This Code Use LinearLayout Insted Of 
Relative Layout Relative layout always creat proble and 
when use it in different device it look different.
    -----------
    <?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:orientation="vertical" >

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="2"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/event_listview_item_icon"
                    android:layout_width="42dp"
                    android:layout_height="42dp"
                    android:layout_marginLeft="15dp"
                    android:gravity="center"
                    android:background="@drawable/ic_launcher"
                    android:contentDescription="" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/event_listview_item_name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="dsjfdsssssfgufoioihgfhggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg"
                    android:textColor="#FFF"
                    android:textSize="18dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/event_listview_item_comment"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/event_listview_item_name"
                    android:layout_below="@+id/event_listview_item_name"
                    android:textSize="14dp" />
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

Upvotes: 0

Chirag
Chirag

Reputation: 56925

Use android:layout_below="@+id/event_listview_item_name" for textview that you want to show below any view and remove android:layout_alignBottom="".

Upvotes: 1

Wesam Torman
Wesam Torman

Reputation: 288

you can add margin to the imageview that will increase your item size set the gravity for all of your view center-vertical to be

or but comment textview below the name textview

android:layout_below="@+id/event_listview_item_name"

and give it the id of name textview

Upvotes: 0

Pearl
Pearl

Reputation: 121

Add android:layout_below="@+id/event_listview_item_name" for second textview and remove android:layout_alignBottom="@+id/event_listview_item_icon"

Upvotes: 1

Avijit
Avijit

Reputation: 3824

you have to add the layout_below in the second TextView and remove alignBottom from there like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

    <ImageView
            android:layout_width="42dp"
            android:layout_height="42dp"
            android:background="@drawable/ic_launcher"
            android:id="@+id/event_listview_item_icon"
            android:contentDescription=""
            android:layout_marginTop="9dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/event_listview_item_name"
            android:textSize="18dp"
            android:layout_toRightOf="@+id/event_listview_item_icon"
            android:layout_alignTop="@+id/event_listview_item_icon"
            android:textStyle="bold"
            android:textColor="#FFF"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/event_listview_item_comment"
            android:textSize="14dp"
            android:layout_toRightOf="@+id/event_listview_item_icon"
            android:layout_below="@+id/event_listview_item_name"/>
</RelativeLayout>

Upvotes: 0

Related Questions