angle attribute in android gradient
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:
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>
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.
It will start with startColor according to the angle value.
Example for 90:
Example for 270: