Friday, August 26, 2011

Gradients -- A deeper look


There is a setShader function within drawables. The following simplify coloring of a drawable object:

ShapeDrawable aDrawable = new ShapeDrawable(new OvalShape());
LinearGradient AGradient = new LinearGradient(x, y, x1, y1, LeftTopColor, RightbottomColor, Shader.TileMode.CLAMP);
aDrawable.getPaint().setShader(AGradient);

The result of simple manipulation on x, y, x1, y1



coding -
Butn 1 - new LinearGradient(0, 0, 50, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 2 - new LinearGradient(0, 0, 0, 50, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 3 - new LinearGradient(50, 0, 0, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 4 - new LinearGradient(0, 50, 0, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);




With the absence of either x or y, we have a gradient from x to y (Either top to bottom or right to left). With x and y (as below), we will have a gradient from top-left to bottom-right or top-right to bottom-left.

My belief is that x,y forms the coordinates for color1 and x1,y1 forms the coordinates for color2.
The distance between x1,y1 and x,y determines the direction of the gradient and angle.

shifting the numbers slightly
Butn 1 - new LinearGradient(0, 0, 50, 50, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 2 - new LinearGradient(0, 0, 100, 100, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 3 - new LinearGradient(50, 50, 0, 0,ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 4 - new LinearGradient(100, 100, 0, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);

result:




Butn 1 - new LinearGradient(50, 50, 50, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 2 - new LinearGradient(0, 50, 50, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 3 - new LinearGradient(50, 0, 50, 0,ColorYellow, ColorRed, Shader.TileMode.CLAMP);
Butn 4 - new LinearGradient(0, 0,50, 0, ColorYellow, ColorRed, Shader.TileMode.CLAMP);


No comments:

Post a Comment