Jetpack Compose - Collection of Android Compose UI samples

New Compose Content

Paging and lazy loading with compose in android jetpack

Learn to implement paging with jetpack compose in android into lazy list scope with clear explanation on preparing your api to return paginated response and loading the information into your composables from paging source.

Use SavedStateHandle with ViewModel Compose Android

Use SavedStateHandle effectively to receive arguments directly in ViewModel while navigation between composables or fragments in Android. Learn how to pass a parcelable navigation type objects and write a simple test case by mocking retrieved data.

Compose Actors Code Examples

Compose and build android app with new architecture principles

Build android with compose which follows guide to app architecture principles. Implement UI and Data layer built with ViewModels, Coroutines, States.

Search with TextField in list Compose Android Jetpack

Build fully search functional screens with composables in android using TextField, State, ViewModel and LiveData. theming, customizing and validading the TextField to perform search and display relevant results to user in list.

Animation Series

Reveal effect animations in compose jetpack android

Animate shapes in android with jetpack compose. Article demonstrates use case and sample animations covering shapes, launched effect, repeatable, infinite and finite animation, remember infinite transition, animate color changes, animate float between initial and target values.

Custom shape animations pulsating circles on canvas in compose android

Custom shape animations in android with jetpack compose. Animate circle and line on canvas to form custom shape animation. Create pulsating circles with animatable properties with launched effect, repeatable and finite animation, remember infinite transition, animate float between initial and target values.

Compose hourglass animation on canvas in android

Learn how to create hourglass animation with drawing on canvas in android with jetpack compose. Scale shape and color of animateable object drawn on canvas based on duration with initial and target values.

List item Animations

List animations in Compose: Add an item

Learn Compose animations with a walk-through project. Using LaunchedEffect and Animateable, we create a few consecutive animations to produce a smooth experience while adding an item to a list.

List animations in Compose: Drag to reorder

Learn how to implement drag to reorder feature in Jetpack Compose. And spice things up in the end to make it more intuitive.

List animations in Compose: Swipe to delete

Want to get a taste of gestures in Compose? Check this article, and build a spectacular animation when an item is swiped away.

Layouts in Compose

Rows Columns and Boxes in Jetpack Compose Android

Even with just rows and columns, you can create intuitive user interfaces in Jetpack Compose. Create basics layouts Rows and Columns using Jetpack Compose in Android. Chaining and aligning the elements in layouts.

Bottom Navigation View with Jetpack Compose in Android

When developing any mobile app, it is very important that we think about how the user will move through our app. One of the best ways to help users navigate through an app is to include a Bottom Navigation Bar. Let’s see how we can implement one in Jetpack Compose.

Permissions

Handling permissions with Accompanist in Android with Jetpack Compose

This article will help you understand and implement runtime permission using accompanist library in android with jetpack compose. Along with that, handle few use case scenarios and showing the image from an uri.

Featured image permissions in compose android

Implementing permissions in Android with Jetpack Compose

This article will help you understand and implement runtime permissions in android with jetpack compose without using any library. Along with that handle few use case scenarios and showing the image from the launcher using an Uri.

Navigation

List to detail navigation with compose android

Learn how to build a simple navigation flow between list and detail composable destinations using jetpack compose in android. Build a simple app which shows cats using NavHost, NavController, NavArguments.

Modal Bottom sheet in android jetpack compose

Implementing modal bottom sheet has never been easier in Android with Compose. But it is made easier with ModalBottomSheetLayout along multiple options like adding an anchor, styling your sheet, allows you to add modal sheet with your own customization at utmost convenience.