--- title: Best Jetpack Compose posts of 2024 | daily.dev description: The most upvoted Jetpack Compose posts of 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/jetpack-compose/best-of/2024 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/jetpack-compose/best-of/2024 og:type: website og:site_name: daily.dev og:title: Best Jetpack Compose posts of 2024 | daily.dev og:description: The most upvoted Jetpack Compose posts of 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Jetpack Compose — 2024 1. 1 [](/posts/the-only-correct-way-to-load-initial-data-in-your-android-app--5ngnix61s "The ONLY Correct Way to Load Initial Data In Your Android App?") Video Philipp Lackner · 2y The ONLY Correct Way to Load Initial Data In Your Android App? The post discusses various methods to load initial data in Android apps, evaluating three main approaches: using the Jetpack Compose launched effect, initializing in ViewModel's init block, and leveraging flow collection. Each method's benefits and drawbacks are examined, highlighting a newly preferred approach using flow collection for improved control and testing. 40 6 2. 2 [](/posts/creating-pixel-perfect-ui-with-jetpack-compose-xtjiscxej "Creating Pixel-Perfect UI with Jetpack Compose") Article ProAndroidDev · 2y Creating Pixel-Perfect UI with Jetpack Compose Creating consistent UI across different Android devices can be challenging due to varying display resolutions and user-adjustable display settings. Jetpack Compose, combined with the 'aDp' library, offers a solution for achieving pixel-perfect UI. The library scales dimensions according to the device's settings, ensuring design consistency. It also includes 'aSp' for fonts to handle changes in text size settings. 33 3. 3 [](/posts/jetpack-compose-the-android-developer-roadmap-w28kq6jkf "Jetpack Compose: The Android Developer Roadmap") Article Stream · 3y Jetpack Compose: The Android Developer Roadmap Jetpack Compose is the future of the UI toolkit in Android development. It includes components like Compose UI, State management, Side-effects, and CompositionLocal. You can migrate from XML to Jetpack Compose using practical APIs and modular libraries. Jetpack Compose also provides mechanisms to manage side-effects and pass data through the Compose tree. Stay updated with the Android Developer Roadmap series for more information. 32 4. 4 [](/posts/keyboard-focus-management-in-jetpack-compose---android-studio-tutorial-fil1qphgo "Keyboard & Focus Management In Jetpack Compose - Android Studio Tutorial") Video Philipp Lackner · 2y Keyboard & Focus Management In Jetpack Compose - Android Studio Tutorial This tutorial covers focus and keyboard management in Jetpack Compose for Android. It explains how to create a smooth form-filling experience by automatically moving the focus to the next text field using IME actions, and submitting the form directly from the keyboard. Detailed steps are provided to implement these features programmatically. 27 1 5. 5 [](/posts/the-best-way-to-load-data-in-viewmodels-2ckdy9pcc "The best way to load data in ViewModels") Article ProAndroidDev · 2y The best way to load data in ViewModels Loading data into ViewModels is a complex task that involves managing states such as loading, success, and failure. A simplified and reactive approach is proposed using Kotlin's Flow and StateFlow. This method also includes handling data from memory, adding a refresh function, and dealing with side effects. The article provides a comprehensive solution with example code and a GitHub repository link for further reference. 26 6. 6 [](/posts/modern-android-development-in-2024-xkntgmthl "Modern Android Development in 2024") Article Medium · 3y Modern Android Development in 2024 This post discusses various topics related to modern Android development in 2024, including the use of Kotlin, key features of Jetpack Compose, architecture patterns, dependency injection, modularization, testing, in-app updates and reviews, security, loggers, Google Play Instant, AI coding assistants, and Kotlin Multiplatform. 27 7. 7 [](/posts/now-in-android-100-alocm5m9f "Now in Android #100") Article Android Developers · 3y Now in Android #100 Android 15 is released with superior media capabilities, battery optimization, app performance improvements, and file integrity protection APIs. Android Studio Iguana is launched with new features. Cloud photos are now available in the Android photo picker. ML Kit Document Scanner API enables easy integration of document scanning capabilities. Wear OS hybrid interface extends battery life. Jetpack Compose introduces nested scrolling and strong skipping. Android Jetpack releases several updates including Compose Material 3 and Lint. 23 2 8. 8 [](/posts/jetpack-compose-new-features-adaptive-layouts-and-code-efficiency-w3bgslfwh "Jetpack Compose: New Features, Adaptive Layouts, and Code Efficiency") Article Collections · 2y Jetpack Compose: New Features, Adaptive Layouts, and Code Efficiency Jetpack Compose unveils new features, improved performance, adaptive layouts, and code efficiency, revolutionizing native UI development. 22 4 9. 9 [](/posts/xml-vs-jetpack-compose-a-comparison-sdmngq6rx "XML vs. Jetpack Compose: A Comparison") Article asayer · 2y XML vs. Jetpack Compose: A Comparison This post compares XML and Jetpack Compose, two user interface development tools for Android mobile apps. It discusses their syntax, language, code structure, reactivity, learning curve, customization, adoption, community, integration, and use cases. 18 10. 10 [](/posts/design-server-driven-ui-with-jetpack-compose-and-firebase-wxqxrxjxe "Design Server-Driven UI with Jetpack Compose and Firebase") Article ProAndroidDev · 2y Design Server-Driven UI with Jetpack Compose and Firebase Server-driven UI (SDUI) is an architectural pattern reducing client-side logic by rendering UI components based on data received from the backend, enhancing flexibility and performance. Large companies like Airbnb and Netflix use this approach for consistency across platforms. SDUI helps in quicker updates without app releases, maintaining a consistent UI, and reducing the burden on mobile developers. However, it introduces challenges in terms of latency, performance, complexity, and cost. The post details the implementation with Jetpack Compose and Firebase Realtime Database, covering action handlers, component versioning, and more. 15 11. 11 [](/posts/jetpack-compose-previews-delving-deep-into-their-inner-workings-9bkoh6idr "Jetpack Compose Previews: Delving Deep Into Their Inner Workings") Article ProAndroidDev · 2y Jetpack Compose Previews: Delving Deep Into Their Inner Workings Jetpack Compose Previews enable rapid UI design iterations and can be run using \`adb\` without Android Studio. Understanding \`PreviewActivity\` and its role in hosting composables, as well as how to customize previews in multi-modular projects, can greatly enhance the development process. The guide provides detailed steps on generating and running instrumented APKs for previews and customizing preview behavior and appearance. 15 12. 12 [](/posts/a-developer-s-roadmap-to-mastering-kotlin-multiplatform-yxeffargc "A Developer’s Roadmap to Mastering Kotlin Multiplatform") Article Medium · 2y A Developer’s Roadmap to Mastering Kotlin Multiplatform Kotlin Multiplatform (KMP) allows developers to share business logic across multiple platforms such as Android, iOS, Desktop, and Web, using Kotlin. It emphasizes code consistency and efficient development by enabling platform-specific UIs while sharing core logic. Tools like Compose Multiplatform, Ktor, and various Jetpack libraries enhance the ecosystem by offering solutions for UI, networking, and local storage. KMP's architecture involves defining and implementing shared and platform-specific code, leveraging Kotlin's coroutines for asynchronous tasks. The growing support from JetBrains and Google makes KMP a promising option for developers familiar with Kotlin. 14 13. 13 [](/posts/compose-multiplatform-1-7-0-released-o4hys9plw "Compose Multiplatform 1.7.0 Released") Article JetBrains · 2y Compose Multiplatform 1.7.0 Released Compose Multiplatform 1.7.0 by JetBrains introduces new components, performance improvements, and enhanced type-safe navigation. Key updates include Material3 components in common code, better touch interop on iOS, drag-and-drop support for desktop, and shared element transitions. Performance gains are notable on iOS with Kotlin 2.0.20, and resource handling has been improved across platforms. 13 14. 14 [](/posts/i-ve-used-jetpack-compose-for-4-years---here-s-the-good-and-the-bad-2zshtyxk1 "I've Used Jetpack Compose For 4 Years - Here's the Good and the Bad") Video Philipp Lackner · 2y I've Used Jetpack Compose For 4 Years - Here's the Good and the Bad The post discusses the author's four-year experience with Jetpack Compose, highlighting its advantages and disadvantages. Jetpack Compose is considered more enjoyable and efficient for building UIs compared to the traditional XML approach, making it easier to create reusable components and implement animations. However, challenges such as dealing with modifier order and side effects are noted. Despite its quirks, Jetpack Compose is seen as a significant improvement for Android development and is expected to become the primary way to build UIs in the future. 12 15. 15 [](/posts/pdf-viewer-using-coil-5ig3pkeke "PDF Viewer using Coil") Article ProAndroidDev · 2y PDF Viewer using Coil Learn how to integrate a PDF viewer into your Android app using Coil. This guide covers creating a custom PDF decoder, adding it to the Coil configuration, and displaying PDF pages in activities or with Jetpack Compose. The approach leverages Coil’s extensibility for handling non-standard image formats efficiently. 12 16. 16 [](/posts/type-safe-bottom-navigation-in-jetpack-compose-tuxcvicq3 "Type Safe Bottom Navigation in Jetpack Compose") Article ProAndroidDev · 2y Type Safe Bottom Navigation in Jetpack Compose This guide delves into the advanced concepts of Type Safe Bottom Navigation in Jetpack Compose. It explains how to use Serializable objects for navigation routes, thus eliminating the need for route build functions and navArguments. The guide covers setting up a BottomBar with three routes, handling active tabs, generating route patterns, and managing navigation routes with arguments. It simplifies navigation setup, ensuring type safety and enhancing readability. 12 17. 17 [](/posts/3-fun-experiments-to-try-for-your-next-android-app-using-google-ai-studio-eh7nzrfoc "3 fun experiments to try for your next Android app, using Google AI Studio") Article Android Developers Blog · 2y 3 fun experiments to try for your next Android app, using Google AI Studio Discover how to use Google AI Studio and the Gemini model to enhance your Android app development. Learn to transform UI designs into Jetpack Compose code, fix UI issues with targeted prompts, and integrate new features like a recipe helper using simple AI prompts. The post highlights experimentation with AI, the importance of developer oversight, and encourages sharing and collaboration within the Android development community. 12 18. 18 [](/posts/swiftui-and-jetpack-compose-for-developers-asrk8qrou "SwiftUI and Jetpack Compose for Developers") Article Medium · 3y SwiftUI and Jetpack Compose for Developers This post compares SwiftUI and Jetpack Compose for mobile app development. It covers topics such as the language, UI components, local storage, network/HTTP request, navigation, database/offline storage, IDE, community support, sample apps, and the learning curve. 12 19. 19 [](/posts/android-studio-ladybug-compose-fragment-interop-more---philipp-s-android-news-september-2024-cftzzjhpd "Android Studio Ladybug, Compose/Fragment Interop & More - Philipp's Android News September 2024") Video Philipp Lackner · 2y Android Studio Ladybug, Compose/Fragment Interop & More - Philipp's Android News September 2024 Philipp's Android News for September 2024 highlights several updates for Android developers, including the new Android Studio Ladybug with integrated Gemini AI assistant, which enhances coding by providing code transformations, documentation, and unit test generation. The update also improves interoperability between fragments and Jetpack Compose, making it easier to embed and test these UI components together. Additionally, new features for simulating sensor data and analyzing crash logs have been introduced, alongside support for Google Pixel 9 devices. 11 20. 20 [](/posts/how-to-navigate-from-viewmodels-with-a-custom-navigator---android-studio-tutorial-2zsfdu1wr "How to Navigate From ViewModels With a Custom Navigator - Android Studio Tutorial") Video Philipp Lackner · 2y How to Navigate From ViewModels With a Custom Navigator - Android Studio Tutorial Learn a different approach to navigation in Android using a custom Navigator with Jetpack Compose. This method allows for easy global navigation from ViewModels without directly coupling them to NavControllers. It also simplifies UI testing by providing a Navigator interface that can be managed independently. The tutorial includes setting up dependencies, defining destinations, creating a Navigator interface, and integrating with Koin for dependency injection. 10 21. 21 [](/posts/mastering-navigation-in-jetpack-compose-a-guide-to-using-the-inclusive-attribute-2dhckfdme "Mastering Navigation in Jetpack Compose: A Guide to Using the inclusive Attribute") Article ProAndroidDev · 2y Mastering Navigation in Jetpack Compose: A Guide to Using the inclusive Attribute Jetpack Compose has transformed Android UI development with a modern, concise, and powerful approach. A critical feature for managing navigation between screens is the \`inclusive\` attribute within the \`popUpTo\` function. This attribute determines whether a specific destination should be removed from the navigation back stack, aiding in streamlined user flows. Practical examples include login flows, multi-step processes, and order cancellation, where using \`inclusive = true\` prevents users from returning to previous screens, enhancing the app's usability. 10 22. 22 [](/posts/android-app-bars-vs-toolbars-vs-other-bars-explained-pjt1sr1oo "Android App Bars vs Toolbars vs Other Bars, Explained") Article droidcon · 2y Android App Bars vs Toolbars vs Other Bars, Explained Top and bottom bars in Android apps, including status bars, toolbars, and navigation bars, can often be confusing. This post clarifies their roles and functionalities. System bars are uniform across apps and managed by the phone's system. The top app bar provides app identity and navigation, changing dynamically with the screen. Android's ActionBar and Toolbar serve as top app bars with various customizations. Jetpack Compose introduces the TopAppBar for similar purposes, supporting the Material Design guidelines. The bottom app bar, including NavigationBar and BottomAppBar, offers key actions and navigation at the bottom of the screen. 10 23. 23 [](/posts/jetpack-compose-system-ui-compatibility-and-immersive-status-bar-sr7sycbtg "Jetpack Compose: System UI Compatibility and Immersive Status Bar") Article ProAndroidDev · 2y Jetpack Compose: System UI Compatibility and Immersive Status Bar Learn how to achieve an immersive effect in Android using Jetpack Compose. Extend the application's drawing area into the System UI and set the background color of the System UI and page margins. 10 [See all Jetpack Compose archives](/tags/jetpack-compose/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/jetpack-compose/best-of/2024#page","url":"https://daily.dev/tags/jetpack-compose/best-of/2024","name":"Best Jetpack Compose Posts of 2024","description":"The most upvoted Jetpack Compose posts of 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/jetpack-compose/best-of/2024#items","numberOfItems":23,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-only-correct-way-to-load-initial-data-in-your-android-app--5ngnix61s","name":"The ONLY Correct Way to Load Initial Data In Your Android App?"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/creating-pixel-perfect-ui-with-jetpack-compose-xtjiscxej","name":"Creating Pixel-Perfect UI with Jetpack Compose"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/jetpack-compose-the-android-developer-roadmap-w28kq6jkf","name":"Jetpack Compose: The Android Developer Roadmap"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/keyboard-focus-management-in-jetpack-compose---android-studio-tutorial-fil1qphgo","name":"Keyboard & Focus Management In Jetpack Compose - Android Studio Tutorial"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/the-best-way-to-load-data-in-viewmodels-2ckdy9pcc","name":"The best way to load data in ViewModels"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/modern-android-development-in-2024-xkntgmthl","name":"Modern Android Development in 2024"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/now-in-android-100-alocm5m9f","name":"Now in Android #100"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/jetpack-compose-new-features-adaptive-layouts-and-code-efficiency-w3bgslfwh","name":"Jetpack Compose: New Features, Adaptive Layouts, and Code Efficiency"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/xml-vs-jetpack-compose-a-comparison-sdmngq6rx","name":"XML vs. Jetpack Compose: A Comparison"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/design-server-driven-ui-with-jetpack-compose-and-firebase-wxqxrxjxe","name":"Design Server-Driven UI with Jetpack Compose and Firebase"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/jetpack-compose-previews-delving-deep-into-their-inner-workings-9bkoh6idr","name":"Jetpack Compose Previews: Delving Deep Into Their Inner Workings"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/a-developer-s-roadmap-to-mastering-kotlin-multiplatform-yxeffargc","name":"A Developer’s Roadmap to Mastering Kotlin Multiplatform"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/compose-multiplatform-1-7-0-released-o4hys9plw","name":"Compose Multiplatform 1.7.0 Released"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/i-ve-used-jetpack-compose-for-4-years---here-s-the-good-and-the-bad-2zshtyxk1","name":"I've Used Jetpack Compose For 4 Years - Here's the Good and the Bad"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/pdf-viewer-using-coil-5ig3pkeke","name":"PDF Viewer using Coil"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/type-safe-bottom-navigation-in-jetpack-compose-tuxcvicq3","name":"Type Safe Bottom Navigation in Jetpack Compose"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/3-fun-experiments-to-try-for-your-next-android-app-using-google-ai-studio-eh7nzrfoc","name":"3 fun experiments to try for your next Android app, using Google AI Studio"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/swiftui-and-jetpack-compose-for-developers-asrk8qrou","name":"SwiftUI and Jetpack Compose for Developers"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/android-studio-ladybug-compose-fragment-interop-more---philipp-s-android-news-september-2024-cftzzjhpd","name":"Android Studio Ladybug, Compose/Fragment Interop & More - Philipp's Android News September 2024"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-navigate-from-viewmodels-with-a-custom-navigator---android-studio-tutorial-2zsfdu1wr","name":"How to Navigate From ViewModels With a Custom Navigator - Android Studio Tutorial"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/mastering-navigation-in-jetpack-compose-a-guide-to-using-the-inclusive-attribute-2dhckfdme","name":"Mastering Navigation in Jetpack Compose: A Guide to Using the inclusive Attribute"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/android-app-bars-vs-toolbars-vs-other-bars-explained-pjt1sr1oo","name":"Android App Bars vs Toolbars vs Other Bars, Explained"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/jetpack-compose-system-ui-compatibility-and-immersive-status-bar-sr7sycbtg","name":"Jetpack Compose: System UI Compatibility and Immersive Status Bar"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Jetpack Compose","item":"https://daily.dev/tags/jetpack-compose"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/jetpack-compose/best-of"},{"@type":"ListItem","position":5,"name":"2024"}]}]} ```