Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Moving on - what's new in Compose 1.1

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/

Thomas Künneth

February 16, 2022
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

Transcript

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

    View Slide

  2. [email protected]
    @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!
    [email protected]
    @tkuenneth
    @tkuenneth
    https://thomaskuenneth.eu/
    @tkuenneth

    View Slide