androidxmlshapeslayer-list

Drawing custom oval and rectangle XML shape as buttom background


I want to create custom button background that look like this:

enter image description here

I can't use corners attribute in rectangle shape because its rounds only the corner and the middle of the left side is straight or whenver I set too much value to that attribute it looks like that.
enter image description here

I hope that i can combine 2 shapes (oval and rectangle) like in here but whenever I try to rotate that layer-list it doesnt look like wanted shape.


Solution

  • Try like this:

                 <Button
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/test"
                    android:text="Button"
                    android:textColor="@color/black"
                  />
    

    and @drawable/test will be like this:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:left="0dp"
            android:right="-100dp"
            android:top="-30dp"
            android:bottom="-30dp">
    
            <shape android:shape="oval">
                <solid
                    android:color="@android:color/white" />
            </shape>
        </item>
    
    
    </layer-list>
    

    Note: I know this is not the best solution. But for now this can help. and if you want to increase the width of Button then change the below attributes accordingly to fit your need.

    android:top="-30dp"
    android:bottom="-30dp"
    

    and the result will look like this:

    enter image description here