Jetpack Compose Academy · Lektion

Pfade, Farbverläufe und Blend-Modi

Erstellen Sie komplexe Füllungen und Striche.

Pfade, Farbverläufe und Blend-Modi ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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! ✨

Häufig gestellte Fragen

Ist die Lektion „Pfade, Farbverläufe und Blend-Modi“ kostenlos?

Ja — der vollständige Text von „Pfade, Farbverläufe und Blend-Modi“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Pfade, Farbverläufe und Blend-Modi“?

Erstellen Sie komplexe Füllungen und Striche. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Pfade, Farbverläufe und Blend-Modi“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy