CODEWITHSUNDEEP
androidxmlkotlindrawableshapes
Sabbullo
Sabbullo

Reputation: 1

Android Drawable XML Background shape

I'm trying to create a drawable shape background that shoud look like this (the orange shape):

enter image description here

Now, i'm working with the layer list element and two shape, a rectangle and an oval, to try to achieve that, but the result are unsatisfactory. That's my code. Thanks to everyone for the help.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <size android:height="200dp"
            android:width="250dp"/>
        <solid android:color="@color/colorBackground"/>
    </shape>
</item>

<item android:top="0dp" android:gravity="top">
    <shape android:shape="rectangle">
        <size android:height="175dp"
            android:width="200dp"/>
        <solid android:color="@color/colorPrimary"/>
    </shape>
</item>

<item android:bottom="0dp"
      android:top="0dp"
      android:gravity="center_horizontal|bottom">
    <shape android:shape="oval">
        <size android:height="50dp" />
        <solid android:color="@color/colorPrimary"/>
    </shape>
</item>
</layer-list>

Upvotes: 0

Views: 795

Answers (1)

ΓDΛ
ΓDΛ

Reputation: 11060

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

    <!-- Container GRAY rectangle -->
    <item>
        <shape android:shape="rectangle">

            <size
                android:width="250dp"
                android:height="100dp" />

            <solid
                android:color="@android:color/darker_gray" />
        </shape>
    </item>

    <!-- Top WHITE oval shape -->
    <item
        android:left="-25dp"
        android:right="-25dp"
        android:top="-50dp"
        android:bottom="50dp">

        <shape android:shape="oval">

            <solid
                android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

Use;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@android:color/black"
    android:padding="16dp">

    <!-- Custom Footer -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_shape">

    </LinearLayout>
</LinearLayout>

enter image description here

You can use it by adjusting the color settings.

Source : how to create a semi oval shape (bending a line)

Upvotes: 1

Related Questions