Convert css gradient in to android gradient (xml)

Question

I would like to convert css gradient to android xml gradient (shape) file

for e.g

background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);

to

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="0"
        android:endColor="#b12a5b"
        android:startColor="#ff867a"
        android:type="linear" />
</shape>

I don't know much about css. I know only android and there are only three parameters for colors android:endColor, android:startColor, android:centerColor How can I define this % and various colors presented in css

is there any online tool from where I can generate the xml file by giving css input.

Although I think that the answer given by @Matthew Schlachter is enough. But since you haven't yet accepted it, I was wondering if you need any more help? — RoyalGriffin, Jun 28 '18 at 07:44
@RoyalGriffin hey I've not get the time to test it. Once I test it I'll accept the answer :) — Sunny, Jun 28 '18 at 19:11

Matthew Schlachter · Accepted Answer · 2018-06-27T13:16:23.367

3

I would recommend looking at this related question: Using a gradientDrawable with more than three colors set

Using the LinearGradient object, you can define a gradient using multiple colors and percentage stops.

For example (borrowed from the question I linked):

LinearGradient linearGradient = new LinearGradient(0, 0, width, height,
        new int[] { 
            0xFF1e5799, 
            0xFF207cca, 
            0xFF2989d8, 
            0xFF207cca }, //substitute the correct colors for these
        new float[] {
            0, 0.40f, 0.60f, 1 },
        Shader.TileMode.REPEAT);

The question I linked and the official documentation contains more details on how to use it.

edited Jun 27 '18 at 13:16

answered Jun 27 '18 at 13:07

Matthew Schlachter

3,250
1
12
26

Thanks I'll test and let you know – Sunny Jun 27 '18 at 13:12
Can I give directions also? – Sunny Jun 27 '18 at 13:13
Supposedly you can set it to be vertical by setting width to 0, but I've only ever used it for horizontal gradients – Matthew Schlachter Jun 27 '18 at 13:16

Omer Haqqani · Answer 2 · 2018-06-27T13:13:55.943

I have used this in past to draw gradient in backgroung


        View    layout  =   findViewById(R.id.mainLayout);

        GradientDrawable    gradientDrawable    =   new GradientDrawable(
                GradientDrawable.Orientation.TOP_BOTTOM,
                new int[]   {0xff45c0cc,0xff0054a6}
        );
        gradientDrawable.setCornerRadius(0f);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            layout.setBackground(gradientDrawable);
        }

what i understand from given css is #f99185-52% means 52% transparency, and in my given code sample int[] has a hexadecimal code, what you can do is use the 6 digit GRBcode and append with 52% opacity equivalent from here to it and append it with the given RGBcode

eg #f99185 52% will become #f9918585 since 52% in hex is 85

thanks I think in example it should be `#85f99185 ` alpha channel comes first — Sunny, Jun 27 '18 at 13:19

Convert css gradient in to android gradient (xml)

2 Answers2