Set an image to whole of custom ListView

Question

I'm making a messaging app. It works fine. In the conversation activity, I have a custom List View that inflates an xml layout as shown below:

but I want to put an image instead of green background like this:

this is my current 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"
android:background="#79ff93">

<ListView
    android:id="@+id/listMessages"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/divider"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:padding="0dip"
    android:stackFromBottom="true"
    android:transcriptMode="alwaysScroll"
    tools:listitem="@layout/message_left" />

<RelativeLayout
    android:id="@+id/divider"
    android:layout_width="fill_parent"
    android:layout_height="1dip"
    android:layout_above="@+id/relSendMessage"
    android:background="@color/off_white" />

<RelativeLayout
    android:id="@+id/relSendMessage"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white"
    android:paddingLeft="10dp">


    <EditText
        android:id="@+id/messageBodyField"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@+id/sendButton"
        android:layout_alignTop="@+id/sendButton"
        android:layout_marginBottom="-4dp"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@+id/sendButton"
        android:background="@android:color/white"
        android:hint="@string/message_hint"
        android:textColor="@android:color/black"
        android:textSize="14sp" />

    <Button
        android:id="@+id/sendButton"
        android:layout_width="72dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_margin="4dp"
        android:background="@drawable/button_send" />
</RelativeLayout>

Thank you guys.

This seems to have been answered [here](http://stackoverflow.com/a/16139059/5730732) — Zaniel, Dec 30 '15 at 14:49

score 2 · Answer 1 · answered Dec 30 '15 at 14:50

You can use a drawable as your background. Any view can get a drawable background. For your case, perhaps it would be better to put it on the ListView and remove the android:background tag from the base view.

    <ListView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/chat_bg">

chat_bg can be either a png or an xml in your drawable folder. You need to consider different aspect ratios and screen sizes if you choose to use an image.

Pankaj Nimgade · Accepted Answer · 2015-12-30T15:02:27.257

1

in the layout change the attribute for the background which is ListView in this case

to this

android:background="@drawable/index_one"

you should see things something like this

edited Dec 30 '15 at 15:02

answered Dec 30 '15 at 14:56

Pankaj Nimgade

4,529
3
20
30

@Beppe, Thank you so much :) – Pankaj Nimgade Dec 30 '15 at 19:26

score 0 · Answer 3 · answered Dec 30 '15 at 14:50

Just put your ListView inside RelativeLayout with height match parrent, and set background for this layout desierd image.

....
<RelativeLayout
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/divider"
    android:background="@drawable/your_image" >

    <ListView
        android:id="@+id/listMessages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:dividerHeight="0dp"
        android:padding="0dip"
        android:stackFromBottom="true"
        android:transcriptMode="alwaysScroll"
        tools:listitem="@layout/message_left" />

</RelativeLayout>
....

score 0 · Answer 4 · answered Dec 30 '15 at 14:52

0

Placing an ImageView above your ListView in your XML would do the trick.

answered Dec 30 '15 at 14:52

dgngulcan

3,101
1
24
26

Set an image to whole of custom ListView

4 Answers4