Creating a Form using Jetpack Compose and Material Design 3

There’s so many exciting things happening in the Android world. It’s always hard to keep up. But when I do play around with things, I find them really exciting to work with.

Especially when they’re related to design and interaction.

I’ve long been wanting to work on a side project where I can play around with Compose and Material Design 3. So I started my side project called Dose, a reminder app for people to take their medications on time:

GitHub - waseefakhtar/dose-android: 💊⏰ Dose is a work-in-progress Android app that reminds you…

Although there are so many things going on in the project, I happen to gather some exciting things that I learnt along the way, that I want to share with you.

So in this blog post, I want to share what I learnt about:

1. Building a form sheet using Compose and Material Design 3 with various elements like TextField, DropDownMenu, and FilterChip.
2. Maintaining element states to retain user input values.
3. Validating inputs to ensure mandatory fields are filled, numbers are within limits, and text length is respected.

In case you’re not fond of reading blog posts, I’ve also turned this blog post into a 17-minute speed code video with some laid back music for you to watch and relax to, as well.

In case that’s your cup of tea, here you go:

Here’s how your form should look by the end of this blog post:

So without further ado, let’s get started.

Prerequisite ☝️