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

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

• 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)

• 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)

Building blocks

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

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

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

• 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

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

• 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 🤣

• 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

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

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

Experimental predecessor (BadgeBox()) in Compose 1.0

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

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

No content

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

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

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

Material3 Material You

• 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

No content

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

No content

No content

No content

Wrap up

• 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

• 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

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