CODEWITHSUNDEEP
androidxmlvectorandroid-drawableandroid-vectordrawable
Abdelsalam ElTamawy
Abdelsalam ElTamawy

Reputation: 173

drawing images with layer-lists for android

I have been trying to create a vector similar to this image as an android drawable XML but I have been having a few issues.

! I am trying to create it as a layer-list so I can have several primitives (a circle and 4 rectangles with rounded corners to act as a semi-circle).

here is my XML code for the drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:right="0dp" android:left="0dp">
        <shape
            android:shape="rectangle">

            <solid android:color="#FFFFFF"/>

            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="00dp" android:left="00dp" android:height="40dp" android:width="40dp">
        <shape android:shape="oval">
            <solid android:color="#000000"/>
        </shape>
    </item>
</layer-list>

So the problem is I can't get them to spread out as I want them. At the moment they're all on top of each other. When I try to resize one of them, they all adopt that same size for some reason, making impossible to create the semi-circles. Also when I try to move them with android:top and the like, it would drag the others with it so I am kind of lost on how I am supposed to create the shape I'm looking for.

Any help is appreciated.

Upvotes: 0

Views: 366

Answers (1)

Mohammed Alaa
Mohammed Alaa

Reputation: 3320

I had modified your sample , hope this will help you 

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

<item android:gravity="left|center_vertical" android:right="35dp">
    <shape
        android:shape="rectangle">
        <size android:height="10dp"
            android:width="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:topLeftRadius="10dp"
            android:bottomLeftRadius="10dp"/>
    </shape>
</item>
<item android:gravity="right|center_vertical"  android:left="35dp">
    <shape
        android:shape="rectangle">
        <size android:width="10dp"
            android:height="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:bottomRightRadius="10dp"
            android:topRightRadius="10dp"/>
    </shape>
</item>

<item android:gravity="top|center_horizontal"  android:bottom="35dp">
    <shape
        android:shape="rectangle">
        <size android:width="10dp" android:height="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:topRightRadius="10dp"
            android:topLeftRadius="10dp"/>
    </shape>
</item>

<item android:gravity="bottom|center_horizontal" android:top="35dp">
    <shape android:shape="rectangle">
    <size android:height="10dp"
        android:width="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:bottomRightRadius="20dp"
            android:bottomLeftRadius="20dp"/>
    </shape>
</item>

<item android:gravity="center_horizontal|center_vertical">
    <shape android:shape="oval">
        <size android:height="20dp"
            android:width="20dp"/>
        <solid android:color="#000000"/>
    </shape>
</item>


</layer-list>

Upvotes: 1

Related Questions