Chrome has rolled out Material 3 (M3) Expressive Design for Android users. It uses visually attractive style elements to improve engagement. At first glance, you may not notice anything big. However, the new design has several practical applications that make your browsing faster and more efficient.

Table of Contents

• Why Material 3 Expressive Stands Out on Chrome for Android
• Rounded Square Tab Groups for Separate Browsing Categories
• Swipe Tabs Using Rounded Progress Indicators
• Pill-Shaped Menu Containers Give Morphing Effects
• Dynamic Color Personalization Based on Wallpaper Themes
• Expressive Animations for Better Website Rendering

Why Material 3 Expressive Stands Out on Chrome for Android

Material 3 Expressive (or just M3 Expressive) is an example of Google’s Material Design language. It has been designed to tackle user fatigue from boring, similar interfaces.

Although instantly popular within the Google ecosystem, M3 Expressive is system-wide only on a few Android models like the Pixel 10, Pixel 6, and WearOS. Most Android manufacturers are slow to adopt as they have their own custom UI such as One UI (Samsung), ColorOS (Oppo), and OxygenOS (OnePlus).

To address this gap, certain Google apps like Chrome for Android now come with M3 Expressive for all Android models, brought through regular updates on your device. This new design has become popular due to:

• Dynamic colors and expressive font styles: this leads to better readability.
• Fluid animations: page loads and tab switches feels less choppy especially for video backgrounds.
• Better touch feedback: emotionally satisfying touches for icons such as bookmarks and tab creation.
• Backward compatibility: if your Android supports Chrome update 141.0 or above, M3 Expressive will work. My Chrome browser on an older Samsung Galaxy version 12.0 supports the latest design.

Also read; have you checked out Apple’s Dynamic Island design?

Rounded Square Tab Groups for Separate Browsing Categories

Color-coded tab groups are a very useful feature in Google Chrome. While present in earlier Chrome versions, they weren’t very appealing. With M3 Expressive, any tabs you want to group are placed in “rounded square” visual containers. They’re marked by bolder colors that make each tab group stand out. This simple visual hack makes it much faster to navigate different browsing categories.

To view these rounded square containers, long-press on your chosen tab, and click Add tab to group. Now, you can either put it in a New tab group, or select an existing color-coded one. For every new tabbed color group, choose a color, and assign it a name. Then click Done to submit.

You can also long-press any tab group to Ungroup, Delete, Rename, or Close it. It’s very easy to find any previously saved tab groups in Grid View.

Swipe Tabs Using Rounded Progress Indicators

With M3 Expressive, Chrome introduced rounded progress indicators in tabs to view videos and media-rich websites. It’s most helpful if your Internet speed is slow. You can see tab download progress on your screen.

To try out this feature, first create a video tab group. For YouTube, I chose red color. While a new video loads, keep an eye on the rounded progress indicators at the bottom of the tab. As you swipe from one tab to the next using those tiny circles, you will feel a soft, gentle bounce rather than a jolt.

Pill-Shaped Menu Containers Give Morphing Effects

In the past, Chrome browser’s menu icons used to be pretty boring. They have been replaced by circular/pill-shaped menu containers that “morph” on tap. It feels extremely satisfying when you touch these pills.

To get a feel of this feature, tap the three-dot menu on any tab, and you can see all the pill-shaped containers. Spot the Bookmarks star, and press it. The icon morphs from circle to rounded square with a quick animation, confirming the save. You can long-press to edit any such prominent icon with a thumb or gesture.

These pill-shaped menu containers are very useful for one-handed navigation on tablets and foldable phones with large surface areas.

Dynamic Color Personalization Based on Wallpaper Themes

A standout feature of M3 Expressive is that it can pull any vibrant, personalized colors from your phone wallpaper. You can thus achieve dynamic color personalization of your tabs which is soothing to the eye.

On your Android, go to Settings -> Wallpapers. Select a bold and dynamic theme. Here I chose a bright red theme. Click Apply to Lock screen and Home screen.

Now relaunch the Chrome browser. You’ll find tab previews, menu accents, and the Chrome Omnibox take on a subtle tint from your chosen wallpaper.

Expressive Animations for Better Website Rendering

With M3 Expressive design, websites will adapt their refresh rates for smoother scrolls. Whether you’re reading a webpage at night or need to view it in dark mode, the impact is hard to miss.

To try this feature, tap the three-dot menu followed by Settings -> Accessibility. Go to Text scaling, and adjust the slider to slightly above 100% (120% would do).

Go back to the tab grid and open any new website. You will find the text rendering bold and smooth. There will be fluid expressive animations between the tabs which reduces eye strain.

There are a few other Material 3 Expressive design features in Chrome on Android that are worth a look.

• Squircle new tab button: while a big plus button for new tabs is standard, Chrome for Android has experimented with a big new Squircle button. The enlarged square icon bounces slightly when you click it.
• Bolder typography in tab switcher: when you switch from one tab to the next using tab switcher, you get variable fonts. These are marked by bolder typography which ensures the tab switch feels smoother.

Did you know Google Chrome for Android can now turn webpages into podcasts? If you’re not a Chrome user, check out how to change your default browser on Android devices.