21.11.2011

Android: ListView with rounded corners

In my last project I needed to implement a ListView with rounded corners, because the app had to be supplied for Android and iPhone and they needed to look somewhat alike.

In this blogpost, I want to show you how I’ve implemented it and hopefully help some people who also want to use ListViews with rounded corners:

First off, we need the drawables for the backgrounds of the Lists entries:

For the entries in the middle of the list, we don’t need rounded corners, so create a xml in your drawable folder “list_entry_middle.xml” with following content:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke android:width="1px" android:color="#ffbbbbbb"/>
        </shape>
    </item>
    <item android:bottom="1dp" android:left="1dp" android:right="1dp">
        <shape>
            <solid android:color="#ffffffff"/>
        </shape>
    </item>
</layer-list>

For the rounded corners, create another xml, “rounded_corner_top.xml”:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke android:width="1dp" android:color="#ffbbbbbb"/>
            <corners android:topLeftRadius="20dp"
                     android:topRightRadius="20dp"
            />
        </shape>
    </item>
    <item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp">
        <shape>
            <solid android:color="#ffffffff"/>
            <corners android:topLeftRadius="20dp"
                     android:topRightRadius="20dp"
            />
        </shape>
    </item>
</layer-list>

Implementing the bottom part is quite the same, just with bottomLeftRadius and bottomRightRadius. (maybe also create one with all corners rounded, if the list only has one entry)

For better usability, also provide drawables with other colors for the different states, that the list item can have and reference them in another xml in the drawable folder (“selector_rounded_corner_top.xml”) as followed:


<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rounded_corner_top_click"
          android:state_pressed="true"/>
    <item android:drawable="@drawable/rounded_corner_top_click"
          android:state_focused="true"/>
    <item android:drawable="@drawable/rounded_corner_top"/>
</selector>

Now do the same for the other backgrounds of the list.

All that is left now, is to assign the right backgrounds in our ListAdapter like following:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    //...
    //skipping the view reuse stuff
    if (position == 0 && entry_list.size() == 1) {
        view.setBackgroundResource(R.drawable.selector_rounded_corner);
    } else if (position == 0) {
        view.setBackgroundResource(R.drawable.selector_rounded_corner_top);
    } else if (position == entry_list.size() - 1) {
        view.setBackgroundResource(R.drawable.selector_rounded_corner_bottom);
    } else {
        view.setBackgroundResource(R.drawable.selector_middle);
    }
    //...
    //skipping the filling of the view
}

Aaaand we’re done.

Tobias Knell

Android: ListView with rounded corners