Rounding top and bottom corners of a listview

Question

This is my issue I can't seem to round the edges on the bottom of my listview.

I've tried a couple of methods where you create a shape for the backgroup resource, tried it programmatic ally and in the layout xml's but it does not do anything at all.

Like I either did it wrong which I doubt since I am familiar with shapes, or something else interferes with my attempts.

Either way I need help is what I'm getting at.

Here's some of the xml's that make up what you're looking at.

This makes up the actual dialog. (settings_dialog.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#BB000000"
                android:gravity="center">

    <ImageView
        style="@style/CloseButtonStyle"
        android:id="@+id/ivCancel_SD"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_above="@+id/rlContainer_SD"
        android:layout_toRightOf="@+id/rlContainer_SD"
        android:layout_toEndOf="@+id/rlContainer_SD"/>

    <RelativeLayout
        style="@style/SettingsDialogStyle"
        android:id="@+id/rlContainer_SD"
        android:layout_width="800dp"
        android:layout_height="600dp"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <TextView
            style="@style/SettingsHeaderStyle"
            android:id="@+id/tvSettingsLabel_SD"
            android:layout_width="330dp"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="@string/sd_header_label"/>


               <ListView
        style="@style/SettingsListStyle"
        android:id="@+id/lvOptions_SD"
        android:background="@drawable/bg_listview_corners"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvSettingsLabel_SD"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    </RelativeLayout>

</RelativeLayout>

This is located in my styles.xml with a bunch of other stuff that has no relation to this.

<style name="SettingsListStyle">
    <item name="android:divider">@color/table_divider_color</item>
    <item name="android:dividerHeight">1dp</item>
    <item name="android:paddingTop">40dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
    <item name="android:paddingBottom">2dp</item>
</style>

And this makes up a list_item. (settings_list_item.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:padding="5dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            style="@style/SettingsOptionNameStyle"
            android:id="@+id/tvOptionName_SLI"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <TextView
            style="@style/SettingsOptionDescStyle"
            android:id="@+id/tvOptionDesc_SLI"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

    </LinearLayout>


</RelativeLayout>

And here is the shape I used to try and round the edges.

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/bg_listview_corners" android:shape="rectangle"> 
    <corners android:radius="30dp" />
</shape>

I've also tried this piece for the shape.

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/bg_listview_corners" android:shape="rectangle"> 
        <corners 
         android:bottomRightRadius="30dp" 
         android:bottomLeftRadius="30dp" />
</shape>

This is all the information I think you'll need to help me on my way. In case I missed some information or you just have questions don't hesitate to ask.

Update 1: I figured out it somehow only shapes the container of the listview but not the listview itself.
Any ideas?

try to give more padding from bottom and top to your ListView — dgngulcan, Feb 23 '16 at 13:34
@Opiatefuchs look in the topmost codepiece, I call the background there in the listview element. Also I added another codepiece which is my shape — Maarten, Feb 23 '16 at 14:15

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

you can increase the padding (paddingRight, paddingLeft, and paddingBottom)

<style name="SettingsListStyle">
<item name="android:divider">@color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">7dp</item>
<item name="android:paddingRight">7dp</item>
<item name="android:paddingBottom">3dp</item>

or use mask background over the listview (like this Post which use 9-Patch as mask, or you can use your "bg_listview_corners.xml" background for the mask)

edited May 23 '17 at 12:07

Community

1
1

answered Feb 23 '16 at 16:02

Sally

950
9
15

Padding wouldn't work as it since that would mess up the alignment of the list with the rest of the layout. I ended up solving it with a mask, thanks for the hint. – Maarten Feb 24 '16 at 08:49

score 0 · Answer 2 · answered Feb 23 '16 at 13:54

You can create a custom background drawable selector file called custom_list.xml in your drawable folder with this code in it

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/list_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/list_focused" android:state_focused="true"/>
<item android:drawable="@drawable/list_default"/>

</selector>

then create another file list_default.xml in your drawable folder with this code in it

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<gradient
    android:angle="270"
    android:endColor="#1c95a0"
    android:startColor="#1c95a0" />
<corners android:radius="5dip" />

</shape>

finally set the background property of the list view to

android:background="@drawable/custom_list"

score 0 · Answer 3 · answered Feb 24 '16 at 08:52

Ended up using a mask as suggested by @Sally here is how I changed it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#BB000000"
                android:gravity="center">

    <ImageView
        style="@style/CloseButtonStyle"
        android:id="@+id/ivCancel_SD"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_above="@+id/rlContainer_SD"
        android:layout_toRightOf="@+id/rlContainer_SD"
        android:layout_toEndOf="@+id/rlContainer_SD"/>

    <RelativeLayout
        style="@style/SettingsDialogStyle"
        android:id="@+id/rlContainer_SD"
        android:layout_width="800dp"
        android:layout_height="600dp"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <TextView
            style="@style/SettingsHeaderStyle"
            android:id="@+id/tvSettingsLabel_SD"
            android:layout_width="330dp"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="@string/sd_header_label"/>


        <ListView
            style="@style/SettingsListStyle"
            android:id="@+id/lvOptions_SD"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvSettingsLabel_SD"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"/>

    </RelativeLayout>

        <ImageView
            android:layout_width="800dp"
            android:layout_height="600dp"
            android:layout_centerVertical="true"
            android:background="@drawable/bg_listview_corners"/>

</RelativeLayout>

I added an ImageView on top of the relative layout matching the container. This is the drawable I used for masking the layout.(bg_listview_corners.xml)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item>
        <shape android:shape="rectangle" >
            <stroke
                android:width="12dp"
                android:color="@color/app_night_sky_color" />
            <padding android:left="6px"
            android:top="6px"
            android:right="6px"
            android:bottom="6px"/>

            <corners android:radius="30dp" />
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >

            <stroke
                android:width="6dp"
                android:color="@color/popup_bg_color" />

            <corners android:radius="30dp" />
        </shape>
    </item>
</layer-list>

Rounding top and bottom corners of a listview

3 Answers3