Set Background in ListView Item

Question

Hello i have custom ListView Adapter. I try to set background image , but i cannot set the height of each item. In each item i have this following xml layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listMenuItem"
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:background="@drawable/nasi_goreng">

    <!-- Thumbnail Image -->
    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/thumbnail"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="8dp" />

    <!-- Menu Title -->
    <TextView
         android:id="@+id/menuTitle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignTop="@+id/thumbnail"
         android:layout_toRightOf="@+id/thumbnail"
         android:textSize="@dimen/menuTitle"
         android:textStyle="bold" />

    <!-- Post Date -->
    <TextView
        android:id="@+id/postDate"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/menuTitle"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@+id/thumbnail"
        android:textSize="@dimen/postDate" />

</RelativeLayout>

But the result is like this :

Update : here is my ListView xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView 
        android:id="@+id/list" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_row_selector">
    </ListView>

</RelativeLayout>

List Selector xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/list_row_bg" android:state_pressed="false" android:state_selected="false"></item>
    <item android:drawable="@drawable/list_row_bg_hover" android:state_pressed="true"></item>
    <item android:drawable="@drawable/list_row_bg_hover" android:state_pressed="false" android:state_selected="false" ></item>

</selector>

How to fix height??

Thank you

Answer 1

here's an example from androidhive which works as it is expected:

<?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="20dp"
    android:background="@color/feed_bg"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="@dimen/feed_item_margin"
        android:layout_marginRight="@dimen/feed_item_margin"
        android:layout_marginTop="@dimen/feed_item_margin"
        android:background="@drawable/bg_parent_rounded_corner"
        android:orientation="vertical"
        android:paddingBottom="@dimen/feed_item_padding_top_bottom"
        android:paddingTop="@dimen/feed_item_padding_top_bottom" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/feed_item_padding_left_right"
            android:paddingRight="@dimen/feed_item_padding_left_right" >

            <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/profilePic"
                android:layout_width="@dimen/feed_item_profile_pic"
                android:layout_height="@dimen/feed_item_profile_pic"
                android:scaleType="fitCenter" >
            </com.android.volley.toolbox.NetworkImageView>

            <LinearLayout
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingLeft="@dimen/feed_item_profile_info_padd" >

                <TextView
                    android:id="@+id/name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/feed_item_profile_name"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/timestamp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="@color/timestamp"
                    android:textSize="@dimen/feed_item_timestamp" />
            </LinearLayout>

            <Button
                android:id="@+id/button1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:focusable="false"
                android:background="@drawable/sharebutton" />

        </LinearLayout>

        <TextView
            android:id="@+id/txtStatusMsg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="5dp"
            android:paddingLeft="@dimen/feed_item_status_pad_left_right"
            android:paddingRight="@dimen/feed_item_status_pad_left_right"
            android:paddingTop="@dimen/feed_item_status_pad_top" />

        <TextView
            android:id="@+id/txtUrl"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:linksClickable="true"
            android:paddingBottom="10dp"
            android:paddingLeft="@dimen/feed_item_status_pad_left_right"
            android:paddingRight="@dimen/feed_item_status_pad_left_right"
            android:textColorLink="@color/link" />

        <info.androidhive.listviewfeed.FeedImageView
            android:id="@+id/feedImage1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:scaleType="fitXY"
            android:visibility="visible" />
    </LinearLayout>

</LinearLayout>

see the profilepic section. it's size i.e, height and width both are fixed and it works...

so how about isolating the imageview with a different layout with fill_parent and wrap_content params while the imageview params are fixed to dp's

Answer 2

Design the background image according to your need. Decide the size(width & height) of list item and design an image of that size and then use it as background image. If you want to use this app in tab also then design image in multiple size (according to android image scaling)

Read this link (http://developer.android.com/guide/practices/screens_support.html) for more details.

Following are the required guidelines for image resource.

Note: For other screen density android prefers hdpi, xhdpi, xxhdpi, xxxhdpi.

So we may consider scaling ratio as 2:3:4:6:8 for each icon and image.

• mdpi : 2x (baseline)
• hdpi : 3x
• xhdi : 4x
• xxhdi : 6x
• xxxhdpi : 8x

Answer 3

Try to set RelativeLayout android:layout_height="wrap_content" instead of android:layout_height="80dp" if its not worked for you

Please post your excepted result

May be the problem comes from your list selector can you post your list selector

Answer 4

android:layout_width & android:layout_height should be specified in dp's in this case, otherwise it will take as much space as the background image needs...

Answer 5

The effect of setting background image on normal view is not very good. This relativelayout has conflict when drawing this image with its fixed height.If you want to show this image with better performance, you should add a ImageView to this layout.