Moving on - what's new in Compose 1.1

Since Jetpack Compose 1.0 became stable in July 2021, Google has published quite a few beta versions and release candidates of the successor Compose 1.1. The new version finalizes some experimental apis and introduces a couple of new composable functions. This talk shows the most interesting changes. For example, you will learn about NavigationRail() and how to use it to make your apps shine on large screen devices. The second part of the talk introduces you to Material3 for Compose, which brings Material You to Compose apps.
https://www.meetup.com/DeveloperUG/events/klbphsydcdbvb/

Transcript

1. Moving on
   What's new in Compose 1.1?
   Thomas Künneth
   

   View Slide

2. thomas@thomaskuenneth.eu
   @tkuenneth
   @tkuenneth
   https://thomaskuenneth.eu/
   @tkuenneth
   

   View Slide

3. • July 28, 2021 first stable release (1.0.0)
   • August 4,2021 (1.1.0-alpha01)
   • October 27, 2021 (1.1.0-beta01)
   • November 3, 2021 (1.0.5)
   • December 15, 2021(1.1.0-rc01)
   • February 9, 2022 (1.1.0)
   

   View Slide

4. • Continuous updates (like most Jetpack
   components)
   • Compose is added to module-level build.gradle file
   • Devs can pick or skip updates
   (based on what has changed)
   

   View Slide

5. Building
   blocks
   

   View Slide

6. compose.runtime
   compose.foundation
   compose.compiler
   Transform @Composable
   functions and enable
   optimizations with a Kotlin
   compiler plugin
   Basic functionality like text
   and drawing primitives
   Fundamental building blocks of
   Compose's programming model
   and state management; core
   runtime targeted by the Compose
   Compiler Plugin
   

   View Slide

7. compose.runtime
   compose.foundation
   compose.compiler
   compose.ui
   compose.animation
   Build animations in your Compose apps to enrich the
   user experience
   Fundamental components of the Compose UI needed
   to interact with the device, for example layout,
   drawing, and input
   

   View Slide

8. compose.runtime
   compose.foundation
   compose.compiler
   compose.ui
   compose.animation
   Material Design Components. Higher-level entry point of Compose, designed to provide components that match
   those described at www.material.io.
   compose.material
   

   View Slide

9. • Each block is referenced as a separate implementation dependency in
   the module-level build.gradle file
   • Currently no “Gimme Compose 1.1” catch-all reference
   • Compose versions may influence other build settings like plugins,
   language levels
   

   View Slide

10. • Despite version tags, no
    notion of API level
    • Hence, no API Difference
    Report
    

    View Slide

11. • Google maintains separate release notes at
    https://developer.android.com/jetpack/androidx/versions
    • To find out what‘s new…
    • Read them 😎
    • Read official summary:
    https://android-developers.googleblog.com/2022/02/jetpack-compose-11-
    now-stable.html
    • Let someone do additional investigations 🤣
    

    View Slide

12. • Lots of bug fixes and performance improvements
    • Some experimental APIs became stable
    (for example, inside animations)
    • Enhancements regarding accessibility
    (for example, increased minimal touch areas)
    • New and changed @Composable functions
    

    View Slide

13. Badge / BadgedBox
    • Badge() contains dynamic information, i. e.
    • presence of a new notification
    • number of pending requests, unread messages, …
    • Can be icon only or contain short text
    • BadgedBox() places the badge relative to
    content like text or an icon
    

    View Slide

14. modifier - optional Modifier
    containerColor - the background color for the badge
    contentColor - the color of label text rendered in the badge
    content - optional content to be rendered inside the badge
    badge - the badge to be displayed - typically a
    Badge
    modifier - optional Modifier
    content - the anchor to which this badge will be
    positioned
    

    View Slide

15. Experimental predecessor (BadgeBox()) in Compose 1.0
    

    View Slide

16. ExposedDropdownMenu /
    ExposedDropdownMenuBox
    • ExposedDropdownMenu() contains the
    dropdown menu content
    • Used inside ExposedDropdownMenuBox()
    

    View Slide

17. expanded - Should the dropdown menu be
    expanded?
    onExpandedChange - Executes when the user
    clicks on the ExposedDropdownMenuBox
    modifier - optional Modifier
    content - The content to be displayed inside
    ExposedDropdownMenuBox
    

    View Slide

18. View Slide

19. expanded - Whether the menu is
    currently open and visible to the user
    onDismissRequest - Called when the
    user wants to dismiss the menu
    modifier - optional Modifier
    content - The content of the
    ExposedDropdownMenu
    onClick - Called when the menu item was clicked
    modifier - optional Modifier
    enabled - When false, the menu item will not be
    clickable and onClick will not be invoked
    contentPadding - the padding applied to the
    content of this menu item
    interactionSource - the
    MutableInteractionSource representing the
    stream of Interactions for this DropdownMenuItem
    

    View Slide

20. NavigationRail /
    NavigationRailItem
    • NavigationRail() is used to move
    between primary app destinations
    • Displays three to seven destinations;
    optionally:
    • FloatingActionButton()
    • logo inside a header
    • NavigationRailItem() represents
    primary destinations
    

    View Slide

21. modifier - optional Modifier
    backgroundColor - The background color for this
    NavigationRail
    contentColor - The preferred content color
    elevation - elevation for this NavigationRail
    header - an optional header that may hold a
    FloatingActionButton or a logo
    content - destinations inside this
    NavigationRail
    selected - whether this item is active
    onClick - invoked when item is selected
    icon - icon for this item
    modifier - optional Modifier
    enabled - when false, this item will not be clickable
    label - optional text label
    alwaysShowLabel - If false, label will only be shown item is selected
    interactionSource - a MutableInteractionSource
    selectedContentColor - color of text and icon when item is selected
    unselectedContentColor - color of text and icon when not selected
    

    View Slide

22. Material3
    Material You
    

    View Slide

23. • Material Design Android‘s design language since 2014
    • Material2 (2018) focussed on customization (it became a design
    system)
    • Material3 (2021) focusses on personalization
    • larger buttons
    • relies even more on animation
    • Supports system provided colour themes
    • Material You implementation of Material3 on Android 12
    

    View Slide

24. View Slide

25. • compose.material3 brings Material You to Compose apps
    • Intentionally, not a drop in replacement
    • Not yet stable
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. Wrap up
    

    View Slide

30. • Compose 1.1 is a minor update with welcome bug fixes, performance
    improvements, and few API changes
    • Should be easy to adopt
    • Material3 brings breaking changes; the API is still experimental
    • With Android 12 gaining momentum, a swift adoption may still be
    advisable
    

    View Slide

31. • Short release cycles of Jetpack components provide flexibility to the
    developer
    • But: when is the right time to switch versions?
    • Both waiting too long and adopt too early may result in considerable
    changes to the app code
    

    View Slide

32. Thank you!
    thomas@thomaskuenneth.eu
    @tkuenneth
    @tkuenneth
    https://thomaskuenneth.eu/
    @tkuenneth
    

    View Slide