Создание градиента

Все фигуры позволяют использовать цвет для заливки фигуры или для создания ее контура. Для установки цвета можно использовать компонент Color или компонент Brush. Но если Color представляет сплошной цвет, то Brush позволяет создавать более сложное цветовое наполнение, например, в виде градиента различных типов. Например, чтобы заполнить прямоугольник горизонтальным градиентом, надо объект Brush инициализироваnm списком цветов - объектов Color вместе с начальным и конечным положением по оси X. Опционально можно указать параметр tileMode.

В следующем примере прямоугольник заполняется горизонтальным градиентом:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.TileMode

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                val colorList = listOf(Color.Red, Color.Blue, Color.Green, Color.Cyan)

                val brush = Brush.horizontalGradient(
                    colors = colorList,
                    startX = 0f,
                    endX = 300.dp.toPx(),
                    tileMode = TileMode.Repeated
                )
                drawRect(brush = brush,size = size)
            }
        }
    }
}

Другой пример - заполнение радиальным градиентом окружности:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.TileMode

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                val radius = 150.dp.toPx()
                val colorList = listOf(Color.White, Color.Yellow, Color.Red)
                val brush = Brush.radialGradient(
                    colors = colorList,
                    center = center,
                    radius = radius,
                    tileMode = TileMode.Repeated
                )
                drawCircle(brush = brush, radius = radius)
            }
        }
    }
}

Градиенты особенно полезны для добавления эффектов тени к рисункам. Например:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.TileMode

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                val radius = 150.dp.toPx()
                val colorList = listOf(Color.Yellow, Color.Black)
                val brush = Brush.horizontalGradient(
                    colors = colorList,
                    startX = 0f,
                    endX = 300.dp.toPx(),
                    tileMode = TileMode.Repeated
                )
                drawCircle(brush = brush, radius = radius)
            }
        }
    }
}