feat: Add Material Design 3 (Material You) support

[danielkleebinder]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Recently, the new Material Design 3 (publicly known as Material You) Guidelines were released. They are quite a cut compared to the current Material Design 2, but are now considered the new standard on newer Android devices (Android 12+). Google is also updating all their apps to conform their new specs. Can we expect the Ionic Framework to support the new look and feel for Android devices, and if so, are there already any plans with which release we can expect it? Personally, I think Material You is a great improvement over MD2 and it would be nice if we could ship our apps with this new and awesome design as soon as possible.

Guidelines: https://m3.material.io/

Describe the Use Case

As an Android 12+ user I want all my apps to fit into the new design ecosystem created by Google.

Describe Preferred Solution

I think it would be nice if the Material You Design is an opt-in feature that developers can toggle themselves (for example during start up time dynamically or compiled into the final bundle). An exemplary configuration is listed below:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot({
    mode: 'ios' | 'md' | 'md3'
  }), AppRoutingModule],
  providers: [{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

EDIT: It's been a few years since the creation of this issue and the Angular ecosystem has changed quite a bit. So here is a second exemplary configuration for standalone components:

import { provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    provideIonicAngular({
      mode: 'md3'
    })
  ]
});

Describe Alternatives

Provide some helper tools (for example using the CLI or some web tool) that automatically generates a CSS file based on a given primary color that overrides the default Ionic styles to match with the Material You Design Guidelines. Google themselves already created a tool like this for the web for native Android applications: https://material-foundation.github.io/material-theme-builder/

Related Code

No response

Additional Information

No response

[sean-perkins]

@danielkleebinder thanks for the thorough write up and links to supporting documentation.

In our short term, our big focus internally is releasing Ionic 6 and all the supporting material around it (blog posts, docs, issues, etc.).

Aligning our components to native design standards has always been a continuous goal and Material You will likely fit into a new release of Ionic in the future.

If everyone could upvote this issue (👍 ) to help let us know it's important to you and your app development efforts, that'd be great!

[leonardorafael]

Hello my friends, if you need MATERIAL DESIGN 3 how about https://www.beercss.com?

[miguelcanosantana]

Whilst that's a really nice library, I haven't been able to make it work (maybe because my level). But would be nice to have something more official.

[zac404]

@sean-perkins Are there some news regarding this topic?

[PAT-STU]

Dear Ionic Team, we'd also greatly appreciate a solution like the one mentioned above.

[sean-perkins]

Hello everyone, at this time we still are actively gathering community interest and feedback surrounding MD3. There are a variety of changes the team is investigating and working on to make Ionic Framework's design more customizable.

This feature request is currently our second most upvoted feature request. Please keep upvoting to advocate for this feature.

While this feature will not be included in the v7 release of Ionic Framework. The team will be investigating and digesting the scope of MD3 to determine how to best support it.

Noting valuable resources:

• Official Figma design spec for MD3: https://www.figma.com/community/file/1035203688168086460

[rollingmoai]

Meanwhile, you can check out Framework 7 and Konsta UI which has already implemented Material You:

[xnousnow]

The demo image in the UIs that feel at home wherever they are deployed section on the main page is updated. The ionic ion-tab-bar component itself is not updated though.

[extrordinaire]

The demo image in the `UIs that feel at home wherever they are deployed` section on the main page is updated. The ionic `ion-tab-bar` component itself is not updated though.

I see it as the outdated M2 one though... Checked today, hope Ionic moves towards M3 shortly.

[laurentpayot]

The demo image in the `UIs that feel at home wherever they are deployed` section on the main page is updated. The ionic `ion-tab-bar` component itself is not updated though.

Advertising with MD3 snapshots for something that does only MD2 is illegal in my country... @sean-perkins any news regarding this MD3 advertising?

[sean-perkins]

@laurentpayot when developing Ionic applications you are building with web technologies (HTML, JS, CSS). Ionic components can be styled and swapped out with alternatives to build different experiences (we don't restrict you from combining another UI library with your Ionic apps).

There are community projects that have MD3 tab designs with Ionic Framework today: https://github.com/tanishqmanuja/ng-md3-ionic-playground

Ionic does not include a "graph component" and the screenshot also shows that. The screenshot is just an example of what types of applications developers can build with Ionic and web technologies.

--

Let's keep the discussion for this feature on what developers would like to see from Material Design 3 in Ionic. The team is actively investigating this support. We value community feedback on which components, features and aspects of MD3 are most important to your applications. Thank you!

[danielkleebinder]

@sean-perkins Thank you for your continuous support for this issue! I've personally added Material Design 3 to some of my projects by simply following the specifications and adding global CSS that implements these and overrides existing styles on components such as ion-tab-bar, for example. This is sufficient for most of my use cases for now.

Far more difficult to implement, in my opinion, are the new motion and transition guidelines. Especially morphing animations (as you can observe here) are something I cannot invest time into because of their increased complexity. Even Google themselves are not planning to add motion support for their web implementations. On the other hand, animations like that directly guide the user from application state A to application state B which improves usability; also they simply look great.

Are transitions, animations and motions planned for a potential MD3 implementation in Ionic?

[xnousnow]

I think we can use HTML and CSS's new page motion feature, but I'm not sure about that feature to work with the router.

[jaytonic]

Hi everyone. Is this now considered? Honestly, my team is reluctant to start new app using ionic because it will looks outdated even before we finished it, and I really don't see the point of having every individual trying to adapt ionic to have an up-to-date UI. I mean, material you is not that new, it has not been integrated in ionic 6 and ionic 7, even this is highly upvoted, this doesn't seems to have much love from ionic team :(

[sean-perkins]

@jaytonic can you help improve the feedback by listing out which components your team is looking to use that look outdated and what features you would like to see from Material You? There is a lot to Material You as our team continues to design a document for all the potential component changes and features. The community can help us by voicing which features are the most important to your applications now versus features we may be able to postpone or not do at all.

@danielkleebinder transitions, animations and motions would be supported through a few of the interactions that are demonstrated on their site. Mainly the page-to-page router transitions (push/pop) and the side menu effect. I am unsure about the shared element transitions between page-to-page, as that is a fairly complex implementation detail for a framework to create, that would work for all instances of how a developer's UI may be constructed. Likely in that scenario we would need to investigate if there is an API that could be exposed to enable developers an easier implementation of their own custom experience.

[jaytonic]

@sean-perkins Sure. The most used components that I've seen differences:

• Global The colors and their variations are more subtle. All the "filled" options have using a variation of the main color
• Buttons: now should be more round, shadow is different
• Cards: are more rounded, shadow is different
• Toggle are now quite different(closer to what is done for iOS
• Floating action buttons are now squircle(not sure it's the exact term, but square with rounded borders), without shadows
• Input text have a background colors. They also have a slight border radius
• tabs: They now have an active indicator below
• chips: They are now more squared
• drawer: the drawer overlay has some border radius

No doubts there are other stuff, but those are the one we identified as blocking for our designs.

So basically, a lot of things around border-radius, shadows, shade of colors to be used

[laurentpayot]

Major changes are listed at https://material.io/blog/migrating-material-3

[martinzima]

@sean-perkins Besides the missing features that @jaytonic mentioned, I would also like to add collapsible large titles as something that we miss greatly (also discussed in this closed issue). I feel this is something that can affect the overall looks of an Android app a lot and the current design looks outdated.

[RudraSen2]

Material 3 Example - https://callstack.github.io/react-native-paper/

[RudraSen2]

Any ETA for this?

[johannesvollmer]

We're also depending on this. Especially the color design tokens, and generating the pallete (and modifying the pallette). We mainly use the tab bar, cards, the top app bar, among others.

[danielkleebinder]

@johannesvollmer As for color generation, you can rely on the official material color utilities made by the material foundation:

• GitHub material-foundation/material-color-utilities
• npm @material/material-color-utilities

However, this package is incomplete with regards to some of the surface container colors, shadow tokens and additional custom colors. That's the reason, why I created a repository that adds all missing tokens:

• https://github.com/danielkleebinder/md3-for-ionic

It also overrides some of the Ionic component styles, but this feature is still incomplete. Buttons and navigation bar, however, should work fine.

[johannesvollmer]

Thanks for the hint, we will check it out :)

[xnousnow]

It's been few years since this issue has been opened... Is there any updates here with ionic 7?

[danielkleebinder]

@sean-perkins Regarding shared element transitions, browsers now expose a new API (I suppose Google used its influence here) called the "View Transitions API". You can read on the details here:

• Smooth and simple transitions with the View Transitions API (Chrome for Developers)
• View Transitions API (mdn web docs)
• Animate between states with the View Transitions API (YouTube)

It pretty much looks like it was made for Material Design 3!

[ozgurg]

Is there the source code of the Android screenshot shown in the "Infinitely Customizable" section on https://ionicframework.com/? It's very similar to Material 3.

[xnousnow]

I think they're finally working on it? Also the team should check out https://m3.material.io/develop/web

[omar2205]

I think they're finally working on it? Also the team should check out https://m3.material.io/develop/web

The web version is deployed here https://material-web.dev/

[laurentpayot]

Is there the source code of the Android screenshot shown in the "Infinitely Customizable" section on https://ionicframework.com/? It's very similar to Material 3.

@ozgurg the same comment was made 10 months ago and unfortunately nothing has moved since.

[ozgurg]

Is there the source code of the Android screenshot shown in the "Infinitely Customizable" section on https://ionicframework.com/? It's very similar to Material 3.

@ozgurg the same comment was made 10 months ago and unfortunately nothing has moved since.

Opps, my mistake, but it wouldn't hurt to ask again. :)