Android Jetpack Compose — Exploring State Based UI
As a developer who is always excited about new enhancements in Technology, I recently started exploring Jetpack Compose, Android’s own Modern UI toolkit to build Native UI in declarative style inspired from Modern frameworks like Flutter, litho etc. I have been playing with it for a while now and it is super fun, simple and exciting to build user interfaces and state based animations using it, hence thought of spreading the knowledge by sharing what I have learnt using this amazing tool so far.
Table of contents
Why Jetpack Compose ?Like with every new feature, there will always be few mandatory questions which needs to be addressed before the transition, like for starters learning curve of the feature, interoperability with current system and ease of migrating existing code. As per my experience playing with compose for past couple of weeks, it squashes above questions right away
Thrilled ? Me too! So without further ado let’s go ahead and build a sample Android Application using Jetpack Compose. Most of the apps includes loading data into lists/grids using a loading and error state, So this article demonstrates most commonly used scenario which is to display a list of items by fetching data from server along with loading and error screens, also paginating them.
To start working with Jetpack Compose, Install Android Studio 4.2 latest canary and create new project with Empty Compose Activity template to let IDE set up compose dependencies and Gradle configurations for you. For more information visit https://developer.android.com/jetpack/compose/setup
Building UI using ComposeCompose widgets are created using annotating functions with We need to first build compose functions for states of screen which are In this case we need three compose widgets to show Loading, Error and Empty UI states. Also let’s make sure error and empty messages are configurable so we can reuse same functions across Application.
Handling UI StateNow the Compose widgets are ready, time to render widgets based on current state of screen. To do that let’s create enum class with all possible states.
Create a compose function using
Interacting with ViewModelsSo far so good, State handler Compose widget is ready, but it needs Also to implement paging logic in
Now to wire compose widgets with
Perfect! App is almost ready, at this point it can render loading, error and empty UI on
Compose LazyGridFor with pagingOut of the box, Jetpack Compose toolkit provides Create one by merging
Create a grid item to populate
Now Let’s fill
🎊 That’s it ! We finished the entire flow of displaying data into grid with loading states in between. Now let’s look at the code in Action! 👏 👏
SUCCESS(left), EMPTY(centre) and ERROR (right)
The complete implementation of app Plasma is in below repository 👇, It comes with cool Jetpack Compose widgets like Gradient ProgressBar , Button ,Text, State based transitions and much more. Also built using Modern Android Development(M.A.D) tools like flows, coroutines , Navigation, Architecture components, Jetpack Datastore and Dagger Hilt.
Thanks for reading! Please click the 👏 button and share it to help others only if you feel it is worthy!
Please drop any suggestions, enhancements, thoughts or queries in comments.
Cheers! and Happy Coding ✌️
Android News
droidcon News
Tech Showcases, Developer Resources & Partners
EmployerBrandingHeader
jobs.droidcon.com
![]() Latest Android Jobs
Kotlin Weekly
![]() Your weekly dose of Kotlin
ProAndroidDev
![]() Android Tech Blogs, Case Studies and Step-by-Step Coding
Zalando
![]() Meet one of Berlin's top employers
Academy for App Success
![]() Google Play resources tailored for the global droidcon community |
Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.