Bottom Rounded Corners - Android

Question

I have been trying to fix this but for whatever I do, I just cannot get the Bottom Rounded Corners the way I want, I am using the following

<?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="0dp"  />
            <solid android:color="?attr/colorPrimaryDark"  />
      </shape>
   </item>
   <item android:top="0dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="0dp"/>
            <solid android:color="?attr/colorPrimary"/>
             <corners android:radius="15dp" android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="0dp" android:topRightRadius="0dp"/> 
        </shape>
   </item>
</layer-list>

The Results are the following

It creates the corners but it adds grey color (colorPrimaryDark) to it where I want it to be white (colorPrimary") with a grey line - Any idea how I accomplish this?

ADM · Answer 1 · 2019-10-23T15:46:57.817

1

If you only want bottom border a Shape drawable will be enough . You do not need a layer-list for it . try this

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="@color/green"/>
<solid android:color="?attr/colorPrimary" />
<corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp" />
</shape>

The problem with your current code is first item have a solid color set . this is why the gray part showing .

edited Oct 23 '19 at 15:46

answered Oct 23 '19 at 15:36

ADM

20,406
11
52
83

Hey thanks for the reply but that does not draw a line :) See results here https://imgur.com/EgbNK6P – Ali Oct 23 '19 at 15:44
@Ali change `stroke` to `` – Sergey Glotov Oct 23 '19 at 15:46
Not sure about your output .. cause i can not see the image its all white .. I guess you need [A Card view with Bottom border only](https://stackoverflow.com/questions/34454182/round-only-top-corner-of-cardview) – ADM Oct 23 '19 at 15:50
@SergeyGlotov if you mean `` that also adds a line at the top, see results here https://imgur.com/mR4Y1Ym – Ali Oct 23 '19 at 15:50

score 1 · Accepted Answer · answered Oct 23 '19 at 16:00

A little hack is possible to get rid of line on top and sides: set negative offsets.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
            android:left="-1dp"
            android:right="-1dp"
            android:top="-1dp">
        <shape android:shape="rectangle">
            <stroke
                    android:width="1dp"
                    android:color="?attr/colorPrimaryDark" />
            <solid android:color="?attr/colorPrimary" />
            <corners
                    android:bottomLeftRadius="15dp"
                    android:bottomRightRadius="15dp"
                    android:radius="15dp"
                    android:topLeftRadius="0dp"
                    android:topRightRadius="0dp" />
        </shape>
    </item>

</layer-list>

Not sure will it work correctly on all devices / Android versions or not.

Hey, Righto, I know what you did there :) I had to do `android:top="-2dp"` to make it invisible on OREO & PIE (API 28) , That's gonna be tricky I think — Ali, Oct 23 '19 at 16:09
as on AndroidX on Pixel 3XL with high DPs I had to go `-3dp` to make it invisible - I guess there is no actual solution to it — Ali, Oct 23 '19 at 16:15

Bottom Rounded Corners - Android

2 Answers2