Trazados, degradados y modos de mezcla
Cree rellenos y trazos complejos.
Trazados, degradados y modos de mezcla es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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! ✨
Preguntas frecuentes
¿La lección «Trazados, degradados y modos de mezcla» es gratis?
Sí — el texto completo de «Trazados, degradados y modos de mezcla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Trazados, degradados y modos de mezcla»?
Cree rellenos y trazos complejos. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Trazados, degradados y modos de mezcla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- DrawScope: líneas, rectángulos y círculos
- Trazados, degradados y modos de mezcla
- drawWithCache y rendimiento
- Crear un anillo de progreso en tiempo real