Skip to content

Commit 6695b9e

Browse files
Update README.md with gradient section
1 parent 5ff727c commit 6695b9e

File tree

2 files changed

+63
-4
lines changed

2 files changed

+63
-4
lines changed

README.md

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@
1212
* Functions to convert between `androidx.compose.ui.graphics.Color`, HSL, HSV, `RGB`, HCT, and
1313
colors with nearest **Name** based on distance is in 3D space using `Red`, `Green`, `Blue`.
1414

15-
| M2 Color Swatches | M3 Tone Palettes |
16-
| ----------|-----------|
17-
| <img src="./screenshots/material_design2.gif" width="400">| <img src="./screenshots/material_design3.gif" width="400"> |
15+
| M2 Color Swatches | M3 Tone Palettes | Gradient Rotation|
16+
| ----------|-----------| -----------|
17+
| <img src="./screenshots/material_design2.gif" width="300">| <img src="./screenshots/material_design3.gif" width="300"> | <img src="./screenshots/gradient_rotation.gif" width="300"> |
1818

1919
## Material Design 2 Colors & Swatches
2020

2121
### Material Colors
2222

2323
<img src="./screenshots/m2_palette.png">
2424

25-
[Material Colors](material_design2.gif material_design3.gif) can be accessed from Red to Brown.
25+
[Material Colors](https://materialui.co/colors/) can be accessed from Red to Brown.
2626
Brown, Grey, and BlueGrey swatches only have primary colors.
2727

2828
```kotlin
@@ -153,3 +153,62 @@ fun getColorTonesMap(color: Color): Map<Int, Color> {
153153
```
154154

155155
to get Map with tone keys
156+
157+
## Gradient Rotation
158+
Gradients can be rotate by 45, in the future this can be expanded to any angle,
159+
with
160+
161+
Create a `GradientOffset`with
162+
163+
```kotlin
164+
var gradientOffset by remember {
165+
mutableStateOf(GradientOffset(GradientAngle.CW0))
166+
}
167+
```
168+
169+
```kotlin
170+
fun GradientOffset(angle: GradientAngle = GradientAngle.CW0): GradientOffset {
171+
return when (angle) {
172+
GradientAngle.CW45 -> GradientOffset(
173+
start = Offset.Zero,
174+
end = Offset.Infinite
175+
)
176+
GradientAngle.CW90 -> GradientOffset(
177+
start = Offset.Zero,
178+
end = Offset(0f, Float.POSITIVE_INFINITY)
179+
)
180+
GradientAngle.CW135 -> GradientOffset(
181+
start = Offset(Float.POSITIVE_INFINITY, 0f),
182+
end = Offset(0f, Float.POSITIVE_INFINITY)
183+
)
184+
GradientAngle.CW180 -> GradientOffset(
185+
start = Offset(Float.POSITIVE_INFINITY, 0f),
186+
end = Offset.Zero,
187+
)
188+
GradientAngle.CW225 -> GradientOffset(
189+
start = Offset.Infinite,
190+
end = Offset.Zero
191+
)
192+
GradientAngle.CW270 -> GradientOffset(
193+
start = Offset(0f, Float.POSITIVE_INFINITY),
194+
end = Offset.Zero
195+
)
196+
GradientAngle.CW315 -> GradientOffset(
197+
start = Offset(0f, Float.POSITIVE_INFINITY),
198+
end = Offset(Float.POSITIVE_INFINITY, 0f)
199+
)
200+
else -> GradientOffset(
201+
start = Offset.Zero,
202+
end = Offset(Float.POSITIVE_INFINITY, 0f)
203+
)
204+
}
205+
}
206+
```
207+
Set start and end of `Brush` with
208+
```kotlin
209+
val redGreenGradient = Brush.linearGradient(
210+
colors = listOf(Color.Red, Color.Green, Color.Blue),
211+
start = gradientOffset.start,
212+
end = gradientOffset.end
213+
)
214+
```

screenshots/gradient_rotation.gif

638 KB
Loading

0 commit comments

Comments
 (0)