Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Shape: Circle with tick mark

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

This is what I would like: Circle with tick mark, Desired implementation

Could you please suggest me how to approach it?

like image 339
user479352 Avatar asked Jan 01 '23 15:01

user479352


2 Answers

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: enter image description here

like image 112
Masoud Mokhtari Avatar answered Jan 11 '23 02:01

Masoud Mokhtari


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>

enter image description here

like image 22
Andi Tenroaji Ahmad Avatar answered Jan 11 '23 00:01

Andi Tenroaji Ahmad