Nikhil-z/jetpack-compose-awesome

📝 A curated list of awesome Jetpack Compose libraries, projects, articles and resources

📝 A curated list of awesome JetpackCompose libraries, projects, articles and resources.

See also: Android Developer Reference

Contents

• News/Updates
• Official documentation
• Articles
  • Getting started
  • Styling
  • Navigation
  • Animations
  • Interop
  • Migration
• Tools
• Libraries
• App Projects
• Compose Desktop Projects
• Videos
• Extras

🔥 News/Updates

• 24 May 2023 - Compose 1.5.0-beta01)
• 07 Dec 2022 - Compose for Wear OS 1.1 is now stable: check out new features!
• 11 May 2022 - Announcing Compose for Wear OS Beta!
• 15 January 2022 - ConstraintLayout for Compose 1.0.0 Released
• 4 August, 2021 - Compose Multiplatform in Alpha
• 28 July, 2021 - Jetpack Compose 1.0 Released!

Docs

• Jetpack Compose
• Jetpack Compose Codelabs
• Jetpack Compose Roadmap
• Jetpack Compose Release Notes
• ComposeCookBook
• Compose Academy - Jetpack Compose Reference
• Jetpack Compose App - Comparison of existing UI widgets and Jetpack Compose
• API Guidelines for Jetpack Compose
• Book: Jetpack Compose internals
• Jetpack Compose Collection
• Android Basics with Compose Course
• Compose performance Doc
• Jetpack Compose Component List – List of all components you can use in Jetpack Compose

Tools

• recompose - A tool for converting Android layouts in XML to Kotlin code using Jetpack Compose.
• Jetpack Compose Playground
• Shot - Jetpack Compose screenshot testing tool
• Radiography - UI structure printer
• Showkase - Helps you organize, discover, search and visualize Jetpack Compose UI elements
• Jetpack Compose Twitter Bot - A Twitter Bot to get all updates about Jetpack Compose in your feed

Articles

• Diving into Jetpack Compose
• Android Jetpack Compose Review
• Understanding Jetpack Compose — part 1 of 2
• Under the hood of Jetpack Compose — part 2 of 2
• Code Simple Android Jetpack Compose Drawing App
• Android Jetpack Compose: Remember Made Easy
• Jetpack Compose Effect Handlers
• Introduction to the Compose Snapshot system
• The Story of My First A-ha Moment With Jetpack Compose
• remember { mutableStateOf() } – A cheat sheet
• Inside Jetpack Compose
• What is “donut-hole skipping” in Jetpack Compose?
• Supporting different screen sizes on Android with Jetpack Compose
• Cartographing Jetpack Compose: compiler and runtime
• Focus in Jetpack Compose
• Browsing Jetpack Compose samples
• Jetpack compose — Dependency injection with Dagger/HILT
• Jetpack Compose: MVVM State management in a simple way
• Comparing Jetpack Compose performance with XML
• 🆕 🚀 Drawing edge to edge in Jetpack Compose
• 🆕 Problem solving in Compose Text
• 🆕 🚀 Every single type of Dialog in Jetpack Compose and how to use them

Getting started

• Jetpack Compose Tutorial for Android: Getting Started
• Migration to compose
• Helping You Understand The Syntax of Jetpack Compose
• Scoped recomposition in Jetpack Compose — what happens when state changes?
• Things you need to know before switching to Jetpack Compose
• Roadmap for Jetpack Compose
• 7 things you should know before using Jetpack Compose

Modifiers

• List of Compose modifiers
• Always provide a Modifier parameter
• Lessons learned when migrating my app to Jetpack Compose

Styling

• Building a Design System implementation using Jetpack Compose — Part1 (Theme)
• Building a Design System implementation using Jetpack Compose — Part2 (Component)
• How to create realistic UI with Jetpack Compose(Part II)
• Jetpack Compose: Styles and Themes (Part II)
• Create a truly custom theme in Jetpack Compose
• How to create a truly custom theme in Jetpack Compose
• Jetpack Compose: Theme and Typography

Navigation

Libraries

• Modo - Navigation library based on UDF principles
• compose-navigation-reimagined - A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose
• compose-destinations - Annotation processing library for type-safe Jetpack Compose navigation with no boilerplate.
• Appyx - Model-driven navigation for Jetpack Compose
• compose-router - Routing functionality for Jetpack Compose with back stack voyager - A pragmatic navigation library for Jetpack Compose
• compose-backstack - Simple composable for rendering transitions between backstacks.

Articles

• Android Jetpack Compose: Navigation
• Jetpack Compose: Navigation
• Passing multi typed data between screens with Jetpack Compose navigation component
• Passing string typed data with Jetpack Compose navigation component
• Jetpack Compose: Navigating to a Detail View (Part III)
• Handling back presses in Jetpack Compose
• Nested Navigation Graphs in Jetpack Compose
• Passing Parcelable / Serializable and Other Data in Jetpack Compose Navigation

UI Components

• Implement Bottom Bar Navigation in Jetpack Compose

Lists/RecyclerView

• Jetpack Compose: An easy way to RecyclerView (Part I)
• Learn with code: Jetpack Compose — Lists and Pagination (Part 1)
• Expandable lists in Jetpack Compose
• StaggeredVerticalGrid of Android Jetpack Compose
• RecyclerView and LazyColumnFor in Jetpack Compose
• List animations in Compose: Add an item
• List animations in Compose: Swipe to delete
• List animations in Compose: Drag to reorder
• Jetpack Compose: Building Grids
• How to master Swipeable and NestedScroll modifiers in Jetpack Compose
• Basic Drag-n-Drop in Jetpack Compose
• Infinite LazyColumn in Jetpack Compose

Animations/Transitions

• Intro to animations with Jetpack Compose
• Jetpack Compose Animations Tutorial: Getting Started
• Building an exploding FAB transition with Jetpack Compose
• How to animate BottomSheet content using Jetpack Compose
• Creating a rotating card in Jetpack Compose
• Animate with Jetpack Compose: Animate as State and Animation Specs
• Android Jetpack Compose: Animation Spec Made Easy
• Jetpack Compose — Reveal effect
• Animations in Jetpack Compose with examples
• Intro showcase view in Jetpack Compose — Android
• 🆕 Illuminating Interactions: Visual State in Jetpack Compose
• 🆕 Creating Pager Animations in Jetpack Compose

Interop

• Jetpack Compose Interop Part 1
• Jetpack Compose Interop Part 2
• Jetpack Compose View & Android View Comparison
• Adopting Jetpack Compose with Interop API

Migration

• Getting our apps ready for Jetpack Compose
• Jetpack Compose migration course

Architecture

• Jetpack Compose navigation architecture with ViewModels
• ViewModels using Compose: MutableStateFlows or MutableStates?
• Better handling states between ViewModel and Composable
• Dagger 2 and Jetpack Compose Integration

Dependency Injection

• Koin for Compose proposal (Jetpack and Multiplatform)

Side-Effects

• Jetpack Compose Side-Effects — LaunchedEffect
• Jetpack Compose Side-Effects II — rememberCoroutineScope
• Jetpack Compose Side-Effects III— rememberUpdatedState

Custom Composables

• Custom Weekly Schedule Layout with Jetpack Compose - Part 1
• Custom Weekly Schedule Layout with Jetpack Compose - Part 2

Canvas

• Using shapes in Jetpack Compose
• Drawing and painting in Jetpack Compose #1
• Emoji Slider in Jetpack Compose using Canvas API

Exploring JetPack Compose

• Getting our apps ready for JetPack Compose
• Modifiers
• Container
• Text
• Button
• Switch
• Stack
• Border
• Row & Column
• Column
• Padding modifier
• Arrangement
• Radio Group
• Radio Button
• Card
• Snackbar
• @Preview annotation
• Android View
• Floating Action Button
• Modal Drawer Layout
• TopAppBar
• FlowLayout

Additional

• Supporting different screen sizes on Android with Jetpack Compose
• Measuring Render Performance with Jetpack Compose
• Understanding re-composition in Jetpack Compose with a case study
• Jetpack Compose: Preview
• Improving performance with Compose Compiler Metrics

Cross-platform

• Fully cross-platform Kotlin applications (almost)

Testings

• KakaoCup/Compose
• Testing your Compose layout
• How to test Jetpack Compose UI

Libraries

• accompanist - A collection of extension libraries for Jetpack Compose
• Landscapist - image loading uding Glide, Coil, Fresco
• compose-icons - Open Source icon packs for Jetpack Compose including Font Awesome, Simple Icons, Feather and more.
• compose-backstack - Simple composable for rendering transitions between backstacks.
• lyricist - The missing I18N/L10N (internationalization/localization) library for Jetpack Compose!
• compose-markdown - Markdown Text for Android Jetpack Compose
• snapper - A snapping fling behavior for Jetpack Compose

UI

• neumorphic-compose - Neumorphism UI with Jetpack Compose. Just add simple neumorphic() modifier.
• compose-richtext - A collection of Compose libraries for advanced text formatting.
• compose-ratingbar - Ratingbar for Jetpack Compose.
• tehras/charts - simple Android compose charts.
• info-bar-compose - Display Snackbar-style messages, the easy way.
• shimmer - Shimmer effect
• compose-sliders - Custom Sliders (previously known as SeekBar) for jetpack compose
• Dark-Toggle-Button-Sample-Jetpack-Compose (+50 ⭐) - Animated dark mode toggle button with Jetpack Compose.
• Collection of UIs and Animations built with Jetpack Compose for Android - Collection of UIs and Animations built with Jetpack Compose for Android
• Konfetti - Easily celebrate little and big moments in your app with this lightweight confetti particle system 🎊
• heart-switch - ❤️ A heart-shaped toggle switch component for Jetpack Compose
• ProgressButton - SSJetPackComposeProgressButton is an elegant button with a different loading animations which makes your app attractive.
• SwipeAbleViews - SSJetpackComposeSwipeableView is a small library which provides support for the swipeable views. You can use this in your lazyColumns or can add a simple view which contains swipe to edit/delete functionality.
• Dropdown - A Powerful and customizable Jetpack Compose dropdown menu with cascade and animations
• FloatingActionButton SpeedDial
• ComposeCalendar - A Jetpack Compose library for handling calendar component rendering.
• WheelPickerCompose - Wheel Date & Time Picker for Jetpack Compose.
• Exploding Composable - A Jetpack Compose utility library to add explosive dust effect animation to any composable
• ComposeDynamicTheme - Material design based Theme Management System for Jetpack Compose
• 🆕 minabox - Lazy box library for Jetpack Compose, which allows to display lazy loaded items on the 2D plane.
• 🆕telephoto - Building blocks for designing media experiences in Compose UI
• 🆕Compose-Rich-Editor - A Rich text editor library for both Jetpack Compose and Compose Multiplatform,
• 🆕Animated Navigation Bar - A navigation bar with a number of preset animations
• 🆕Blueprint - 📐 library that draws a blueprint on top of your Jetpack Compose composables. It visualizes dimensions, like paddings and sizes.

App Projects

• Jetpack Compose Samples (+15.9K ⭐) - Official repository with samples by Google
• sunflower (+16.8K ⭐) - Sample app by Google
• Learn-Jetpack-Compose-By-Example (+2.9K ⭐)
• Jetpack Compose Playground (+2.8K ⭐)
• ComposeAcademy-Playground (+870 ⭐)
• JetInstagram (+689 ⭐) - Instagram clone app built with Jetpack Compose
• JetpackComposeCalculator (+272 ⭐)
• flux (+335 ⭐) - A fake weather app
• JetQuotes (+363 ⭐) - A Quotes Application
• android-2048-compose (+255 ⭐) - 2048 implemented using Jetpack Compose
• DinoCompose (+198 ⭐) - Chrome's Dino T-Rex game developed in Jetpack Compose
• JetExample (+192 ⭐) - Jetpack Compose UI components examples
• Wiggles (+256 ⭐) - Beautiful Puppy adoption app with Jetpack Compose
• Facebook-Timeline-Compose-Android (+119 ⭐)
• compose-schedule-calendar (+142 ⭐) - Demo app for a horizontal schedule(event) calendar
• jetpuppy (+55 ⭐) - Jetpuppy is a puppy adoption app using Jetpack Compose UI.
• Cheddar (+70 ⭐) - Hacker News reader
• jetpack-compose-samples (+18 ⭐) - Repository with collection of many compose samples.
• jettimer (+26 ⭐) - Timer app clone built with Jetpack Compose and Hilt
• Rebound (+7 ⭐) - Highly customizable and feature rich workout log app.
• Intro Showcase View (+15 ⭐) - An android library to highlight different features of the app built using Jetpack Compose.
• Jetpack-compose-animations-examples (+4 ⭐) - Cool animations implemented with Jetpack Compose.
• ComposeCookbook (+139 ⭐) - A Collection of major Jetpack compose UI components which are commonly used.

Android TV

• 🆕 ComposeTv - Android TV built using Jetpack Compose TV APIs

Multiplatform

• 🆕 Compose Multiplatform - official website
• Jetpack Compose Multiplatform Android & iOS - article about migrating to Jetpack Compose Multiplatform

Compose Desktop Projects

• Compose JB - Jetpack Compose for Desktop and Web
• ComposeSlackDesktop - A Slack demo app for desktop using Jetpack Compose

Other projects

• ComposeClock

📺 Videos

• Leland Richardson's channel about Compose
• Compose by example
• Thinking in Compose
• Compose for existing apps
• What's new in Compose Design Tools

Extras

• Jetpack-Compose-Playground - Community-driven collection of Jetpack Compose example code and tutorials 🚀
• Compose Modifiers Playground

Find this repository useful? ❤️

Support it by joining stargazers for this repository. ⭐