Interpreting Zeplin characteristics to create Android ring Drawable

109 Views Asked by At

I am trying to figure out, by the Zeplin characteristics showed below, how exactly can I create the following drawable

enter image description here

Zeplin characteristics:

enter image description here

I know that to achieve this I need a layer list with a oval solid shape and a ring with a fading gradient. What I don't understand is how I can achieve this in a concrete way and how can I translate those outer shadows mentioned there into drawable code. I managed to achieve this somehow, but the 'technique' is not quite okay, plus it only works for that 145dpx145dp ImageView dimension, if I try to use it for another dimension it does not fit well. Notice that I had to add multiple layers for ring, because only one would be to faded out, I figured that the bigger the dimension, the more the color would be washed out at the start of the ring

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:innerRadius="20dp"
        android:shape="ring"
        android:thickness="7dp"
        android:useLevel="false">
        <gradient
            android:centerColor="@color/azure"
            android:endColor="@color/azure_0"
            android:gradientRadius="24.5dp"
            android:startColor="@color/azure"
            android:type="radial" />
    </shape>
</item>
<item>
    <shape
        android:innerRadius="20dp"
        android:shape="ring"
        android:thickness="7dp"
        android:useLevel="false">
        <gradient
            android:centerColor="@color/azure"
            android:endColor="@color/azure_0"
            android:gradientRadius="24.5dp"
            android:startColor="@color/azure"
            android:type="radial" />
    </shape>
</item>
<item
    android:width="40dp"
    android:height="40dp"
    android:left="3.5dp"
    android:top="3.5dp">
    <shape android:shape="oval">
        <gradient
            android:endColor="@color/slate_grey"
            android:startColor="@color/charcoal_grey_three"
            android:type="linear" />
    </shape>
</item>

Is there a more elegant way to achieve this and be able to use it on multiple View dimensions or can someone please explain to me how to interpret those Shadows?

0

There are 0 best solutions below