angle attribute in android gradient

Question

I am going through test example. Where for some Image background they are using gradient, the code goes like this

<?xml version="1.0" encoding="utf-8"?>


  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="180"/>
    <corners android:radius="5dp" />
   </shape>

In the above xml I didn't get angle attribute. but when I change the value of angle slightly the pattern slants. Can anyone explain me how exactly it works?

score 183 · Answer 1 · edited Dec 25 '18 at 10:21

183

Gradient basically represents the variation in space(in a direction) of any quantity. With color it represents the variation of color intensity in a direction represented by angle. Here are some diagrams to represent this concept:
enter image description here

Here the figure shows the color variation in horizontal direction (angle is set 0).
XML code:

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#000000"
        android:angle="0"/>
   </shape>

enter image description here

Here the figure shows the color variation in vertical direction (angle is set 90).
XML code:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#000000"
    android:angle="90"/>
 </shape>

You can also use different color as start, center and end colors. The code you attached contains all these elements.

edited Dec 25 '18 at 10:21

Vadim Kotov

8,084
8
48
62

answered Aug 28 '12 at 08:35

karn

5,963
3
22
29

32

Thanks for answer Karn, but one thing I found that I can give only multiples of 45 in angle attribute, other than that it crashes i.e 20, 20 ,50 etc – Sharanabasu Angadi Aug 28 '12 at 09:19
There are many ways in which gradient can be expressed. Here we are actually using Linear gradient(slope along a straight line slope m=(y-y1)/(x-x1)). When it is multiple of 45 the variation in x and y is same. May be cause of this reason. I don't know much. – karn Aug 28 '12 at 12:49
2

Being the starter color is black (#000000) seems as the arrows are going in the oposite direction, no? – lm2a Jul 14 '15 at 08:08
@Im2a The start is from the left hand side and it then rotates in anticlockwise direction. Just try changing the angle in your xml and you will see it happening. – karn Jul 16 '15 at 08:25
7

@karn am really confused with your answer here. the start is from left to right in anticlockwise direction. so in image 1, i expect the arrows to move like this ->->->-> . also am confused with the with way `android:startColor="#000000"` works. if we put start angle of 90, does it mean from angle 90-270 the color will be black ? what about the remaining angle(0-90)? – Edijae Crusar Nov 21 '15 at 08:15
2

@gikarasojo kinene The answer is correct. Except ,from trigonometry point of view the vector desribing an angle starts from origin (beginning of coordinates). Angle is being mesured in counterclockwise direction. So when the angle is 90(pi/2) the ort vector looks upword. Hence , the arrows in above answer are directed wrong. Contrary.The same is with first picture. – CodeToLife May 10 '17 at 18:53
What is the default angle? – sandeepmaaram Aug 08 '18 at 10:05
@sandeepmaaram default is 0 – Vadim Kotov Dec 25 '18 at 10:22

score 19 · Answer 2 · edited Feb 28 '18 at 10:48

19

Specifies a gradient color for the shape. attributes:

android:angle Integer. The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45. Default is 0.

It seems that the description in the documentation contradict to karn's answer??

You can find more details in the documentation

edited Feb 28 '18 at 10:48

Nicolás Carrasco-Stevenson

3,430
2
26
41

answered Jun 11 '15 at 03:19

passerbywhu

522
5
8

4

You had me at `must be a multiple of 45` – Pierre Nov 19 '18 at 07:18
Yea, is there anyway to get around this 45 degree angle rule without using a SWEEP_GRADIENT? – Mr.Drew Dec 10 '18 at 17:10
@Mr.Drew You can create different angles with the first 4 parameters of LinearGradient as described in [link](https://stackoverflow.com/a/25935582/6012281). Use `linearGradient.setLocalMartix()` to scale it to the desired size afterwards. – Julian Fisch Apr 25 '19 at 16:55
Angle attribute is 0 by default for Android <=9. For Android 10 it's 270 [official doc](https://developer.android.com/about/versions/10/behavior-changes-all#gradient-angle) – Myroslav Jun 23 '21 at 11:07

score 15 · Answer 3 · answered May 24 '21 at 07:44

15

More simply, give the angle value relative to the point where you want it to start.

It will start with startColor according to the angle value.

Example for 90:

Example for 270:

answered May 24 '21 at 07:44

Burak Dizlek

4,805
2
23
19

1

This is the best answer. It really helped me understand how gradient angles work. – Nabeel Ahmed Mar 29 '22 at 11:28
1

it helped and easy to understand angels thanks. – Rucha Bhatt Joshi Jul 28 '22 at 12:16

score 12 · Answer 4 · answered Jul 06 '16 at 18:30

you might wanna create diagonal gradient from code. It's much easier and you have a lot of options open from there. This snippet helped me

public void SetGradient(View view) {
        GradientDrawable gd = new GradientDrawable(
                GradientDrawable.Orientation.TL_BR,
                new int[]{0xFF141a24, 0xFF293f49, 0xFF72554c});
        view.setBackground(gd);
    }

available directions from GradientDrawable class

/*public enum Orientation {
        *//** draw the gradient from the top to the bottom *//*
        TOP_BOTTOM,
        *//** draw the gradient from the top-right to the bottom-left *//*
        TR_BL,
        *//** draw the gradient from the right to the left *//*
        RIGHT_LEFT,
        *//** draw the gradient from the bottom-right to the top-left *//*
        BR_TL,
        *//** draw the gradient from the bottom to the top *//*
        BOTTOM_TOP,
        *//** draw the gradient from the bottom-left to the top-right *//*
        BL_TR,
        *//** draw the gradient from the left to the right *//*
        LEFT_RIGHT,
        *//** draw the gradient from the top-left to the bottom-right *//*
        TL_BR,
    }*/

and you call the method from onCreate or onCreateView in fragment and pass parent view(in my case).

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.dialog_view_parent, container);           
        ...

        SetGradient(view);

        return view;
    }

score 1 · Answer 5 · answered Mar 22 '22 at 19:40

1

I've made a universal solution that supports any angle on jetpack, and wrote a medium article about it (thanks to the first solution for the idea). Check it out if necessary

answered Mar 22 '22 at 19:40

Mukhtar Bimurat

356
2
18

angle attribute in android gradient

5 Answers5

Linked