Jetpack Compose by Tutorials
Learn how to build beautiful, performant and declarative user interfaces using the latest tool in the Android UI toolkit - Jetpack Compose. By Prateek Prasad & Denis Buketa.
Who is this for?
This book is for intermediate Android developers, who are looking to expand their knowledge of the UI toolkit and add more tools to build beautiful interfaces to their belt, with Jetpack Compose. It’s also for advanced developers who are well versed with the legacy Android Toolkit and possibly know something about Jetpack Compose, but haven’t had the time to dive deep into the topic and explore more advanced concepts of Compose such as state handling, connecting the declarative UI to application architecture pattern, using animations and more.
Covered concepts
- Jetpack Compose Fundamentals
- Composable Functions
- Modifiers
- Recomposition
- Jetpack Compose UI Tree
- Jetpack Compose State
- Dynamic Composable Functions
- Building Lists in Jetpack Compose
- Combining Composables
- Jetpack Compose State Handling
- Material Design Composable Functions
- Material Design Modifiers
- ConstraintLayout in Jetpack Compose
- Complex Jetpack Compose UI
- Jetpack Compose Lifecycle
- Effects
- Jetpack Compose Animation API
- Property Animations
- Transitions
- Prop Keys
- View Toolkit Backwards Compatibility
- Glances
- UI Testing
- Accessibility
In this book, you’ll learn how to build a powerful app using Jetpack Compose, how to style your apps using Material Design, special animations and state transitions, how to use modifiers and much more! This book will serve you as a central point that holds all the information you need...
moreBefore You Begin
This section tells you a few things you need to know before you get started, such as what hardware and software you’ll need, where to find the project files for this book, and more.
Section I: Getting Started With Jetpack Compose
Android UI Toolkit is over 10 years old now! Over the years, it has received numerous updates in terms of functionality, types of UI elements it provides and optimizations. However, because of the way the UI team initially developed the toolkit, it also grew in complexity and the amount of code for even the simplest of components.
Finally, in 2020, a miracle happened: Jetpack Compose. The new UI toolkit was announced and started being seriously developed by Google. Jetpack Compose is a new and fresh toolkit, built completely in Kotlin, that offers a clean and declarative way to develop custom components and beautiful interfaces.
In this section, you’ll learn all about:
- The fundamental components Jetpack Compose provides.
- How to build common user interface components such as containers, navigation controls and lists.
In the following four chapters, you’ll dive deep into the API and learn so much about this wonderful new UI toolkit.
Section II: Composing User Interfaces
When working on apps and user interfaces, it’s not only important to know what each piece of the interface should be, but also how all these pieces come together to build a beautiful and fully-functional design that’ll wow your users.
Now that you’ve learnt the basics of Jetpack Compose and its fundamental UI elements, you’re ready to dive deeper into building custom Compose elements, managing their state in a performant way and styling them using modifiers and built-in Material Design features.
Over the next four chapters, you’ll learn how to:
- Attach LiveData structures to your state management.
- Rely on different styling modifiers.
- Combine these topics to create a powerful UI!
You’ll build on the knowledge from the previous section of the book by learning new parts of the Jetpack Compose toolkit.
Section III: Building Complex Apps With Jetpack Compose
Now that you’ve built your app’s basic UI, it’s time to take it to another level. In this section, you’ll apply custom, complex designs that help you stand out from thousands of similar apps! This usually involves building complex custom components and applying animations to represent state changes when your users interact with the UI.
Over the next five chapters, you’ll dive deeper into the Jetpack Compose API to learn how to:
- Connect Compose UI to legacy Android code.
- React to Compose UI lifecycles.
- Animate different state changes and user interactions.
- How to use Jetpack Compose in conjunction with the old View UI Toolkit
In the process, you’ll build an awesome app that represents a real-world project and you’ll apply some best practices to improve the user experience.
Section IV: UI Testing & Accessibility
So far, you’ve focused on building up knowledge of how Jetpack Compose works. You now know how to build a fairly complex app using Compose, well done on achieving this! Apps that are of high quality are built this way and also incorporate two new concepts you’ll learn about, UI Testing and Accessibility
In the next two chapters, you’ll dive into each of these topics and learn how to:
- Build a suite of UI tests to verify your Jetpack Compose UI works as expected
- Support Accessibility features in your app through Compose
These are two chapters you are going to want to read to take your Compose skills and user experience to the next level.
Section V: Glances & Keeping Upto Date With Jetpack Compose
Well done on reaching section V of the book. You now know how to build a high quality app using Jetpack Compose, making sure it is tested appropriately via UI Testing, and finally levaging Accessibility features so your app can be used by a large audience.
In this section you’ll look at a new area of Compose being created called Jetpack Glance, a new way to build Widgets using Compose. You’ll also look at how to keep your Jetpack Compose knowledge upto date with the latest releases.
By the end of the section you’ll learn:
- What Jetpack Glance is and build a Widget using it
- How significant Jetpack Compose is to the Developer community.
Section VI: Appendices
This supplementary section is for appendices to accompany the book. In this section there’s a handy set of comparisions of UI components between the old UI Toolkit and Jetpack Compose. Use this if you want to have an idea what like for like components exist.