Android Shape: Circle with tick mark

Question

I am trying to get a circle with a tick mark in the middle using a shape drawable.

This is what I would like:

Could you please suggest me how to approach it?

Masoud Mokhtari · Accepted Answer · 2019-10-01T10:52:49.493

Try this:

<vector  android:height="45dp"
android:viewportHeight="45" android:viewportWidth="45"
android:width="45dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#F2F2F2" android:fillType="evenOdd"
    android:pathData="M22.5,22.5m-22.5,0a22.5,22.5 0,1 1,45 0a22.5,22.5 0,1 1,-45 0"
    android:strokeColor="#00000000" android:strokeWidth="1"/>
<path android:fillColor="#F7286F" android:fillType="nonZero"
    android:pathData="M21.7692,31.1334C20.5904,32.2889 18.6777,32.2889 17.4994,31.1334L10.8841,24.6492C9.7053,23.4943 9.7053,21.6195 10.8841,20.4646C12.0623,19.3092 13.975,19.3092 15.1538,20.4646L19.0952,24.3274C19.3928,24.6185 19.8758,24.6185 20.1739,24.3274L30.8462,13.8666C32.0244,12.7111 33.9371,12.7111 35.1159,13.8666C35.682,14.4214 36,15.1742 36,15.9589C36,16.7435 35.682,17.4963 35.1159,18.0511L21.7692,31.1334Z"
    android:strokeColor="#00000000" android:strokeWidth="1"/>

That drawable is like below:

score 3 · Answer 2 · answered Oct 09 '19 at 11:00

you can try this

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:width="32dp"
                android:height="32dp" />
            <solid android:color="#fff" />
        </shape>
    </item>
    <item
        android:width="18dp"
        android:height="4dp"
        android:gravity="center"
        android:right="18dp"
        android:top="15dp">
        <rotate android:fromDegrees="40">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="-180"
                    android:endColor="#FF0066"
                    android:startColor="#D6006C" />
            </shape>
        </rotate>
    </item>
    <item
        android:width="64dp"
        android:height="64dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item
        android:width="32dp"
        android:height="4dp"
        android:gravity="center"
        android:left="12dp"
        android:top="4dp">
        <rotate android:fromDegrees="-50">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="-90"
                    android:endColor="#FF0066"
                    android:startColor="#D6006C" />
            </shape>
        </rotate>
    </item>
</layer-list>

shb · Answer 3 · 2019-10-07T17:41:39.700

Try to go with a vector Drawable. If you have two or more different drawables you can make a layer out of them.

However the following code would do the work.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fff"/>
            <size
                android:width="30dp"
                android:height="30dp"/>
        </shape>
    </item>

    <item
        android:width="18dp"
        android:height="3dp"
        android:top="15dp"
        android:right="17dp"
        android:gravity="center">
        <rotate
            android:fromDegrees="40">
            <shape android:shape="rectangle">
                <solid android:color="#D6006C"/>
            </shape>
        </rotate>
    </item>

    <item
        android:width="30dp"
        android:height="3dp"
        android:left="12dp"
        android:top="4dp"
        android:gravity="center"
        >
        <rotate
            android:fromDegrees="-50">
            <shape android:shape="rectangle">
                <solid android:color="#D6006C"/>
            </shape>
        </rotate>
    </item>

    <item
        android:width="60dp"
        android:height="60dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>

</layer-list>

score 2 · Answer 4 · answered Oct 01 '19 at 10:45

This code should work :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:ignore="UnusedResources">
<item>
    <shape android:shape="oval">
        <solid android:color="@android:color/black"/> //enter the color you want
        <size
            android:width="64dp"
            android:height="64dp"/>
    </shape>
</item>
<item>
    <bitmap android:src="@drawable/ic_check_white_36dp"
            android:gravity="center"/>
</item>

score 0 · Answer 5 · answered Oct 01 '19 at 10:48

This will create a tick with a gradient tick mark.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fff"/>
            <size
                android:width="30dp"
                android:height="30dp"/>
        </shape>
    </item>
    <item
        android:width="18dp"
        android:height="3dp"
        android:top="15dp"
        android:right="17dp"
        android:gravity="center">
        <rotate
            android:fromDegrees="40">
            <shape android:shape="rectangle">
                <solid android:color="#D6006C"/>
            </shape>
        </rotate>
    </item>
    <item
        android:width="30dp"
        android:height="3dp"
        android:left="12dp"
        android:top="4dp"
        android:gravity="center"
        >
        <rotate
            android:fromDegrees="-50">
            <shape android:shape="rectangle">
                <gradient android:startColor="#D6006C"
                    android:endColor="#491F2B"/>
            </shape>
        </rotate>
    </item>
    <item
        android:width="60dp"
        android:height="60dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</layer-list>

babin tandukar · Answer 6 · 2019-10-01T11:38:50.620

First create a vector with tick icon with gradient "ic_tick_vector" Requires api lvl 21 or above

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

<path
    android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"
    android:strokeColor="?android:attr/colorAccent"
    android:strokeWidth="0">
    <aapt:attr name="android:fillColor">
        <gradient
            android:endX="10"
            android:endY="20"
            android:startX="1"
            android:startY="20"
            android:type="linear">
            <item
                android:color="?android:attr/colorAccent"
                android:offset="0.0" />

            <item
                android:color="?android:attr/colorPrimaryDark"
                android:offset="1.0" />
        </gradient>
    </aapt:attr>
</path>

<path android:strokeWidth="0.1"
    android:strokeColor="@color/colorAccent"
    android:pathData="M0,80 H100" />
</vector>

then create a drawable with circle background "round_background"

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

    <shape android:shape="oval">

        <stroke android:color="#557C7373" android:width="10dp"/>
        <solid android:color="@color/lightBlue"/>
        <size android:width="150dp" android:height="150dp"/>

    </shape>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
        <size android:width="100dp" android:height="100dp"/>

    </shape>
</item>


</selector>

Use this in your imageview now u will have rounded background with tick item at center (gradient)

<ImageView
     android:background="@drawable/round_background"

     android:layout_gravity="center"
     android:src="@drawable/ic_tick_vector" />

also need to add this to gradle file android { defaultConfig { vectorDrawables.useSupportLibrary = true } } — babin tandukar, Oct 01 '19 at 12:06

Android Shape: Circle with tick mark

6 Answers6