Search code examples
androidandroid-studioandroid-xmlandroid-drawableandroid-designer

how I get a custom button with a removed space outside corners


I'm using this tool https://angrytools.com/android/button/ to create custom android button and here is the drawable xml for it

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:topLeftRadius="14dp"
        android:topRightRadius="14dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        />
    <solid
        android:color="@color/turquoise"
        />
    <size
        android:width="0dp"
        android:height="60dp"
        />
</shape>

enter image description here but as appear in the image I make make the orange custom button over layout with a turquoise background color and above it I make another custom button with turquoise.

it appears in the corners of orange custom button there is an effect so how can I remove this effect like this image

enter image description here


Solution

  • check this sample

    your xml layout file

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
    
        <TextView
            android:layout_width="match_parent"
            android:background="@drawable/turquoise_bg"
            android:layout_height="50sp"/>
    
        <Button
            android:background="@drawable/red_bg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    </LinearLayout>
    

    in drawable folder red_bg.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#40e0d0" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="14dp"
                android:topRightRadius="14dp" />
            <solid android:color="#FF0000" />
            <size android:height="60dp" />
        </shape>
     </item>
     </layer-list>
    

    turquoise_bg.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="14dp"
        android:topRightRadius="14dp" />
    <solid android:color="#40e0d0" />
    <size android:height="60dp" />
    </shape>