CODEWITHSUNDEEP
androidandroid-layoutsvgandroid-vectordrawableradial-gradients
Mukhtar Bimurat
Mukhtar Bimurat

Reputation: 396

How to properly convert Figma conic (aka radial) gradients to android vector drawable?

I am having trouble creating an android vector drawable as shown in Figma. Here how the image looks like:

gradient

It's a rectangle that uses a combination of 3 gradients as a background. The Figma code looks like this:

Properties

height: 474px;
width: 312px;
left: 32px;
top: 170px;
border-radius: 8px;

Colors:

background-blend-mode: screen;
background: conic-gradient(from 180deg at 50% 50%, #FFFFFF -9.78deg, #000000 9.35deg, #FFFFFF 69.37deg, #000000 121.87deg, #FFFFFF 161.25deg, #000000 202.5deg, #FFFFFF 245.62deg, #000000 303.75deg, #FFFFFF 350.22deg, #000000 369.35deg);
background: conic-gradient(from 180deg at 50% 50%, #FFFFFF -22.26deg, #000000 27.81deg, #FFFFFF 81.58deg, #000000 116.79deg, #FFFFFF 158.7deg, #000000 216.69deg, #FFFFFF 262.5deg, #000000 307.09deg, #FFFFFF 337.74deg, #000000 387.81deg);
background: linear-gradient(151.68deg, #1DC4BD 0.54%, rgba(217, 240, 66, 0.981193) 17.64%, rgba(248, 165, 253, 0.893164) 42.5%, rgba(162, 172, 249, 0.951971) 60.11%, rgba(60, 244, 147, 0.59) 83.94%, #3DBEF0 100%);

CSS code (Android code doesn't work correct):

position: absolute;
width: 312px;
height: 474px;
left: 32px;
top: 170px;

background: conic-gradient(from 180deg at 50% 50%, #FFFFFF -9.78deg, #000000 9.35deg, #FFFFFF 69.37deg, #000000 121.87deg, #FFFFFF 161.25deg, #000000 202.5deg, #FFFFFF 245.62deg, #000000 303.75deg, #FFFFFF 350.22deg, #000000 369.35deg), conic-gradient(from 180deg at 50% 50%, #FFFFFF -22.26deg, #000000 27.81deg, #FFFFFF 81.58deg, #000000 116.79deg, #FFFFFF 158.7deg, #000000 216.69deg, #FFFFFF 262.5deg, #000000 307.09deg, #FFFFFF 337.74deg, #000000 387.81deg), linear-gradient(151.68deg, #1DC4BD 0.54%, rgba(217, 240, 66, 0.981193) 17.64%, rgba(248, 165, 253, 0.893164) 42.5%, rgba(162, 172, 249, 0.951971) 60.11%, rgba(60, 244, 147, 0.59) 83.94%, #3DBEF0 100%);
background-blend-mode: screen, difference, normal;
opacity: 0.5;
border-radius: 8px;

figma code as image: design tab, inspect tab 1, inspect tab 2

Can you please draw such a design as an android vector drawable (aka .xml file)?

I've tried many ways (svg, manually, ...) but could not draw it as shown in Figma. The best result I've achieved was this view with this source code. I can add additional information if you need

Upvotes: 1

Views: 3156

Answers (1)

Schnelldev
Schnelldev

Reputation: 1502

It seems SVGs don't have standard support for angular or conic gradients, which is why you're having trouble creating an android vector drawable of that type. See here.

CSS only recently got that feature which explained why the exported CSS code you got is working. I would suggest you try one of the CSS to SVG converters online (here's an example) and see if that works. Otherwise, you might have to export the gradient in another format to use in your app.

Upvotes: 1

Related Questions