This guide is for intermediate Android builders, who want 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 comparable to
state dealing with, connecting the declarative UI to utility 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 learn to construct a strong app utilizing Jetpack Compose, easy methods to type your apps utilizing Materials Design, particular animations and state transitions, easy methods 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 number of issues you might want to know earlier than you get began, comparable to 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 outdated now! Over time, it has obtained quite a few updates by way of performance, sorts of UI components it gives and optimizations. Nevertheless, due to the way in which the UI crew initially developed the toolkit, it additionally grew in complexity and the quantity of code for even the only 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 recent toolkit, constructed utterly in Kotlin, that provides a clear and declarative technique to develop customized elements and delightful interfaces.
On this part, you’ll be taught all about:
- The basic elements Jetpack Compose gives.
- Tips on how to construct widespread consumer interface elements comparable to containers, navigation controls and lists.
Within the following 4 chapters, you’ll dive deep into the API and be taught a lot about this glorious new UI toolkit.
Over time, the Android UI toolkit has been developed to offer a number of
completely different approaches in the case of writing consumer 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 situation of
reusability, scalability and efficiency. Overview legacy methods of writing UI code,
and discover the brand new and superior UI toolkit known as Jetpack Compose.
Be taught extra in regards to the principle of composable features by attempting out the
primary Jetpack Compose elements. Every composable operate has a code pattern and is proven contained in the app.
The chapter covers the idea behind composable layouts and directions on easy methods to use these layouts to group primary components right into a extra complicated UI.
This chapter covers the idea behind scrollable containers and constructing dynamic horizontal and vertical lists in Jetpack Compose.
When engaged on apps and consumer interfaces, it’s not solely vital to know what each bit of the interface needs to be, but additionally how all these items come collectively to construct a phenomenal and fully-functional design that’ll wow your customers.
Now that you just’ve learnt the fundamentals of Jetpack Compose and its elementary UI components, you’re able to dive deeper into constructing customized Compose components, 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 buildings to your state administration.
- Depend on completely different styling modifiers.
- Mix these matters 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 greater and extra complicated customized UI. Learn the way to consider the UI construction earlier than implementing composables.
On this chapter you may learn to type 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 information 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 often includes constructing complicated customized elements 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 consumer interactions.
- Tips on 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 consumer expertise.
Learn to reference ConstraintSets in Compose and easy methods to use them to place views identical to in a ConstraintLayout.
Learn to construct a posh UI in Jetpack Compose utilizing all the basic elements and mixing them collectively.
Learn to hearken 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 easy methods to add Jetpack Compose to present tasks.
To date, you’ve centered on increase information of how Jetpack Compose works. You now know easy methods to construct
a reasonably complicated app utilizing Compose, nicely finished on attaining this! Apps which are 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 matters and learn to:
- Construct a set of UI exams to confirm your Jetpack Compose UI works as anticipated
- Help Accessibility options in your app via Compose
These are two chapters you’re going to need to learn to take your Compose abilities and consumer expertise to the subsequent stage.
Learn to write part stage & display screen stage UI exams in Jetpack Compose.
Learn to use Jetpack Compose in new tasks and mix it with the View API, or easy methods to add Jetpack Compose to present tasks.
Nicely finished on reaching part V of the guide. You now know easy methods to construct a top quality app utilizing Jetpack Compose, ensuring it’s examined appropriately through UI Testing, and at last 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 technique to construct Widgets utilizing Compose. You’ll additionally take a look at easy methods 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 group.
Learn to use Jetpack Compose in new tasks and mix it with the View API, or easy methods to add Jetpack Compose to present tasks.
Be taught in regards to the all sources you need to use to remain updated with all the things 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 elements between the outdated UI Toolkit and Jetpack Compose. Use this if you wish to have an thought what like for like elements exist.
