Floating Toolbars and the Future of App Navigation in Material 3 Expressive

Overview of Material 3 Expressive Toolbars

With the introduction of Material 3 Expressive (M3E), Google is revamping app interfaces with new toolbar components designed to enhance usability and provide a more immersive experience. The primary focus is on placing controls at the bottom of the screen, which can be particularly useful for touch-friendly interactions.

Types of Toolbars

• Docked Toolbar: Spans the full width of the window and is ideal for global actions that remain consistent across multiple pages. It replaces the deprecated bottom app bar used in apps like Google Tasks.
• Floating Toolbar: Floats above the body content, suitable for contextual actions specific to the current page or content. It can be paired with a floating action button (FAB) and is useful for navigation between related pages or as tabs.

Design Flexibility

• Placement: Floating toolbars can be placed vertically on larger screens, enhancing adaptability across different devices.
• Color Schemes: Two color configurations are available—Standard (low-emphasis) and Vibrant (high-emphasis), each serving to focus attention or draw it to the controls as needed.

Best Practices

• Combining Components: Google recommends not pairing a toolbar with a navigation bar. Instead, use the navigation bar on primary pages and toolbars on subsequent pages with actions.
• Future Developments: While M3E currently does not include a floating navigation/bottom bar, such components are still present in apps like Google Chat, suggesting they might be introduced in future updates.

Use Cases

• Google Photos: The albums view will use a floating toolbar for share, add, and edit functions, creating a more fullscreen experience.
• Fitbit: Utilizes floating toolbars as tabs to switch between different time periods (Day, Week, Month, Year).

These updates aim to streamline user interactions and provide a more coherent design language across Google's ecosystem.