CODEWITHSUNDEEP
androidlistviewandroid-listviewhiddenrounded-corners
ThibaultLM
ThibaultLM

Reputation: 31

How to round corners of listview and its child items like overflow:hidden?

I have a problem with one ListView I'm using.

I've defined a ListView with rounded corners. This ListView has a header and several items. Each child view has its own background defined (only color - purple for the header, white for the other items).

The ListView has a background to define rounded corners.

The problem is that the background of the header and other child items are on top of the background of the ListView. As a consequence, I can't see the rounded shape of the ListView.

I'm looking for a way to imitate the overflow:hidden property of CSS, in order to keep the items and the header under the rounded corners given to the ListView.

Is there a solution for that?

Upvotes: 3

Views: 1131

Answers (2)

Andrea Ajek
Andrea Ajek

Reputation: 90

Try to add some padding at the ListView element with android:padding="...", but if your list rows have different backgrounds (or a gradient background) there will be some color discrepancies between the items and the list border.

Alternatively, you could try to use border radius on the top corners of the first list row, and on the bottom corners of the last list row. You can do this setting the proper background drawable xml resource when overriding the getView(...) method of the list Adapter class.

Ex. of first_row_bg.xml (for the first row):

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <gradient
            android:angle="90"
            android:startColor="#b3b3b3"
            android:endColor="#f5f5f5" />
        <corners android:topLeftRadius="12dp"
                 android:topRightRadius="12dp"/>
    </shape>

Ex. of last_row_bg.xml (for the last row):

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <gradient
            android:angle="90"
            android:startColor="#b3b3b3"
            android:endColor="#f5f5f5" />
        <corners android:bottomLeftRadius="12dp"
                 android:bottomRightRadius="12dp"/>
    </shape>

Ex. of border_radius_bg.xml (if the list has only one row):

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <gradient
            android:angle="90"
            android:startColor="#b3b3b3"
            android:endColor="#f5f5f5" />
        <corners android:radius="12dp"/>
    </shape>

Ex. of gradient_bg.xml (for the row in the middle):

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <gradient
            android:angle="90"
            android:startColor="#b3b3b3"
            android:endColor="#f5f5f5" />
    </shape>

Example of getView(...) implementation 

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        //inflate the layout (if necessary) and set the row content.
        ....

        if(data.length==1) { // if we have only one row
            convertView.setBackgroundResource(R.drawable.border_radius_bg); 
        } else if(position==0) { // first row
            convertView.setBackgroundResource(R.drawable.first_row_bg); 
        } else if(position==data.length-1) { // last row
            convertView.setBackgroundResource(R.drawable.last_row_bg);  
        } else { // row in the middle
            convertView.setBackgroundResource(R.drawable.gradient_bg);  
        }
        return convertView;
    }

Obviously, the .xml files should be saved in the "drawable" directory.

Upvotes: 2

Eric
Eric

Reputation: 488

Why not put the listview inside another layout and give to the parent the background resource with round corners?

<LinearLayout ...
    android:background="@drawable/rounded_corners.xml" />

Upvotes: 0

Related Questions