$30 off During Our Annual Pro Sale. View Details »

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

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

  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)
  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)
  5. Building blocks

  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
  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
  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
  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
  10. • Despite version tags, no notion of API level •

    Hence, no API Difference Report
  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 🤣
  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
  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
  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
  15. Experimental predecessor (BadgeBox()) in Compose 1.0

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

    • Used inside ExposedDropdownMenuBox()
  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
  18. None
  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
  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
  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
  22. Material3 Material You

  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
  24. None
  25. • compose.material3 brings Material You to Compose apps • Intentionally,

    not a drop in replacement • Not yet stable
  26. None
  27. None
  28. None
  29. Wrap up

  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
  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
  32. Thank you! thomas@thomaskuenneth.eu @tkuenneth @tkuenneth https://thomaskuenneth.eu/ @tkuenneth