11 Weeks of Android: UI and Compose

Posted by Chris Banes & Nick Butcher

This blog post is part of a weekly series for #11WeeksOfAndroid. Each week we’re diving into a key area of Android so you don’t miss anything. This week, we spotlighted people & identity; here’s a look at what you should know.

The big news: Jetpack Compose Alpha

This week we released the first alpha of Jetpack Compose 🎉, Android’s modern UI toolkit with native access to the platform APIs. Compose combines the power of Kotlin with the reactive programming model to make it easier and faster to build UI. We want your feedback to help us build the APIs that you need in your apps, so now is the time to try it out.

To get you up to speed with Compose, this week we’ve released 4 new codelabs, 7 new samples, new documentation and a podcast from the Compose team. If you prefer videos; we’ve got you covered...

To understand the reactive mindset and how to think about building apps with Compose, check out ‘Thinking in Compose’:

Learn how Jetpack Compose makes Android UI easier by walking through concrete examples from our open-source sample apps in ‘Compose by Example’:

Finally, to understand how Jetpack Compose and View based UIs can co-exist and interact, making it easy to adopt Compose at your own pace, check out ‘Compose for Existing’ apps:

Keyboard (IME) animations

New in Android 11 is the ability for apps to create seamless transitions between the on screen keyboard being opened and closed, as well as a revamped WindowInsets API to enable control of things such as the keyboard (IME). To find out how to add this to your app, slide on over to the video, blog posts and sample app…

Material Design Components

We recommend following the Material Design guidelines to ensure that apps operate consistently, that patterns learned in one app can be used in another. Check out our new blog posts on Material Theming (color, type and shape), dark theme and Material’s motion system using the Material Design Components (MDC) library.

Adopting MDC now will prepare your codebase for later adopting Jetpack Compose — it uses the same concepts, design vocabulary and components. It even becomes possible to ease your migration with libraries like the new MDC-Android Compose Theme Adapter which converts an MDC XML theme into a Compose `MaterialTheme`.

If you haven’t already migrated to MDC, then check out our migration guide.

Learning path

If you’re looking for an easy way to pick up the highlights of this week, you can check out the learning pathways. This week we have two pathways for you to go through: the Compose pathway, and the ‘Modern UI’ pathway.

A pathway is an ordered tutorial that allows users to complete a pre-defined module that culminates in a quiz. It may include codelabs, videos, articles and blog posts. A virtual badge is awarded to each user who passes the quiz. Test your knowledge in each pathway to earn a limited edition badge.

Key takeaways

Whether you're building with the current UI toolkit or getting ready for the next generation we hope that the resources that we’ve shared this week help you to create beautiful, engaging UIs that your users will love. Thanks to everyone who tuned in or joined us for the AMA. Follow the Modern UI pathway to learn how to leverage Material Design, animation or the latest Android 11 features. Take the Compose pathway to learn about the future of Android UI development and help shape it with your feedback.

Resources

You can find the entire playlist of #11WeeksOfAndroid video content here, and learn more about each week here. We’ll continue to spotlight new areas each week, so keep an eye out and follow us on Twitter and YouTube. Thanks so much for letting us be a part of this experience with you!