Submit News Alternative Tip Form

Google Chrome is Testing a ‘Material Design’ Toolbar

Chrome material design settings page

A full Google Chrome material design makeover on desktop builds is edging closer.

A new flag introduced to the browser’s dev channel release lets you set ‘material design elements in the browser’s top chrome’. This area is more commonly known as the tab strip and toolbar.

‘Google has been slowly introducing material design to Chrome over the past year’

Three “looks” are offered through the experimental setting, letting you theme the browser’s top bar in full ‘material’, ‘hybrid material’ or stick with the default ‘non-material’.

The differences between ‘material’ and ‘hybrid’ are largely, excuse the pun, immaterial.

Google has been slowly introducing material design tweaks to Chrome over the past year, most visibly in the browser’s mobile builds. Chrome OS has also gained a slate of new app icons, a new look file manager and a redesigned login screen.

Earlier this year Chrome OS gained a revamped App Launcher integrating Google Now cards and optional Google Drive file search.

A carded Chrome settings page is currently in gestation and work on a new look for the downloads history page recently got underway.

The Chrome Material Design Top Bar

Chrome top bar: non-material

How the browser top bar looks normally

Screenshot 2015-08-17 at 19.39.56

How the browser top bar looks with the ‘Hybrid Material’ setting

Don’t expect a dramatic change in the Chrome toolbar when the Material Design flag is set to ‘on’.

As of writing the flag subtly affects the following elements

  • Increased padding/size of the toolbar
  • Height of URL box increased
  • Wider spacing between buttons/elements
  • URL font no longer ‘bold’
  • Smaller font size (‘material’ only)
  • New icons for navigation and bookmarks
  • Lack of nav button ‘on press’ effect

The latter change may, based on another flag that has also been arrived in the latest Chrome Dev, be in lieu of animated ‘ink’ ripple effects being hooked up.

With these changes the desktop browser is but a gradient and hamburger icon away from closely resembling Chrome for Android and iOS.

But as the recent backlash against the new Google Chrome bookmark manager showed us: an awful lot of folk can’t stand an awful lot of change too quickly.

Enable Chrome Material Design Top Bar

chrome dev flag screenshot

The top-chrome-md flag is all you need

Want to track Chrome’s burgeoning toolbar redesign for yourself?

Assuming you’re running Chrome Dev on Windows, Linux or Chrome OS you can.

To enable the material design toolbar paste the following link in a new tab:

chrome://flags/#top-chrome-md

Select a preference from the drop-down list (default is ‘non-material’) and, when prompted to, relaunch Chrome to enjoy the subtle changes.

As this is an article about a development feature you should not consider the screenshots or information above as indicative of a final, finished design. Until it rolls out to the stable channel it remains subject to change.

  • W.G.

    Looks like you’re on a slightly older build. It appears like this in Canary:

    • I’m on the Dev Channel so appreciate the screenshot. Are you using ‘material’ or ‘hybrid’? The padding between nav buttons looks greatly reduced in your screenshot. I rather liked it; was finger friendly!

      • W.G.

        ‘Material’

    • Berkay

      Is this on windows?

      • Mason

        I’m on Windows 10, Canary Channel, and unfortunately it’s not appearing. Meh. Maybe in tomorrow’s update.

        • Berkay

          Yeah I tried it too, all it did was shrink the omnibox font and make rediculously big spaces between the buttons.

          • Mason

            Theres also a new loading animation & icon in chrome://chrome.

          • Berkay

            Yeah that was like that for a while now :)

            And a new loading animation for all pages.

            They had a material design icon for the bookmarks, but got rid of it ’cause everyone hated the design they had for it…

            The downloads page is also getting material design.

            And the Youtube player finally got a material overhaul.

            Just one step closer to Chrome getting a full fresh look since it’s release.

      • liamdools

        Looks like Chrome OS to me

  • it’s about time! ?

  • Not available on OSX 10.10.5 and latest Chrome Stable

    • Boothy

      Dev channel feature……………

    • As we mentioned in the post, this flag is currently only available on Chrome Dev for Windows, Linux and Chrome OS :)

  • Now if they could push developers to use a standard color (dark grey) for their extensions icons.

    I’d like to avoid avoid different colors for each of them..

    • We made out Chrome extension icon grey when there are no unread items because we also like consistency. With these md-topbar changes I fear the grey we used is going to be too pale…

  • Mason

    Looks pretty cool. Hopefully we can get full Material like on Android tablets. Unfortunately not on Windows Canary, but I did see a material design icon in chrome://chrome. Also, noticed Joey trying to be slick by just casually sneaking the Material Design Settings flag in the screenshot without mentioning it.

    • Well spotted ;)

      I’ll do a post on md-settings it when it is a bit more… stable.

  • Degru

    Increasing padding and overall size is definitely something I don’t want. I already have only 768 pixels of vertical resolution, and I don’t want it to be taken up by bigger buttons when I use a touchpad or mouse anyways.

    • instinct

      My first thoughts as well. More padding is not a good thing.

      • liamdools

        I’m sure all the people using Chrome on Windows tablets with their fingers agree with you.

        • wirelesscord

          We desktop (mouse & keyboard) users are a dying breed, but devs also never seem to learn that an attempt to combine touch and desktop app in the same UI is a compromise and bad experience for both sides.

          • liamdools

            True, Windows 10 is terrible.

          • SuppliedRelic

            I’m sure that you meant to say Windows 8. Windows 10 is a huge improvement over Windows 8 and couldn’t be more ideal for a final OS version.

          • liamdools

            You kidding? I hope you’re kidding. Windows 10 was a rushed mess full of nothing but design inconsistencies and removed features. The titlebars are hideous, the Start menu goes completely against the Modern design language and is in no way fluent or fun to use (it’s a chore making it look decent, plus it takes like 5 seconds to load, whereas the Start screen, while huge, was fun, customizable, and started instantly.) Cortana’s bloated, the taskbar icons are too small, the Universal design icons are inconsistent and ugly on the taskbar while Windows 8.1 had nice tiles that looked in place, like a minimal icon set from a Linux distro. The new Modern apps are awful and broken, and Internet Explorer 11 no longer works properly (don’t make a joke like “butt itsz nevre w0rked proprely!!! leol zoon rite?” because it’s actually a good browser nowadays) and Edge is nothing short of a featureless alpha build of a browser. They had something in early Tech Preview builds, but they blew it all away with 9926 and it’s all been downhill from there.

          • SuppliedRelic

            Some of the stuff you are saying is true and some isn’t. I’m going to go ahead and point out that I’m part of the WIndows Insider Program and use the Fast build ring. I will address every point you touch on.

            “The titlebars are hideous”
            The title bars released with the official release version were colorless and very unappealing. Insider Preview Build 10525 introduced additional coloring options that will make the title bars more appealing.

            “the Start menu goes completely against the Modern design language and is in no way fluent or fun to use (it’s a chore making it look decent, plus it takes like 5 seconds to load, whereas the Start screen, while huge, was fun, customizable, and started instantly.)”
            The return of the start menu has been praised by most of the Windows community since the first images of it leaked online. I’d love to see some references to how it goes against the “Modern design language”. It brings back the Metro tiles from Windows and places them on a more traditional menu. I’m not sure what kind of hardware you are running but the start menu loads as soon as I click on it.

            “Cortana’s bloated”
            Cortana has been buggy ever since Windows 10 launched. I have friends who say it will launch in the middle of them played a game as it thinks they said “Hello Cortana”. Cortana is definitely one of the buggiest things about Windows 10.

            “the taskbar icons are too small”
            I cannot argue with you at all when it comes to this. It is very hard to make out the icons if you have a gigantic monitor.

            “the Universal design icons are inconsistent and ugly on the taskbar while Windows 8.1 had nice tiles that looked in place, like a minimal icon set from a Linux distro.”
            I can’t argue with the universal application icon designs being inconsistent. The latest Insider Preview (Build 10547) which was released on September the 18th introduced a new Windows Store icon that looks a little 3D.

            “The new Modern apps are awful and broken”
            I’m not sure what to make of that statement. How exactly are the new modern apps awful and broken?

            “Internet Explorer 11 no longer works properly (don’t make a joke like “butt itsz nevre w0rked proprely!!! leol zoon rite?” because it’s actually a good browser nowadays) and Edge is nothing short of a featureless alpha build of a browser.”
            Internet Explorer 11 is broken in Windows 10, you’re not wrong about that. There isn’t any necessity for Microsoft to support Internet Explorer anymore now that they have a replacement. Microsoft Edge is intended to replace Internet Explorer and it is definitely lacking in features right now, but big things are coming in the future, such as extension support.

          • The differences in padding and spacing will seem more obvious this early on because the rest of the UI hasn’t been adjusted to match. As new icons, other elements are tweaked and the padding reduced/tweaked to suit user testing etc, it won’t look as goofy as it does right now.

            An example: Chrome’s menus were made wider, more spacious (so they work better with touch) several months back. Very few people noticed. By the time these changes go live it’ll also be less obvious.

            Remember: this is in active development. It is not finished. If you don’t like how it looks right now the best thing to do is not use it right now :)

  • fcjan

    well it looks like this for me, Chrome Dev x64 on Win 10.. different icons, font, min/max/ext buttons, even the collor.. wtf? also how do you remove that profile button on top right? –disable-new-avatar-menu is not working anymore

    • Mason

      Yeah that’s how it looks on Windows. Also there is no way to remove the profile menu.

      • fcjan

        I found out how to remove it, disable “Enable guest browsing” and “Let anyone add a person to Chrome” in Settings

    • Remember that it’s ‘in development’; it’s not supposed to look fantastic right now.

      Another big set of changes landed in the most recent Chrome OS dev build and will arrive in the next Chrome Dev update. These tweak icons further, change the way the omnibar auto-suggest ‘sheet’ looks, etc. It may address some of the issues with the wrong icons being used in Windows builds.

    • Logan Combs

      Its been there for a while now, but didin’t really have a change, it really dosen’t look like the picture because they are on ChromeOS

      • fcjan

        yeah, didnt’ notice that when I was writing my comment :)

    • Luka Anđelković

      OMG Srbin covece! Filip voli Chrome i materiel

      • fcjan

        Hrvat ali nema veze :)

  • liamdools

    Is it weird I don’t think they should change it further? The better fonts and icons are downright epic, and the gradient in the background somehow completes it more than a solid pale one would. I almost feel like they’ll somehow make it look worse though.

    • Ryan Johnson

      I agree, this looks good enough in my opinion. Just perfect.

      • SuppliedRelic

        I disagree. The desktop versions of Google Chrome are still a long ways away from being given a full Material Design makeover. This is a good start but it is far from being complete.

  • I’m so sick of Material Design. It was fine at first, but with nearly every single Android app adopting it, it’s become monotonous and flat and boring.

    • Well, it is a design standard. Of course a lot of Android apps will be adopting it.

    • liamdools

      Yeah, I remember owning an Android 2.3 Gingerbread phone and drooling over Holo. It just looked so futuristic and cool. Material Design, eh.

    • Karan Shah

      what’s wrong with consistency?

      material design is beautiful.

      • It’s not beautiful. It’s plain. And what’s wrong with consistency is that it’s boring.

        • SuppliedRelic

          You’re kidding, right? Minimalistic design is the modern trend. Google isn’t the only company that is doing this, Microsoft is making great strides in minimalistic design with it’s latest Windows version.

          • wirelesscord

            So, do you like minimalistic design because of the design or because it is a trend?

          • SuppliedRelic

            I like it because I find flat design to be appealing. There is no need for glossy and 3D interfaces when they can be simplistic but beautiful.

          • Sorry. I forgot that anything trendy is automatically good and right and can’t possibly be better in any way.

        • IanHead

          Yeah I hate it when I don’t have to relearn an entire new interface every time I try a new app. Really gets my goat, man.

          • SuppliedRelic

            I couldn’t have put it better myself.

        • aggelalex

          It’s plain because non Google companies make it look plain. See chrome OS. It is simple, yet not plain. “Simple” is not the same with “plain”.

    • aggelalex

      It’s just that Material Design is not followed completely. There’s always a flaw to non-google companies’ material design. Only google has good material design.

      • No. That’s not my problem with it.

        My problem is not the design itself, or whether or not it’s followed exactly. It’s that it’s everywhere. I’d like more variety.

        • aggelalex

          The variety you ask for is not feasible because non-google apps don’t follow MD correctly! Every app should follow it exactly to look unique. However they follow half the instructions (the basic actually) and end up with the same ui with some color changes. If you see the chrome os file manager you will understand what do I mean.

          • I’ve seen ChromeOS. It’s just as boring.

          • aggelalex

            Then, sorry, but looks like you get bored to fast :P

          • aggelalex

            ok

  • chrome://md-settings/#!/advanced

    does not work dude

    • This article isn’t about the md-settings page, but correct: you need to enable the flag first.

  • wirelesscord

    More vertical space wasted. Great.

    • Considering how it’s not yet finished, and still in active development, it may be a little premature to assume that. Plus, since you have to manually opt-in to test this feature, if you do consider it wasted space just opt back out and you’ll get those 4 pixels back :)

      • wirelesscord

        Somehow I doubt those pixels just accidentally appeared, and considering making things bigger (thanks touchscreens) is the trend. And I still remember the last time the url bar was largened… for no other reason than catering to touch use.

        Opt-outing doesn’t help much once this lands in stable. ¯_(ツ)_/¯

        • As I said, this UI change is still under active development. Don’t expect that padding to be the same by the time it lands in stable.

          Google is a design first company and are not going to roll out something so… yakky looking to all users and not care.

          For example, the Chrome app menu was improved for touch many months ago. Originally, in dev, it had excessive padding. This was greatly reduced by the time it landed in stable.

          It’s likely it starts wide and is then adjusted/reduced in increments to test the optimum spacing between items for optimum touch usage.

          • Benjamin Rodriguez

            I really do hope they don’t make it quite as big, i tried it on a 1366×768 screen and it looks awful. I know it’s under active development, but i don’t like the trend of bigger and bigger padding, when you look at the progression of Google Apps on Android itself the information density has plummeted, even on tablets.

  • oneleft1

    Allow me to vent. Google, the web company, has been on a bad trend lately. They are, more and more, ignoring W3C/WCAG guidelines. Accessibility is for inclusion, that means everyone. The Google Store cannot be zoomed on mobile. Google news cannot be zoomed on mobile. Do a search in mobile and images cannot be zoomed. More and more of their sites just fall apart the more you zoom them. What good is an 11.6 Chromebook if when I zoom the top fills half my screen?

    There are also all kinds of little things that don’t work when people like me have it zoomed to a point where we can actually read it. In gmail, the “more” at the bottom? Can’t see it all unless I reduce zoom.

    The Web Content Accessibility Guidelines (WCAG) version 2 Level AA 1.4.4 requires that sites be scalable without assistive technology up to 200%. This means that the mobile browser’s pinch zoom feature must allow for zooming up to 200% without using the assistive technology zoom on the mobile device. There is no zoom on too many of their pages. Pretty bad for a web company.

    I wish they’d just step back and fix this crap before making more changes.

    • While I agree, mind you that these are two separate teams :)

    • ChromeDude

      This is because these sites have app counterparts that are designed to be used on mobile. Also, I agree with Jonathan Alfonso – these are two separate companies, and neither is required to follow the guidelines of the other.

      • oneleft1

        they may be designed for mobile, they still fail W3C/WCAG guidelines. That’s an international standard, not some company guideline. In fact the US is only one of a few remaining where it’s not the law. When the new ADA comes out that will change.

  • I have the latest Dev release, but the icons haven’t changed.

    • As mentioned in the post you need to manually “opt-in” to the experiment by enabling the md-topbar flag.

      • That’s what I already did. Tried on two different machines, still have the old icons.

        • Which OS are you using? I see the new icons on Chrome OS and Linux, but not on Windows (neither dev nor canary).

      • This flag doesn’t even exist for me.

        Windows 10 (64 bit)
        Chrome Version 45.0.2454.93 m (64-bit)

    • Same problem here. Icons are still the same but the omnibar becomes too small and the spacing becomes way too much…

  • Oliver Black

    What they need is to make the tabs angular, at the moment on windows 10 I use edge, because chrome just doesn’t fit.

  • Any idea where the mock-up originates from (is it a user made designed or was it attached to a Chromium issue?)

  • Logan Combs

    This is what it looks like currently in Canary:

  • Jesse Downing

    The flag doesn’t work correctly on high-DPI screens with display scaling.

  • X3Charlie

    I want the tabs to be rectangular, it would look better with both material design and Windows 10. I also hope they add your profile photo to your name and adjust it to fill up the white space beneath your name. On the other hand they shuold remove your profile pic from the icon in the task bar.

    • X3Charlie

      Oh and another thing, larger text for tabs and favorites. With customizable favorite folder icons.

    • Same. Want the style of the tabs to be customisable

  • TheRealSh4d0wm4n

    That looks really nice. Any idea where it comes from?

  • Soindigo

    I have changed, and looked very good, good material design.

  • Enabled it but there is nothing material about it, it’s just thicker, and the extension icons don’t line up

  • Koyaanisqatsi

    cool MD toolbar,clean and minimalistic and takes less vertical space.Font is smaller.And the folders in the bookmark bar are-black.Great.Finally that ultimately ugly yellow ochre is gone.

  • Material design is really cool, It should be encouraged more.

  • Steven

    This is really nice! Thanks for the article :)

  • Zach Reynolds

    For anyone on a chromebook, switch to dev channel for the full experience.