This guide is for intermediate Android builders, who wish to broaden their information of the UI toolkit and add extra instruments to construct stunning interfaces
to their belt, with Jetpack Compose. It’s additionally for superior builders who’re nicely versed with the legacy Android Toolkit
and presumably 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 software 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
- Advanced 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, the best way to fashion your apps utilizing Materials Design, particular animations and state transitions, the best way 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 it’s essential to know earlier than you get began, resembling what {hardware} and software program you’ll want, the place to search out the venture information for this guide, and extra.
Android UI Toolkit is over 10 years outdated now! Through the years, it has obtained quite a few updates by way of performance, varieties 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 parts.
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 recent toolkit, constructed utterly in Kotlin, that provides a clear and declarative solution to develop customized parts and delightful interfaces.
On this part, you’ll be taught all about:
- The basic parts Jetpack Compose offers.
- Learn how to construct frequent person interface parts resembling containers, navigation controls and lists.
Within the following 4 chapters, you’ll dive deep into the API and be taught a lot about this excellent new UI toolkit.
Through the years, the Android UI toolkit has been developed to supply a number of
completely different approaches with regards to writing person interface code. From creating
a completely programmatic interface or writing XML-powered layouts, to utilizing completely different
libraries with customized DSLs, there have been many options to the identical problem of
reusability, scalability and efficiency. Assessment legacy methods of writing UI code,
and discover the brand new and superior UI toolkit known as Jetpack Compose.
Study extra concerning the concept of composable features by making an attempt out the
primary Jetpack Compose parts. Every composable perform has a code pattern and is proven contained in the app.
The chapter covers the speculation behind composable layouts and directions on the best way to use these layouts to group primary 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 person interfaces, it’s not solely essential to know what every bit of the interface needs to be, but in addition how all these items come collectively to construct a ravishing and fully-functional design that’ll wow your customers.
Now that you simply’ve learnt the fundamentals of Jetpack Compose and its basic 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 subsequent 4 chapters, you’ll learn to:
- Connect LiveData constructions to your state administration.
- Depend on completely different styling modifiers.
- Mix these subjects to create a strong UI!
You’ll construct on the information from the earlier part of the guide by studying new components of the Jetpack Compose toolkit.
Learn to mix completely different small composable features into larger and extra advanced customized UI. Find out how to consider the UI construction earlier than implementing composables.
On this chapter you will learn to fashion your UI parts utilizing Jetpack Compose modifiers. Utilizing them, you will add shapes, colours, borders, paddings and extra!
Learn to handle state and construct unidirectional flows of knowledge combining Jetpack Compose, ViewModels and LiveData constructs.
Learn to implement Materials Design parts in Jetpack Compose. Dive deeper into state dealing with and implement extra JetNotes options.
Now that you simply’ve constructed your app’s primary UI, it’s time to take it to a different degree. 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 parts and making use of animations to characterize state adjustments when your customers work together with the UI.
Over the subsequent 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 completely different state adjustments and person interactions.
- Learn how to use Jetpack Compose together with the outdated 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 person expertise.
Learn to reference ConstraintSets in Compose and the best way to use them to place views similar to in a ConstraintLayout.
Learn to construct a posh UI in Jetpack Compose utilizing all the elemental parts and mixing them collectively.
Learn to take heed to and react to lifecycle callbacks of Jetpack Compose parts.
Learn to animate UI properties utilizing completely different animation options of Jetpack Compose.
Learn to use Jetpack Compose in new initiatives and mix it with the View API, or the best way to add Jetpack Compose to current initiatives.
To this point, you’ve centered on increase information of how Jetpack Compose works. You now know the best way to construct
a reasonably advanced app utilizing Compose, nicely executed on attaining this! Apps which are of top quality are constructed this manner 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 collection of UI checks to confirm your Jetpack Compose UI works as anticipated
- Assist Accessibility options in your app via Compose
These are two chapters you will need to learn to take your Compose abilities and person expertise to the subsequent degree.
Learn to write part degree & display screen degree UI checks in Jetpack Compose.
Learn to use Jetpack Compose in new initiatives and mix it with the View API, or the best way to add Jetpack Compose to current initiatives.
Nicely executed on reaching part V of the guide. You now know the best way 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 known as Jetpack Look, a brand new solution to construct Widgets utilizing Compose. You’ll additionally have a look at the best way to preserve your Jetpack Compose information upto date with the most recent releases.
By the top of the part you’ll be taught:
- What Jetpack Look is and construct a Widget utilizing it
- How important Jetpack Compose is to the Developer neighborhood.
Learn to use Jetpack Compose in new initiatives and mix it with the View API, or the best way to add Jetpack Compose to current initiatives.
Study concerning the all assets you should use to remain updated with all the pieces happening within the Jetpack Compose ecosystem.
This supplementary part is for appendices to accompany the guide. On this part there’s a helpful set of comparisions of UI parts between the outdated UI Toolkit and Jetpack Compose. Use this if you wish to have an concept what like for like parts exist.
