CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-studioshapes
Jay
Jay

Reputation: 5084

Creating this shape (Attached picture) in Android XML?

I know this question is very brief but how can I create this shape in XML for an Android Studio project?

enter image description here

It seems like I can create a rectangle and then remove a semi circle portion from it but achieving that effect in XML seems very difficult. Has anyone done this before?

Upvotes: 2

Views: 3445

Answers (2)

Veaceslav Gaidarji
Veaceslav Gaidarji

Reputation: 4301

Create such background with pure xml drawables is always tricky, but possible.

I've created button you need in xml. Add this files to your drawable folder:

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!-- inset - moves circle to the left-->
        <inset android:insetLeft="-150dp">
            <shape android:shape="ring"
                    android:thicknessRatio="7"
                    android:innerRadius="0dp"
                    android:useLevel="false"
                    >
                <stroke android:width="2dp" android:color="#000000"/>
                <solid android:color="#ffffff"/>
            </shape>
        </inset>
    </item>
</selector>

custom_button_default.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="#00ff00"/>
            <stroke
                    android:color="#000000"
                    android:width="2dp"/>
        </shape>
    </item>
    <item android:drawable="@drawable/circle" />
</layer-list>

custom_button_pressed.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="#dddddd"/>
            <stroke
                    android:color="#000000"
                    android:width="2dp"/>
        </shape>
    </item>

    <item android:drawable="@drawable/circle" />

</layer-list>

custom_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/custom_button_pressed" />
    <item android:drawable="@drawable/custom_button_default"/>
</selector>

Set custom_button_selector drawable as a background of your view in layout:

<Button
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:id="@+id/button"
        android:background="@drawable/custom_button_selector"
        />

You probably will have to adjust circle insetLeft value and button width, height in layout. Would be better to have this variables defined in values/dimens.xml.

Default state:

Default state

Pressed state:

Pressed state

I've tested it on Nexus 5 and Nexus 7 - button background looks the same.

Upvotes: 4

Ahmad Aghazadeh
Ahmad Aghazadeh

Reputation: 17131

Hi you ca use convert online tools http://www.online-convert.com/ after convert svg to xml android file this site http://inloop.github.io/svg2android/

Upvotes: 0

Related Questions