This guide is for intermediate Android builders, who want to broaden their information 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 effectively 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 akin to
state dealing with, connecting the declarative UI to software structure sample, utilizing animations and extra.
- Jetpack Compose Fundamentals
- Composable Capabilities
- Modifiers
- Recomposition
- Jetpack Compose UI Tree
- Jetpack Compose State
- Dynamic Composable Capabilities
- Constructing Lists in Jetpack Compose
- Combining Composables
- Jetpack Compose State Dealing with
- Materials Design Composable Capabilities
- 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 discover ways to construct a strong app utilizing Jetpack Compose, model your apps utilizing Materials Design, particular animations and state transitions, use modifiers and way more!
This guide will serve you as a central level that holds all the knowledge you want…
extra
This part tells you a number of issues you must know earlier than you get began, akin to what {hardware} and software program you’ll want, the place to search out the mission information for this guide, and extra.
Android UI Toolkit is over 10 years outdated now! Through the years, it has acquired quite a few updates when it comes to performance, sorts of UI parts it offers and optimizations. Nonetheless, due to the best way the UI staff 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 critically developed by Google. Jetpack Compose is a brand new and contemporary toolkit, constructed utterly in Kotlin, that provides a clear and declarative solution to develop customized elements and delightful interfaces.
On this part, you’ll study all about:
- The basic elements Jetpack Compose offers.
- Methods to construct frequent person interface elements akin to 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.
Through the years, the Android UI toolkit has been developed to offer a number of
completely different approaches with regards to writing person interface code. From growing
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 concern of
reusability, scalability and efficiency. Evaluation legacy methods of writing UI code,
and discover the brand new and superior UI toolkit known as Jetpack Compose.
Study extra in regards to the principle of composable features by making an attempt out the
primary Jetpack Compose elements. 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 use these layouts to group primary parts right into a extra complicated 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 each bit of the interface ought to be, but additionally how all these items come collectively to construct a ravishing and fully-functional design that’ll wow your customers.
Now that you just’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 subsequent 4 chapters, you’ll discover ways 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 elements of the Jetpack Compose toolkit.
Learn to mix completely different small composable features into larger and extra complicated customized UI. Learn the way to consider the UI construction earlier than implementing composables.
On this chapter you may discover ways to model your UI elements utilizing Jetpack Compose modifiers. Utilizing them, you may 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 elements in Jetpack Compose. Dive deeper into state dealing with and implement extra JetNotes options.
Now that you just’ve constructed your app’s primary UI, it’s time to take it to a different stage. On this part, you’ll apply customized, complicated designs that assist you stand out from hundreds of comparable apps! This normally includes constructing complicated customized elements and making use of animations to signify state modifications when your customers work together with the UI.
Over the subsequent 5 chapters, you’ll dive deeper into the Jetpack Compose API to discover ways to:
- Join Compose UI to legacy Android code.
- React to Compose UI lifecycles.
- Animate completely different state modifications and person interactions.
- Methods to use Jetpack Compose along side the outdated View UI Toolkit
Within the course of, you’ll construct an superior app that represents a real-world mission and also you’ll apply some finest practices to enhance the person expertise.
Learn to reference ConstraintSets in Compose and use them to place views identical to in a ConstraintLayout.
Learn to construct a fancy UI in Jetpack Compose utilizing all the basic elements and mixing them collectively.
Learn to take heed to and react to lifecycle callbacks of Jetpack Compose elements.
Learn to animate UI properties utilizing completely different animation options of Jetpack Compose.
Learn to use Jetpack Compose in new tasks and mix it with the View API, or add Jetpack Compose to present tasks.
Up to now, you’ve centered on increase information of how Jetpack Compose works. You now know construct
a reasonably complicated app utilizing Compose, effectively executed on reaching this! Apps which can be of top of the range 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 discover ways to:
- Construct a collection of UI assessments to confirm your Jetpack Compose UI works as anticipated
- Assist Accessibility options in your app via Compose
These are two chapters you’re going to wish to learn to take your Compose abilities and person expertise to the subsequent stage.
Learn to write element stage & display stage UI assessments in Jetpack Compose.
Learn to use Jetpack Compose in new tasks and mix it with the View API, or add Jetpack Compose to present tasks.
Nicely executed on reaching part V of the guide. You now know 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 take 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 take a look at maintain your Jetpack Compose information upto date with the newest 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 group.
Learn to use Jetpack Compose in new tasks and mix it with the View API, or add Jetpack Compose to present tasks.
Study in regards to the all assets you need to use to remain updated with every part 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 outdated UI Toolkit and Jetpack Compose. Use this if you wish to have an concept what like for like elements exist.