Hi. Do we have standard way to achieve gradient on...

# compose

[dector]

Hi. Do we have standard way to achieve gradient on the right without scaling square linear gradient?
(color of the points on the diagonal should be the same)

[Chris Sinco [G]]

Seems like linearGradient needs an angle parameter, similar to CSS https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

[Chris Sinco [G]]

@Nader Jawad are we missing something or is it just expressed differently in Android?

[Nader Jawad]

We have the pieces already but one thing to note is that the gradient line will always be perpendicular to the line formed between the start and end coordinates so you would need to work backwards from the perpendicular to define points that may extend beyond the actual drawing bounds to get the gradient to line up as expected

[cb]

(Correct me if I’m wrong Nader)

I don’t think the bounds of the gradient need to be within the bounds of the layout. You can draw the gradient beyond the bounds of the layout (achieving your given angle, etc), then use Modifier.clipToBounds() to clip the gradient.

[Nader Jawad]

Correct the bounds of the gradient do not need to be within the bounds of the layout, however, no explicit clipping is necessary as the gradient will only occupy the bounds of the corresponding draw call it is consumed with

[Nader Jawad]

For example if your gradient is 200 x 200 pixels and you draw a rectangle that is only 100 x 100, the gradient only occupies the region of the rectangle

[dector]

However, the result will not be the same as desired in this case.
(on the left - desired gradient, on the right - cropped linear)

[dector]

I guess I can achieve it with scaling down/up linear gradient but it would be nice to have something like this from the box (e.g. achieving custom gradients like this on iOS is very simple operation).

[dector]

(oops, my right picture is not correct - color(c1) should be the same as color(c2) but end/start colors will not be in the rectangle's corners)

[dector]

With linear gradient we can achieve either of:

1. color(A) != color(A') && color(B) != color(B')
2. color(A) == color(A') && color(B) != color(B')
3. color(A) != color(A') && color(B) == color(B')