Jetpack Compose Academy · Aula

Traçados, Gradientes e Modos de Mesclagem

Crie preenchimentos e traçados complexos.

Aula 2 de 413 etapas

Traçados, Gradientes e Modos de Mesclagem é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Beyond Simple Shapes

Lines and circles are great, but real graphics need curves and rich fills. Meet Path, gradients, and blend modes for that next level.

What Is a Path

A Path is a recorded outline you build point by point. You move and line your way around, then draw the finished shape in one call.

val path = Path()
path.moveTo(0f, 0f)
path.lineTo(100f, 0f)

moveTo and lineTo

Use moveTo to lift the pen to a start point, then lineTo to draw straight segments. Chain them to trace any polygon you like.

path.moveTo(0f, 0f)
path.lineTo(80f, 120f)
path.lineTo(160f, 0f)
path.close()

Curves with quadraticBezierTo

For smooth bends use quadraticBezierTo. A control point pulls the line into a curve, perfect for soft chart edges.

path.quadraticBezierTo(50f, -40f, 100f, 0f)

Draw the Path

Once built, hand the path to drawPath with a color or brush. You can fill it solid or outline it with a Stroke style.

drawPath(path = path, color = Color.Blue)

Meet the Brush

A Brush describes how an area is painted. Instead of a flat color, a brush can pour a smooth gradient across your shape.

Linear Gradients

Use Brush.linearGradient to blend colors along a straight line. Pass a list of colors and watch them fade from one to the next.

val brush = Brush.linearGradient(
    listOf(Color.Cyan, Color.Magenta)
)
drawRect(brush = brush)

Radial Gradients

Reach for Brush.radialGradient to blend outward from a center. It is ideal for spotlights, soft buttons, and glowing orbs.

val glow = Brush.radialGradient(
    listOf(Color.White, Color.Blue)
)

Sweep Gradients

A Brush.sweepGradient rotates colors around a center point. It is the secret behind colorful progress rings and rainbow dials.

val sweep = Brush.sweepGradient(
    listOf(Color.Red, Color.Yellow, Color.Red)
)

Meet Blend Modes

A BlendMode decides how a new shape mixes with what is already drawn. Multiply darkens, Screen lightens, and Plus adds light.

drawCircle(
    color = Color.Yellow,
    blendMode = BlendMode.Multiply
)

Layer for Effects

Blend modes shine when shapes overlap. Stack two translucent circles with BlendMode.Plus and their intersection glows brighter.

Quick Check

Which brush rotates colors around a center point?

Recap

You can now build curves with Path, fill shapes with linear, radial, and sweep gradients, and combine them using blend modes. Time to get creative! ✨

Grátis para começar

Aprenda Kotlin com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
30
Aulas
120

Perguntas Frequentes

A aula “Traçados, Gradientes e Modos de Mesclagem” é grátis?

Sim — o texto completo de “Traçados, Gradientes e Modos de Mesclagem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “Traçados, Gradientes e Modos de Mesclagem”?

Crie preenchimentos e traçados complexos. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Traçados, Gradientes e Modos de Mesclagem”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. DrawScope: Linhas, Retângulos e Círculos
  2. Traçados, Gradientes e Modos de Mesclagem
  3. drawWithCache e Desempenho
  4. Criando um Anel de Progresso em Tempo Real
← Voltar para Jetpack Compose Academy