May 10, 2023

Material Design 3 for Compose gets new components and features

Exploring the 1.1 release of Material Design 3 for Compose

Posted by


The 1.1 release of Compose Material 3 is here, bringing new components, improved APIs, and many other updates and enhancements you’ve been asking us for. Material Design 3 is the next evolution of Material Design, enabling you to build expressive, spirited, and personal apps. Start using Material Design 3 in your production apps today!

Note: The terms "Material Design 3", "Material 3", and "M3" are used interchangeably.

link
Copy link Link copied

New components

With the 1.1 release, Material 3 Compose provides all types of components needed to make your production-ready apps, with additions like bottom sheet, date and time pickers, and many others. Let’s dive into some of these additions.

Bottom sheets

There are two variations of bottom sheet available: standard and modal bottom sheet.

The standard bottom sheet is great for use cases where you need to interact with both the bottom sheet and main UI region. You can use the standard bottom sheet with BottomSheetScaffold by providing sheet UI in the sheetContent parameter. You can also provide an optional drag handle to easily interact with the sheet.

Standard bottom sheet

The modal bottom sheet overlays the main UI and can be dismissed when users interact outside of the sheet region, similar to a dialog. It provides clear separation from the main UI, making it easy for users to focus on the sheet content.

Modal bottom sheet

You can use the modal bottom sheet as a standalone component and invoke it using ModalBottomSheetState. The component also provides onDismissRequest function to be invoked on dismiss.

Date pickers

The 1.1 release also brings brand new date selection components: DatePicker() and DateRangePicker().

Both the date picker and date range picker support date input mode by updating the initalDisplayMode parameter to input type, which sets the initial display mode to input type. The user can switch back to default selection mode by toggle.

Left: Date picker in input mode, Middle: Date picker in display mode, Right: Date range picker

Compose Material 3 also provides a DatePickerDialog() composable to show a date picker in  a dialog, with the option to confirm or dismiss it.

Date picker dialog switching between picker and input display mode

Time pickers

Compose Material 3 also includes new time picker components for choosing the desired time.

There are two versions available: one with a horizontal layout in which users enter the time using the keyboard, and another with a vertical layout in which users can also use a slide dial to select the time.

Left: Time picker in vertical layout, Right: Time picker in horizontal layout

Compose provides a single TimePicker composable function, where you can define the layoutType parameter to choose between a horizontal or vertical layout.

Search bars

The 1.1 release brings new search bar components, which provide users the ability to search queries and display dynamic search results.

Search bar and search result view

Material 3 provides two options, search bar and docked search bar, to give you the flexibility to choose the right fit for your product.

When active, the search bar expands into a search view that displays dynamic results. The active search bar takes up all available space to display the results, and can also expand to full screen.

The docked search bar is great for medium to large devices where the search view doesn’t need to take up all the screen space and results can be shown in a docked view.

Docked search bar and search view on a tablet

The implementation of the docked search bar is similar to the search bar to keep both the components consistent.

Tooltips

Tooltips are another new addition to the latest 1.1 release. Tooltips are informative text labels that provide additional context to a button or other UI element.

Material 3 provides two types of tooltips: plain tooltip and rich tooltip.

Plain tooltips briefly describe a UI element. Plain tooltips are great for labeling UI elements with no text, like icon-only and field elements.

Plain tooltip on an icon button

You can use the PlainTooltipBox() composable to add a plain tooltip. To apply the tooltip to any component, wrap the component with the tooltip composable and add Modifier.tooltipAnchor() to the component’s modifier.

Rich tooltips are great for longer texts like definitions or explanations. Rich tooltips provide additional context to a UI element and can include a button or hyperlink.

Rich tooltip with description and text button as action

You can have either persistent or non-persistent rich tooltips by providing the isPersistent parameter to RichTooltipState(). To dismiss persistent tooltips, you need to tap outside the tooltip area or invoke the dismiss action on tooltip state.

Non-persistent tooltips will be dismissed automatically after a short duration.

To add rich tooltips, you can use the RichTooltipBox() composable and modify tooltip state to control the visibility of the tooltip.

link
Copy link Link copied

Stable components

With the 1.1 release, many key components have graduated from the experimental stage and are ready for production apps.

Components like Scaffold, Surface, Navigation drawers, and many others are building blocks of your apps, and you can now be assured that they will not have any major breaking changes.

Navigation rail and Navigation drawer

When updating to the latest release, you can remove the @OptIn(ExperimentalMaterial3Api::class) annotation from the stable components.

link
Copy link Link copied

Motion and animations

Material 3 components in Compose come with built-in motion and animations to provide interactive and expressive experiences to users.

Components also provide behavior control to give you flexibility in choosing the animation you need for your product.

Top app bar motion and animation

For top app bars, you can choose between pinned scroll behavior or enter always scroll behavior.

In pinned scroll behavior, the top app bar is always pinned at the top, but changes its container color when content is scrolled.

Top app bar with pinned scroll behavior

To add the behavior to the app bar, define a scroll behavior TopAppBarDefaults.pinnedScrollBehavior() that links to the scaffold’s Modifier.nestedScroll() to listen to the scrolling changes.

In the enter always scroll behavior, the top app bar disappears when the user scrolls through the content, and shows up again when the user scrolls down.

Top app bar with enter-always scroll behavior.

To achieve the enter always behavior, define a scroll behavior TopAppBarDefaults.enterAlwaysScrollBehavior() that links to the scaffold’s Modifier.nestedScroll() to listen to the scrolling changes.

Material 3 provides all these animations as part of the components, with easy ways to customize them for your project.

link
Copy link Link copied

Resources

With the latest 1.1 release, Compose Material 3 is ready for production apps. Check out the resources below for more information: