This guide is for intermediate Android builders, who want to increase their data of the UI toolkit and add extra instruments to construct lovely interfaces
to their belt, with Jetpack Compose. It’s additionally for superior builders who’re properly versed with the legacy Android Toolkit
and probably know one thing about Jetpack Compose, however haven’t had the time to dive deep into the subject and discover extra superior ideas of Compose resembling
state dealing with, connecting the declarative UI to utility structure sample, utilizing animations and extra.
- Jetpack Compose Fundamentals
- Composable Features
- Modifiers
- Recomposition
- Jetpack Compose UI Tree
- Jetpack Compose State
- Dynamic Composable Features
- Constructing Lists in Jetpack Compose
- Combining Composables
- Jetpack Compose State Dealing with
- Materials Design Composable Features
- Materials Design Modifiers
- ConstraintLayout in Jetpack Compose
- Complicated Jetpack Compose UI
- Jetpack Compose Lifecycle
- Results
- Jetpack Compose Animation API
- Property Animations
- Transitions
- Prop Keys
- View Toolkit Backwards Compatibility
- Glances
- UI Testing
- Accessibility
On this guide, you’ll learn to construct a strong app utilizing Jetpack Compose, tips on how to model your apps utilizing Materials Design, particular animations and state transitions, tips on how to use modifiers and rather more!
This guide will serve you as a central level that holds all the data you want…
extra
This part tells you a couple of issues you have to know earlier than you get began, resembling what {hardware} and software program you’ll want, the place to seek out the venture recordsdata for this guide, and extra.
Android UI Toolkit is over 10 years previous now! Over time, it has obtained quite a few updates by way of performance, forms of UI parts it offers and optimizations. Nevertheless, due to the way in which the UI group initially developed the toolkit, it additionally grew in complexity and the quantity of code for even the best of elements.
Lastly, in 2020, a miracle occurred: Jetpack Compose. The brand new UI toolkit was introduced and began being severely developed by Google. Jetpack Compose is a brand new and contemporary toolkit, constructed utterly in Kotlin, that gives a clear and declarative method to develop customized elements and delightful interfaces.
On this part, you’ll study all about:
- The basic elements Jetpack Compose offers.
- The best way to construct frequent consumer interface elements resembling containers, navigation controls and lists.
Within the following 4 chapters, you’ll dive deep into the API and study a lot about this glorious new UI toolkit.
Over time, the Android UI toolkit has been developed to offer a number of
totally different approaches in terms of writing consumer interface code. From creating
a totally programmatic interface or writing XML-powered layouts, to utilizing totally different
libraries with customized DSLs, there have been many options to the identical difficulty of
reusability, scalability and efficiency. Assessment legacy methods of writing UI code,
and discover the brand new and superior UI toolkit referred to as Jetpack Compose.
Be taught extra in regards to the concept of composable features by making an attempt out the
fundamental Jetpack Compose elements. Every composable operate has a code pattern and is proven contained in the app.
The chapter covers the speculation behind composable layouts and directions on tips on how to use these layouts to group fundamental parts right into a extra advanced UI.
This chapter covers the speculation behind scrollable containers and constructing dynamic horizontal and vertical lists in Jetpack Compose.
When engaged on apps and consumer interfaces, it’s not solely necessary to know what every bit of the interface ought to be, but additionally how all these items come collectively to construct a wonderful and fully-functional design that’ll wow your customers.
Now that you simply’ve learnt the fundamentals of Jetpack Compose and its elementary UI parts, you’re able to dive deeper into constructing customized Compose parts, managing their state in a performant approach and styling them utilizing modifiers and built-in Materials Design options.
Over the following 4 chapters, you’ll learn to:
- Connect LiveData constructions to your state administration.
- Depend on totally different styling modifiers.
- Mix these subjects to create a strong UI!
You’ll construct on the data from the earlier part of the guide by studying new elements of the Jetpack Compose toolkit.
Discover ways to mix totally different small composable features into larger and extra advanced customized UI. Learn the way to consider the UI construction earlier than implementing composables.
On this chapter you will learn to model your UI elements utilizing Jetpack Compose modifiers. Utilizing them, you will add shapes, colours, borders, paddings and extra!
Discover ways to handle state and construct unidirectional flows of information combining Jetpack Compose, ViewModels and LiveData constructs.
Discover ways to implement Materials Design elements in Jetpack Compose. Dive deeper into state dealing with and implement extra JetNotes options.
Now that you simply’ve constructed your app’s fundamental UI, it’s time to take it to a different stage. On this part, you’ll apply customized, advanced designs that allow you to stand out from 1000’s of comparable apps! This normally entails constructing advanced customized elements and making use of animations to characterize state modifications when your customers work together with the UI.
Over the following 5 chapters, you’ll dive deeper into the Jetpack Compose API to learn to:
- Join Compose UI to legacy Android code.
- React to Compose UI lifecycles.
- Animate totally different state modifications and consumer interactions.
- The best way to use Jetpack Compose at the side of the previous View UI Toolkit
Within the course of, you’ll construct an superior app that represents a real-world venture and also you’ll apply some greatest practices to enhance the consumer expertise.
Discover ways to reference ConstraintSets in Compose and tips on how to use them to place views identical to in a ConstraintLayout.
Discover ways to construct a fancy UI in Jetpack Compose utilizing all the basic elements and mixing them collectively.
Discover ways to hearken to and react to lifecycle callbacks of Jetpack Compose elements.
Discover ways to animate UI properties utilizing totally different animation options of Jetpack Compose.
Discover ways to use Jetpack Compose in new tasks and mix it with the View API, or tips on how to add Jetpack Compose to current tasks.
Up to now, you’ve targeted on build up data of how Jetpack Compose works. You now know tips on how to construct
a reasonably advanced app utilizing Compose, properly performed on reaching this! Apps which can be of top quality are constructed this fashion and likewise incorporate two new ideas you’ll study, UI Testing and Accessibility
Within the subsequent two chapters, you’ll dive into every of those subjects and learn to:
- Construct a set of UI checks to confirm your Jetpack Compose UI works as anticipated
- Help Accessibility options in your app by means of Compose
These are two chapters you will need to learn to take your Compose expertise and consumer expertise to the following stage.
Discover ways to write element stage & display stage UI checks in Jetpack Compose.
Discover ways to use Jetpack Compose in new tasks and mix it with the View API, or tips on how to add Jetpack Compose to current tasks.
Nicely performed on reaching part V of the guide. You now know tips on how to construct a top quality app utilizing Jetpack Compose, ensuring it’s examined appropriately by way of UI Testing, and eventually levaging Accessibility options so your app can be utilized by a big viewers.
On this part you’ll have a look at a brand new space of Compose being created referred to as Jetpack Look, a brand new method to construct Widgets utilizing Compose. You’ll additionally have a look at tips on how to hold your Jetpack Compose data upto date with the most recent releases.
By the top of the part you’ll study:
- What Jetpack Look is and construct a Widget utilizing it
- How vital Jetpack Compose is to the Developer neighborhood.
Discover ways to use Jetpack Compose in new tasks and mix it with the View API, or tips on how to add Jetpack Compose to current tasks.
Be taught in regards to the all sources you should utilize to remain updated with every thing occurring within the Jetpack Compose ecosystem.
This supplementary part is for appendices to accompany the guide. On this part there’s a useful set of comparisions of UI elements between the previous UI Toolkit and Jetpack Compose. Use this if you wish to have an thought what like for like elements exist.
