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?


Solution 1:

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.

Solution 2:

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

Solution 3:

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;
    }

Solution 4:

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

enter image description here

It will start with startColor according to the angle value.

Example for 90:

enter image description here

Example for 270:

enter image description here