Exploring Jetpack Compose Canvas: the power of drawing
<p>In this article, I will share my experience of using Canvas with Jetpack Compose, which is the new UI toolkit made by Google. The Android Dev Challenge #2 gave me the opportunity to learn tons of things about <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Canvas" rel="noopener ugc nofollow" target="_blank"><strong>Canvas</strong></a> and how to take advantage of it to draw and animate shapes or texts in a very nice way.</p>
<p>Most of the code samples are based on the project below:</p>
<h2><a href="https://github.com/Oleur/TimePack-CountPose?source=post_page-----8cc60815babe--------------------------------" rel="noopener ugc nofollow" target="_blank">Oleur/TimePack-CountPose</a></h2>
<h3><a href="https://github.com/Oleur/TimePack-CountPose?source=post_page-----8cc60815babe--------------------------------" rel="noopener ugc nofollow" target="_blank">TimePack CountPose is a timer application to showcase Jetpack Compose animations with Canvas Composable.</a></h3>
<p><a href="https://github.com/Oleur/TimePack-CountPose?source=post_page-----8cc60815babe--------------------------------" rel="noopener ugc nofollow" target="_blank">github.com</a></p>
<blockquote>
<p>Disclaimer: the code samples are based on Compose 1.0.0-beta02. The API methods might change in a near future.</p>
</blockquote>
<h1>First steps with Canvas</h1>
<p>If you are familiar with the Android View canvas methods you won’t be lost with the one from Jetpack Compose. All function names are same and some of them are even more explicit when dealing the <strong>Path </strong>API for example<strong>: <em>relativeQuadraticBezierTo()</em></strong> instead of <strong><em>rQuadto()</em> </strong>to curve a segment of the path.</p>
<p>If you are not familiar with the native Android Canvas, I highly recommend to take a look at this article by <a href="https://medium.com/@riggaroo" rel="noopener">Rebecca Franks</a> to have a great introduction to the Android Canvas.</p>
<p><a href="https://medium.com/google-developer-experts/exploring-jetpack-compose-canvas-the-power-of-drawing-8cc60815babe">Visit Now</a></p>