Android: ListView, problem with rounded corners

Question

I have ListView with rounded corners implemented like bellow.

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/list_bg"
    android:divider="#dbdbdb"
    android:dividerHeight="1sp"
    android:cacheColorHint="#00000000"
    android:descendantFocusability="afterDescendants"
    android:scrollbars="vertical">
</ListView>

where list_bg.xml is:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <corners android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp" 
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp"
            />
</shape>

This give me rounded corners. The problem is that each items are RelativeLayout with TextView on the left side and ImageButton on the right side. Both views have custom graphic on pressed, foucused and default state. Something like this.

+------------------------------------+
|      TextView        | ImageButton |
+------------------------------------+

The problem is that custom graphic cover ListView background and thus rounded corners on first and last item. Everything is okay when scrolling.

I've written custom adapter and in getView method I set proper bg for items.

@Override
public View getView(int position, View view, ViewGroup parent) {        
    ...
    if(position == 0) {
        mItemView.setBackgroundResource(R.drawable.cell_item_first_selector);
        mImgBtn.setBackgroundResource(R.drawable.cell_btn_first_selector);
    }
    else if (position == mData.size() -1) {
        mItemView.setBackgroundResource(R.drawable.cell_item_last_selector);
        mImgBtn.setBackgroundResource(R.drawable.cell_btn_last_selector);
    } 
    else {
        mItemView.setBackgroundResource(R.drawable.cell_item_def_selector);
        mImgBtn.setBackgroundResource(R.drawable.cell_btn_def_selector);
    }
    ... 
}

It works, but I'm not sure that is good solution. Is there any other way to automatically round corners in Android Views, not just by setting background?

score 2 · Answer 1 · answered Nov 28 '12 at 10:45

public class ClippedListView extends ListView {

/**
 * @param context
 */
public ClippedListView(Context context) {
    super(context);
}

/**
 * @param context
 * @param attrs
 */
public ClippedListView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void dispatchDraw(Canvas canvas) {
    float radius = 10.0f;
    Path clipPath = new Path();
    RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
    clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
    canvas.clipPath(clipPath);
    super.dispatchDraw(canvas);
}
}

First clipping was not working, then using

setLayerType(View.LAYER_TYPE_SOFTWARE, null)

on my clippedListView solve the issue. My items' background are not messing with my corners anymore!

Brilliant solution. Saved my day. Do you have any idea how this can be achieved without the SetLayerType (Which requires API 11)? — Kenneth, Sep 04 '13 at 08:34

score 0 · Answer 2 · answered Jul 11 '11 at 07:47

0

Well, if you need this background for the items in the list, you should attach the background to the item layout, and not to the list view.

answered Jul 11 '11 at 07:47

Kumar Bibek

9,016
2
39
68

It doesn't help. Still first and last items graphic hide rounded corners. Is there only solution to set different graphics for first and last item? – Adrian Jul 11 '11 at 08:43
Well, it should work. Can you post some more code of the layout for your items? – Kumar Bibek Jul 11 '11 at 09:37

Android: ListView, problem with rounded corners

2 Answers2

Linked