Upgrade Material Design to Material 3

[ziomek64]

Description

As It says in the title. Old Material Design looks outdated. The new Material Design came in 2021 in Android 12. We're in 2023 and Android 14 is coming soon. All Google Apps have been replaced with new Material Design, so users are definitely getting used to it. I don't think it's hard to replace those but it needs a lot of time but it's gotta be implemented in the next two years otherwise we're gonna be using 10 year old design.

Some people started doing third party libraries - https://github.com/mdc-maui/mdc-maui by yiszza
They look really good, but these are just controls. It cannot replace Shell navbar etc. Probably forces could be joined with this author and make it to Maui.

New native apps usually use the new design which looks absolutely phenomenal. Especially stuff like navbar for tabbar -

Flyout -

Cool searchbar

Tabs

New controls

Even simple stuff as buttons have much better looking and customized look

Some page showing many new controls at once -

Public API Changes

.

Intended Use-Case

Better look of the app for everyone

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[jsuarezruiz]

cc @davidortinau

[ziomek64]

Any response instead of automatic vague bot reply? What do you think about it, is it possible at all in the future? @jsuarezruiz

[kannanrs]

Hi...

Will .net8 preview with support for Material 1.9.0 render material design... please

[kannanrs]

.net8 preview and 1.9,0 show all the material components... and how to use them in our projects please...
any pointers if it is ready for us to use in our projects...

Regards

[Dan-Banfield]

Would also love to see this happen!

[gkarabin]

For what it’s worth, it would be nice if this could be implemented as an option, rather than a requirement. A radical change to an existing app UI has all kinds of consequences (changed user doc screenshots, marketing collateral, etc) beyond development effort. For my apps and my customers apps built on my SDK, I’d prefer gradual updates.

[kannanrs]

if this could be implemented as an option...

yes... that will be liked by many.... me included... cause I have an app in the market for testing...

Regards

[ozanyasindogan]

yes, this is really missing, forcing us to use bulked third parties, why this feature is not priority?

[d2dyno1]

Any hopes we can get it in .NET 9?

[Natriss]

if this could be implemented as an option...

100% agree with this.
When creating a new project they just could add a combobox with the options MD2 and MD3.
Or something how Uno does it when creating a new project.

[evgenyvalavin]

++ AlertDialog (e.g. usage via Page.DisplayAlert(...)) needs an upgrade to MaterialAlertDialog

[softlion]

Someone could switch Theme.MaterialComponents.DayNight to Theme.Material3.DayNight in https://github.com/dotnet/maui/blob/main/src/Core/src/Platform/Android/Resources/values/styles.xml ?

[softlion]

I found a way to force material3 on net9 rc

Copy the content of https://github.com/dotnet/maui/blob/main/src/Core/src/Platform/Android/Resources/values/styles.xml into a file named baseStyle.xml :

In that file, rename Maui. to My. I pasted the file below.

Then in your style.xml file, use My.SplashTheme as your base theme:

<style name="MyTheme" parent="My.SplashTheme">

and verify that it is applied to your MainActivity.cs:

[Activity(Theme = "@style/WzTheme", ...

Run, Enjoy !

baseStyle.xml :

<?xml version="1.0" encoding="utf-8" ?>
<resources>
	<!--https://github.com/dotnet/maui/blob/main/src/Core/src/Platform/Android/Resources/values/styles.xml-->

	<!-- Base application theme. -->
	<style name="My.MainTheme.Base" parent="Theme.Material3.DayNight">
		<!-- For .NET 9 we optout of edge to edge enforcement by default
		NOT AVAILABLE IN NET9 RC2 !
		-->
		<!--<item name="maui_edgetoedge_optout">true</item>-->
		<item name="maui_splash">false</item>
		<item name="colorPrimary">@color/colorPrimary</item>
		<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
		<item name="colorAccent">@color/colorAccent</item>
		<item name="android:actionMenuTextColor">@color/colorActionMenuTextColor</item>
		<item name="appBarLayoutStyle">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
		<item name="bottomNavigationViewStyle">@style/Widget.Design.BottomNavigationView</item>
		<item name="materialButtonStyle">@style/MauiMaterialButton</item>
		<item name="checkboxStyle">@style/MauiCheckBox</item>
		<item name="android:textAllCaps">false</item>
		<item name="alertDialogTheme">@style/MauiAlertDialogTheme</item>
	</style>
	<style name="My.MainTheme" parent="My.MainTheme.Base">
		<!-- v35+ uses this to inject edge to edge opt out attribute value -->
	</style>
	<style name="My.MainTheme.NoActionBar" parent="My.MainTheme">
		<item name="windowActionBar">false</item>
		<item name="windowNoTitle">true</item>
		<item name="windowActionModeOverlay">true</item>
		<item name="android:actionModeBackground">?attr/colorPrimary</item>
		<item name="android:actionModeStyle">@style/ActionMode</item>
	</style>

	<style name="ActionMode">
		<item name="android:background">?attr/colorPrimary</item>
		<item name="android:height">?attr/actionBarSize</item>
	</style>

	<!-- Splash theme -->
	<style name="My.SplashTheme" parent="My.MainTheme.NoActionBar">
		<item name="maui_splash">true</item>
		<item name="android:windowBackground">@drawable/maui_splash</item>
		<!--
          Android 12+ specific settings
          See: https://developer.android.com/guide/topics/ui/splash-screen#set-theme
        -->
		<item name="android:windowSplashScreenBackground">@color/maui_splash_color</item>
		<item name="android:windowSplashScreenAnimatedIcon">@drawable/maui_splash</item>
	</style>
	
</resources>

[Dan-Banfield]

I found a way to force material3 on net9 rc

Copy the content of https://github.com/dotnet/maui/blob/main/src/Core/src/Platform/Android/Resources/values/styles.xml into a file named baseStyle.xml :

In that file, rename Maui. to My. I pasted the file below.

Then in your style.xml file, use My.SplashTheme as your base theme:

<style name="MyTheme" parent="My.SplashTheme"> and verify that it is applied to your MainActivity.cs: [Activity(Theme = "@style/WzTheme", ... Run, Enjoy ! baseStyle.xml : <style name="My.MainTheme.Base" parent="Theme.Material3.DayNight"> false @color/colorPrimary @color/colorPrimaryDark @color/colorAccent @color/colorActionMenuTextColor @style/ThemeOverlay.AppCompat.Dark.ActionBar @style/Widget.Design.BottomNavigationView @style/MauiMaterialButton @style/MauiCheckBox false @style/MauiAlertDialogTheme </style> <style name="My.MainTheme" parent="My.MainTheme.Base"> </style> <style name="My.MainTheme.NoActionBar" parent="My.MainTheme"> false true true ?attr/colorPrimary @style/ActionMode </style> <style name="ActionMode"> ?attr/colorPrimary ?attr/actionBarSize </style> <style name="My.SplashTheme" parent="My.MainTheme.NoActionBar"> true @drawable/maui_splash @color/maui_splash_color @drawable/maui_splash </style>

Can you show us what this looks like? Thank you.