Intro to drawing in Compose
Stay organized with collections
Save and categorize content based on your preferences.
Learn how to draw something custom in Compose. With custom drawing, you can
improve the look and feel of your app when the built-in components don't cover
exactly what your app needs.
Key points
DrawScope
is a declarative, stateless drawing API to draw shapes,
paths, and more without needing to maintain the state of the component
manually.
- Several drawing modifiers give you access to
DrawScope
, letting you draw
with other composables:
drawBehind
: draws behind the composables content.
drawWithContent
: useful for rearranging content. You can choose
when to call the content of the composable, either before or after.
drawWithCache
: caches the objects until the size changes or the
state variables read inside change.
- The coordinate system in Compose is the same as the view system.
- All draw and layout calls are performed in pixel values, not
dp
. To
draw consistently across screens, use dp
and convert to pixels before
drawing.
- Draw calls are always relative to the parent composable.
Collections that contain this guide
This guide is part of these curated Quick Guide collections that cover
broader Android development goals:
Display images
Discover techniques for using bright, engaging visuals to
give your Android app a beautiful look and feel.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-02-06 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-02-06 UTC."],[],[],null,["# Intro to drawing in Compose\n\n\u003cbr /\u003e\n\nLearn how to draw something custom in Compose. With custom drawing, you can\nimprove the look and feel of your app when the built-in components don't cover\nexactly what your app needs. \n\nKey points\n----------\n\n- [`DrawScope`](/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope) is a declarative, stateless drawing API to draw shapes, paths, and more without needing to maintain the state of the component manually.\n- Several drawing modifiers give you access to `DrawScope`, letting you draw with other composables:\n - [`drawBehind`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawBehind(kotlin.Function1)): draws behind the composables content.\n - [`drawWithContent`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawWithContent(kotlin.Function1)): useful for rearranging content. You can choose when to call the content of the composable, either before or after.\n - [`drawWithCache`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawWithCache(kotlin.Function1)): caches the objects until the size changes or the state variables read inside change.\n- The coordinate system in Compose is the same as the view system.\n- All draw and layout calls are performed in pixel values, not [`dp`](/reference/kotlin/androidx/compose/ui/unit/package-summary#(kotlin.Int).dp()). To draw consistently across screens, use `dp` and convert to pixels before drawing.\n- Draw calls are always relative to the parent composable.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]