CODEWITHSUNDEEP
androidlistviewlayout
Androider
Androider

Reputation: 21335

How do you put a border around a ListView?

I would like to put a border around my listview that is a few pixes wide. I want it to to go around the entire listview piece. How can I do this? thanks

Upvotes: 47

Views: 84189

Answers (5)

Tarit Ray
Tarit Ray

Reputation: 994

Though its long time the question posted, but hope it may help new comer !!!

Create back.xml under drawable folder of your project!!! 

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <!-- use this for transparent -->
    <!-- <solid android:color="#00000000" /> -->
    <!-- use this for a background colour -->
    <solid android:color="#FFF" />
    <stroke android:width="4dip" android:color="#FFCC00" />
</shape>

Now set the same to your listview layout as background .

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/colorWhite"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Header"
            android:textSize="40dp" />

        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            **android:background="@drawable/back"** />
    </LinearLayout>

so it look like as following :

listview with background border

Here the border will around your total list view, not around each view.

TO give separate border of your listview do the bellow thing :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/colorWhite"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Header"
        android:textSize="40dp" />

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@drawable/back"
        android:divider="#FFCC00"
        android:dividerHeight="2dp"/>
</LinearLayout>

and the UI will appear will comes like bellow:

listview with background of each view

Upvotes: 1

Pinki
Pinki

Reputation: 21939

For this first take the LinearLayout and assign that linear layout with some color and take a list view in that linear layout. Set the android:layout_margin="10dp" property for list view . That means on all 4 sides 10dp space will be left. This shown as the border of the list view.

Upvotes: 18

Jack.Ramsden
Jack.Ramsden

Reputation: 414

There is a much easier way to create borders and other graphic details on views.

You should use 9 Patch images.They allow you to create any sort of background you like including borders. The link explains all. To verify here is an image of a bordered list.

Here is an image of the 9 patch image I used to make that border.

Upvotes: 1

Lo Juego
Lo Juego

Reputation: 1325

Simplest way:

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="0dp"       
    android:divider="#FFCC00"
    android:dividerHeight="2dp"
    android:layout_weight="1" />

Upvotes: 15

Ben Neill
Ben Neill

Reputation: 3009

The other way to do it is to create a border resource that can then be reused, and it also means you won't need to create extra layout to implement it.

  1. create a drawable resource

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <!-- use this for transparent -->
   <!-- <solid android:color="#00000000" /> -->
   <!-- use this for a background colour -->
   <solid android:color="#FFF" />
   <stroke android:width="2dip" android:color="#FF0000" />
</shape>

  2. then set it as the listview background

    <ListView
    android:id="@id/android:list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/border_ui" />

Upvotes: 92

Related Questions