jetc.dev Newsletter Issue #38

Published: 2020-11-03

It’s Navigation for Compose week!

Navigation for Compose is out, and we look at some of the initial stumbling blocks when trying to use it. Beyond that, we see touch-based drawing in 50 lines of Compose, review the @Preview annotation parameters for customization, and look at some custom modifiers. Plus, there is an 11-hour marathon live coding video… in costume.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Where Is My navigate() Function?

The new navigation-compose library exposes some of its API in the form of extension functions. navigate() — your primary way of navigating to another composable — is one. So, you need to remember to import that, as we see in this week’s highlighted Stack Overflow question.

Navigation Arguments and Compose

Navigation for Compose is slick, but it poses some fairly stringent limitations on your argument types. Notably, Parcelable is not an option. That can catch the unwary, as we see in this week’s highlighted Slack thread.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Navigating with Compose

This page provides our (limited) bit of documentation on the new navigation-compose library and how to use the Jetpack Navigation component with Compose.

Creating a Navigation Drawer in Jetpack Compose

Ben Trengrove wasted no time in trying out the navigation-compose library and using official Jetpack Navigation for navigating between screens from a Scaffold() drawer. This blog post provides a brief outline of Ben’s experiments.

Code Simple Android Jetpack Compose Drawing App

Elye returns with a simple “fingerpaint”-style drawing app, letting the user sketch something. It only takes around 50 lines of Compose UI code to track the MotionEvents and update a Path object that gets rendered on a Canvas() to draw where the user’s finger traced.

Video: Compose for Existing Apps

Google’s Manuel Vivo reprised his presentation on integrating Compose UI with classic View-based apps as part of DevFest Romania 2020.

Exploring Jetpack Compose: @Preview Annotation

Joe Birch reviewed the @Preview annotation, in particular examining many of the annotation properties that you can use to customize how the preview looks and what sort of environment is used for the simulation.

Video: Live App Build: Day Planner w/ Jetpack Compose, Clean Architecture

Ryan Kay held an 11-hour livestream of a coding session to write a “day planner” sort of personal organizer app. And, since this was recorded on Halloween, Ryan even was in costume (alas, not for all 11 hours).

Slides: Jetpack Compose - A declarative UI Approach

Toan Tran delivered a presentation at Devfest GDG Hanoi with an overview of Compose — this is the SpeakerDeck slides for that presentation.

Jetpack Compose: Android’s Modern Toolkit for Building Native UI

Mansi Kothari walks through some of the basic elements of a Compose UI app, including a simple custom theme.

Jetpack Compose — What, Why, and a Sample Code

Sijan Rijal provides another introduction to the basics of setting up a Compose UI-based screen.

Resource Roundup

100% pure code!

GitHub: evowizz / compose-to-edge

Dylan Roussel has created a small library to make it easier to build Compose UI apps that work “edge to edge” and deal with the appropriate window insets to avoid conflicts with system gesture areas.

GitHub: PatilShreyas / NotyKT

NotyKT is a note-taking app crated by Shreyas Patil. What makes the project interesting is that not only does it use Compose UI for the app, but it also has a server implementation in Kotlin (using Ktor) that the app uses for storage. As such, it provides a nice demonstration of using Kotlin on the client and on the server.

Gist: Skrilltrax / ColorfulBorders.kt

Aditya Wasan created a small Modifier that randomly chooses a color and uses that to render a border for your composable. While this modifier is not very complicated, it helps to illustrate how simple creating a custom Modifier can be.

Gist: cedrickring / ColoredShadow.kt

Cedric Kring brings us a more elaborate Modifier, one that draws a colored shadow behind the composable being decorated by the modifier.

…And One More Thing

Now that Jetpack Navigation for Compose is available, it is important for early adopters of Compose to “kick the tires” on it and see how well it works in your use cases.

While both Compose and Navigation for Compose are in early alpha releases, each has been around for a while independently. As a result, we already have experiences to draw upon for each of them. The question is how well those experiences mesh with one another.

In particular, Navigation for Compose uses a different Kotlin DSL for describing the destinations, and it uses a fourth system for passing arguments (somewhat independent from the classic arguments, SafeArgs, and original Kotlin DSL approaches to arguments). So, while elements of our existing Navigation experience will carry over to Navigation for Compose, some problems will be brand-new. And, there are going to be problems, simply because all of this is very new.

So, try it out, ask questions if you encounter problems, file issues if you have feature requests or reproducible bugs, and see how Navigation for Compose works for you. The sooner we can give Google actionable feedback, the sooner they can take that feedback into account in future releases.

Just remember to import the navigate() extension function, and try to avoid Parcelable arguments.