Skip to content

[Android] Implemented UseMaterial3 build property and provided basic M3 styles #33074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NirmalKumarYuvaraj wants to merge 4 commits into
base: main
Choose a base branch
from
+233 −1
Open

[Android] Implemented UseMaterial3 build property and provided basic M3 styles #33074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0847763
implemented build property and styles
NirmalKumarYuvaraj Dec 9, 2025
2f0fadd
minor changes
NirmalKumarYuvaraj Dec 9, 2025
7e0e663
more changes
NirmalKumarYuvaraj Dec 9, 2025
b5d2aed
Removed designhelper
NirmalKumarYuvaraj Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...rols/src/Build.Tasks/nuget/buildTransitive/netstandard2.0/Microsoft.Maui.Controls.targets
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,10 @@
Condition="'$(_EnableMauiAspire)' != ''"
Value="$(_EnableMauiAspire)"
Trim="true" />
<RuntimeHostConfigurationOption Include="Microsoft.Maui.RuntimeFeature.IsMaterial3Enabled"
Condition="'$(UseMaterial3)' != ''"
Value="$(UseMaterial3)"
Trim="true" />
</ItemGroup>
</Target>

Expand Down
5 changes: 4 additions & 1 deletion src/Core/src/Platform/Android/MauiMaterialContextThemeWrapper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ namespace Microsoft.Maui.Platform;

internal class MauiMaterialContextThemeWrapper : ContextThemeWrapper
{
public MauiMaterialContextThemeWrapper(Context context) : this(context, Resource.Style.Maui_MainTheme_Base)
public MauiMaterialContextThemeWrapper(Context context)
: this(context, RuntimeFeature.IsMaterial3Enabled
? Resource.Style.Maui_Material3_Theme_Base
: Resource.Style.Maui_MainTheme_Base)
{
}

Expand Down
178 changes: 178 additions & 0 deletions src/Core/src/Platform/Android/Resources/values/colors-material3.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<!-- Material 3 Light Theme Color Tokens -->

<!-- Primary Colors -->
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>

<!-- Secondary Colors -->
<color name="md_theme_light_secondary">#625B71</color>
<color name="md_theme_light_onSecondary">#FFFFFF</color>
<color name="md_theme_light_secondaryContainer">#E8DEF8</color>
<color name="md_theme_light_onSecondaryContainer">#1D192B</color>

<!-- Tertiary Colors -->
<color name="md_theme_light_tertiary">#7D5260</color>
<color name="md_theme_light_onTertiary">#FFFFFF</color>
<color name="md_theme_light_tertiaryContainer">#FFD8E4</color>
<color name="md_theme_light_onTertiaryContainer">#31111D</color>

<!-- Error Colors -->
<color name="md_theme_light_error">#BA1A1A</color>
<color name="md_theme_light_errorContainer">#FFDAD6</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_onErrorContainer">#410002</color>

<!-- Background Colors -->
<color name="md_theme_light_background">#FFFBFE</color>
<color name="md_theme_light_onBackground">#1C1B1F</color>

<!-- Surface Colors -->
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_light_onSurfaceVariant">#49454F</color>

<!-- Surface Container Colors -->
<color name="md_theme_light_surfaceContainer">#F3EDF7</color>
<color name="md_theme_light_surfaceContainerHigh">#ECE6F0</color>
<color name="md_theme_light_surfaceContainerHighest">#E6E0E9</color>
<color name="md_theme_light_surfaceContainerLow">#F7F2FA</color>
<color name="md_theme_light_surfaceContainerLowest">#FFFFFF</color>
<color name="md_theme_light_surfaceBright">#FFFBFE</color>
<color name="md_theme_light_surfaceDim">#DDD8E1</color>

<!-- Outline Colors -->
<color name="md_theme_light_outline">#79747E</color>
<color name="md_theme_light_outlineVariant">#CAC4D0</color>

<!-- Inverse Colors -->
<color name="md_theme_light_inverseSurface">#313033</color>
<color name="md_theme_light_inverseOnSurface">#F4EFF4</color>
<color name="md_theme_light_inversePrimary">#D0BCFF</color>

<!-- Surface Tint -->
<color name="md_theme_light_surfaceTint">#6750A4</color>
<color name="md_theme_light_scrim">#000000</color>

<!-- Additional Material 3 semantic colors -->
<color name="md_theme_light_shadow">#000000</color>

<!-- State overlay colors for interactive elements -->
<color name="md_theme_light_primary_8">#1A6750A4</color>
<color name="md_theme_light_primary_12">#1F6750A4</color>
<color name="md_theme_light_primary_16">#296750A4</color>

<color name="md_theme_light_on_surface_8">#141C1B1F</color>
<color name="md_theme_light_on_surface_12">#1F1C1B1F</color>
<color name="md_theme_light_on_surface_16">#291C1B1F</color>

<!-- Material 3 fixed colors (do not change based on user wallpaper) -->
<color name="md_theme_light_primaryFixed">#EADDFF</color>
<color name="md_theme_light_onPrimaryFixed">#21005D</color>
<color name="md_theme_light_primaryFixedDim">#D0BCFF</color>
<color name="md_theme_light_onPrimaryFixedVariant">#4F378B</color>

<color name="md_theme_light_secondaryFixed">#E8DEF8</color>
<color name="md_theme_light_onSecondaryFixed">#1D192B</color>
<color name="md_theme_light_secondaryFixedDim">#CCC2DC</color>
<color name="md_theme_light_onSecondaryFixedVariant">#4A4458</color>

<color name="md_theme_light_tertiaryFixed">#FFD8E4</color>
<color name="md_theme_light_onTertiaryFixed">#31111D</color>
<color name="md_theme_light_tertiaryFixedDim">#EFB8C8</color>
<color name="md_theme_light_onTertiaryFixedVariant">#633B48</color>

<!-- Material 3 Dark Theme Color Tokens -->

<!-- Primary Colors -->
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#371E73</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>

<!-- Secondary Colors -->
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSecondaryContainer">#E8DEF8</color>

<!-- Tertiary Colors -->
<color name="md_theme_dark_tertiary">#EFB8C8</color>
<color name="md_theme_dark_onTertiary">#492532</color>
<color name="md_theme_dark_tertiaryContainer">#633B48</color>
<color name="md_theme_dark_onTertiaryContainer">#FFD8E4</color>

<!-- Error Colors -->
<color name="md_theme_dark_error">#FFB4AB</color>
<color name="md_theme_dark_errorContainer">#93000A</color>
<color name="md_theme_dark_onError">#690005</color>
<color name="md_theme_dark_onErrorContainer">#FFDAD6</color>

<!-- Background Colors -->
<color name="md_theme_dark_background">#10090D</color>
<color name="md_theme_dark_onBackground">#E6E1E5</color>

<!-- Surface Colors -->
<color name="md_theme_dark_surface">#10090D</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
<color name="md_theme_dark_onSurfaceVariant">#CAC4D0</color>

<!-- Surface Container Colors -->
<color name="md_theme_dark_surfaceContainer">#211F26</color>
<color name="md_theme_dark_surfaceContainerHigh">#2B2930</color>
<color name="md_theme_dark_surfaceContainerHighest">#36343B</color>
<color name="md_theme_dark_surfaceContainerLow">#1D1B20</color>
<color name="md_theme_dark_surfaceContainerLowest">#0B0F14</color>
<color name="md_theme_dark_surfaceBright">#3B383E</color>
<color name="md_theme_dark_surfaceDim">#141218</color>

<!-- Outline Colors -->
<color name="md_theme_dark_outline">#938F99</color>
<color name="md_theme_dark_outlineVariant">#49454F</color>

<!-- Inverse Colors -->
<color name="md_theme_dark_inverseSurface">#E6E1E5</color>
<color name="md_theme_dark_inverseOnSurface">#322F35</color>
<color name="md_theme_dark_inversePrimary">#6750A4</color>

<!-- Surface Tint -->
<color name="md_theme_dark_surfaceTint">#D0BCFF</color>
<color name="md_theme_dark_scrim">#000000</color>

<!-- Additional Material 3 semantic colors -->
<color name="md_theme_dark_shadow">#000000</color>

<!-- State overlay colors for interactive elements -->
<color name="md_theme_dark_primary_8">#1AD0BCFF</color>
<color name="md_theme_dark_primary_12">#1FD0BCFF</color>
<color name="md_theme_dark_primary_16">#29D0BCFF</color>

<color name="md_theme_dark_on_surface_8">#14E6E1E5</color>
<color name="md_theme_dark_on_surface_12">#1FE6E1E5</color>
<color name="md_theme_dark_on_surface_16">#29E6E1E5</color>

<!-- Material 3 fixed colors (do not change based on user wallpaper) -->
<color name="md_theme_dark_primaryFixed">#EADDFF</color>
<color name="md_theme_dark_onPrimaryFixed">#21005D</color>
<color name="md_theme_dark_primaryFixedDim">#D0BCFF</color>
<color name="md_theme_dark_onPrimaryFixedVariant">#4F378B</color>

<color name="md_theme_dark_secondaryFixed">#E8DEF8</color>
<color name="md_theme_dark_onSecondaryFixed">#1D192B</color>
<color name="md_theme_dark_secondaryFixedDim">#CCC2DC</color>
<color name="md_theme_dark_onSecondaryFixedVariant">#4A4458</color>

<color name="md_theme_dark_tertiaryFixed">#FFD8E4</color>
<color name="md_theme_dark_onTertiaryFixed">#31111D</color>
<color name="md_theme_dark_tertiaryFixedDim">#EFB8C8</color>
<color name="md_theme_dark_onTertiaryFixedVariant">#633B48</color>

<!-- Compatibility colors for legacy MAUI components -->
<color name="maui_material3_splash_color">@color/md_theme_light_surface</color>
<color name="maui_material3_splash_color_dark">@color/md_theme_dark_surface</color>
</resources>
38 changes: 38 additions & 0 deletions src/Core/src/Platform/Android/Resources/values/styles-material3.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<!-- Material 3 Base Theme (Automatically switches between light/dark) -->
<style name="Maui.Material3.Theme.Base" parent="Theme.Material3.DayNight">
<!-- For .NET 9 we optout of edge to edge enforcement by default -->
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment "optout" should be "opt out" (two words). This matches the correct spelling used in the original Material 2 styles file (styles.xml line 6).

Suggested change
<!-- For .NET 9 we optout of edge to edge enforcement by default -->
<!-- For .NET 9 we opt out of edge to edge enforcement by default -->

Copilot uses AI. Check for mistakes.
<item name="maui_edgetoedge_optout">true</item>
<item name="maui_splash">false</item>
</style>


<!-- Material 3 No Action Bar Theme -->
<style name="Maui.Material3.Theme.NoActionBar" parent="Maui.Material3.Theme.Base">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionModeBackground">?attr/colorSurface</item>
<item name="android:actionModeStyle">@style/Material3ActionMode</item>
</style>

<!-- Material 3 Action Mode -->
<style name="Material3ActionMode">
<item name="android:background">?attr/colorSurface</item>
<item name="android:height">?attr/actionBarSize</item>
</style>

<!-- Material 3 Splash Theme -->
<style name="Maui.Material3.SplashTheme" parent="Maui.Material3.Theme.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/md_theme_light_surface</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/maui_splash</item>
</style>

</resources>
9 changes: 9 additions & 0 deletions src/Core/src/RuntimeFeature.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ static class RuntimeFeature
const bool EnableDiagnosticsByDefault = false;
const bool IsMeterSupportedByDefault = true;
const bool EnableAspireByDefault = true;
const bool IsMaterial3EnabledByDefault = false;

#pragma warning disable IL4000 // Return value does not match FeatureGuardAttribute 'System.Diagnostics.CodeAnalysis.RequiresUnreferencedCodeAttribute'.
#if NET9_0_OR_GREATER
Expand Down Expand Up @@ -147,6 +148,14 @@ internal set
? isEnabled
: EnableAspireByDefault;

#if NET10_0_OR_GREATER
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The FeatureSwitchDefinition attribute should use NET9_0_OR_GREATER for consistency with other feature switches in this file. All other feature switches in RuntimeFeature.cs use NET9_0_OR_GREATER, not NET10_0_OR_GREATER.

For example, see lines 42-44, 51-53, 60-62, 69-71, 77-79, 85-89, and 95-97 which all use #if NET9_0_OR_GREATER.

Suggested change
#if NET10_0_OR_GREATER
#if NET9_0_OR_GREATER

Copilot uses AI. Check for mistakes.
[FeatureSwitchDefinition($"{FeatureSwitchPrefix}.{nameof(IsMaterial3Enabled)}")]
#endif
public static bool IsMaterial3Enabled =>
AppContext.TryGetSwitch($"{FeatureSwitchPrefix}.{nameof(IsMaterial3Enabled)}", out bool isEnabled)
? isEnabled
: IsMaterial3EnabledByDefault;

#pragma warning restore IL4000
}
}
Loading