{"id":4150,"date":"2026-05-26T17:13:06","date_gmt":"2026-05-26T17:13:06","guid":{"rendered":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2026\/05\/26\/give-your-net-maui-android-apps-a-material-3-makeover\/"},"modified":"2026-05-26T17:13:06","modified_gmt":"2026-05-26T17:13:06","slug":"give-your-net-maui-android-apps-a-material-3-makeover","status":"publish","type":"post","link":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2026\/05\/26\/give-your-net-maui-android-apps-a-material-3-makeover\/","title":{"rendered":"Give Your .NET MAUI Android Apps a Material 3 Makeover"},"content":{"rendered":"<p>Starting with .NET MAUI 10, you can opt your Android app into Material 3 (a.k.a. Material You) styling with a single MSBuild property. Material 3 is already live in a large set of controls today, more are on the way in upcoming service releases, and the plan is for it to become the default for Android in a future version.<\/p>\n<p>In this post I\u2019ll walk you through how to enable it, what controls are covered today, and what\u2019s coming next.<\/p>\n<p>If you prefer watching over reading, I\u2019ve got a video walkthrough as well:<\/p>\n\n<h2>What is Material 3 again?<\/h2>\n<p>Material 3 is the latest version of Google\u2019s Material Design system. Compared to Material 2 it brings:<\/p>\n<ul>\n<li>Dynamic color schemes that adapt to user preferences and system themes (the \u201cMaterial You\u201d part)<\/li>\n<li>Refreshed component shapes, elevations, and focus states<\/li>\n<li>More flexible customization through Material\u2019s color tokens<\/li>\n<\/ul>\n<p>Without enabling Material 3, your .NET MAUI Android app continues to use Material 2 styles \u2014 everything still works, but enabling Material 3 brings your controls in line with the latest Android platform conventions.<\/p>\n\n<div class=\"alert alert-primary\">\n<p class=\"alert-divider\"><i class=\"fabric-icon fabric-icon--Info\"><\/i><strong>Note<\/strong><\/p>\n<p>Material 3 in .NET MAUI is Android-only. iOS, Mac Catalyst, and Windows continue to use their native design systems, exactly as they should.<\/p><\/div>\n<h2>Enabling Material 3<\/h2>\n<p>Material 3 support requires .NET MAUI 10 \u2014 you need your project targeting <code>net10.0-android<\/code> (and the other <code>net10.0-*<\/code> TFMs).<\/p>\n<p>Material 3 work has been landing incrementally across service releases: the build property and basic styles shipped in SR3 (10.0.30), CheckBox support in SR4 (10.0.40), and the biggest wave \u2014 Button, Entry, SearchBar, DatePicker, Slider, ProgressBar, ImageButton, Switch, and Shell theming \u2014 all landed in <strong>SR6 (10.0.60)<\/strong>.<\/p>\n<p>For the most complete experience, make sure you are on version <strong>10.0.60<\/strong> or later of the <code>Microsoft.Maui.Controls<\/code> NuGet package.<\/p>\n<p>Once you are on .NET 10, this is the easy part. Open your <code>.csproj<\/code> and add a single property to a <code>&lt;PropertyGroup&gt;<\/code>:<\/p>\n<pre><code class=\"language-xml\">&lt;PropertyGroup&gt;\n  &lt;UseMaterial3&gt;true&lt;\/UseMaterial3&gt;\n&lt;\/PropertyGroup&gt;<\/code><\/pre>\n<p>That\u2019s it. Rebuild your app, deploy it to an Android device or emulator, and the supported controls will start picking up Material 3 styling automatically. No handler customization, no custom renderers, no <code>Resources\/values\/styles.xml<\/code> surgery required.<\/p>\n<p>Material 3 styling only affects the default appearance of controls. Any colors or styles you have explicitly set in your XAML or C# \u2014 like <code>BackgroundColor<\/code>, <code>TextColor<\/code>, or custom handlers \u2014 still take precedence. Your brand stays your brand.<\/p>\n<p>And if you try it and decide it is not for you yet? Just remove the <code>&lt;UseMaterial3&gt;<\/code> property from your <code>.csproj<\/code> (or set it to <code>false<\/code>). The default is <code>false<\/code>, so your app goes right back to Material 2 styling on the next build \u2014 the same look your app has today without any changes.<\/p>\n<p>If you\u2019d like to see the property in context, here is a trimmed <code>.csproj<\/code>:<\/p>\n<pre><code class=\"language-xml\">&lt;Project Sdk=\"Microsoft.NET.Sdk\"&gt;\n\n  &lt;PropertyGroup&gt;\n    &lt;TargetFrameworks&gt;net10.0-android;net10.0-ios;net10.0-maccatalyst&lt;\/TargetFrameworks&gt;\n    &lt;TargetFrameworks Condition=\"$([MSBuild]::IsOSPlatform('windows'))\"&gt;$(TargetFrameworks);net10.0-windows10.0.19041.0&lt;\/TargetFrameworks&gt;\n\n    &lt;OutputType&gt;Exe&lt;\/OutputType&gt;\n    &lt;UseMaui&gt;true&lt;\/UseMaui&gt;\n    &lt;SingleProject&gt;true&lt;\/SingleProject&gt;\n    &lt;ImplicitUsings&gt;enable&lt;\/ImplicitUsings&gt;\n\n    &lt;!-- Enable Material 3 design on Android --&gt;\n    &lt;UseMaterial3&gt;true&lt;\/UseMaterial3&gt;\n  &lt;\/PropertyGroup&gt;\n\n  &lt;ItemGroup&gt;\n    &lt;PackageReference Include=\"Microsoft.Maui.Controls\" Version=\"$(MauiVersion)\" \/&gt;\n  &lt;\/ItemGroup&gt;\n\n&lt;\/Project&gt;<\/code><\/pre>\n<p>If you want to see it on a real, running app instead of just imagining it, there is a <a href=\"https:\/\/learn.microsoft.com\/samples\/dotnet\/maui-samples\/userinterface-material3\/\">Material 3 demo sample<\/a> that puts most of the affected controls on a single page. Clone it, run it on Android, and toggle <code>UseMaterial3<\/code> on and off to see the difference side-by-side.<\/p>\n<h2>What it looks like<\/h2>\n<p>Here is the Material 3 demo sample running on Android in both light and dark themes. You can see the updated styling across <code>SearchBar<\/code>, <code>Entry<\/code>, <code>DatePicker<\/code>, <code>Picker<\/code>, <code>Slider<\/code>, <code>ProgressBar<\/code>, <code>RadioButton<\/code>, <code>CheckBox<\/code>, <code>Switch<\/code>, <code>Button<\/code>, and <code>ImageButton<\/code> \u2014 all from that single <code>UseMaterial3<\/code> property.<\/p>\n<table>\n<thead>\n<tr>\n<th>Material 3 light theme<\/th>\n<th>Material 3 dark theme<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img data-opt-id=1013418394  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2026\/05\/material3-light-theme-scaled.webp\" alt=\"Material 3 demo app on Android in light theme\" \/><\/td>\n<td><img data-opt-id=1075436814  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2026\/05\/material3-dark-theme-scaled.webp\" alt=\"Material 3 demo app on Android in dark theme\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The controls that get the most dramatic visual changes are:<\/p>\n<ul>\n<li><strong>Entry &amp; Editor<\/strong> \u2014 switch from the classic underlined <code>EditText<\/code> to Material 3\u2019s outlined <code>TextInputLayout<\/code> with a floating label<\/li>\n<li><strong>SearchBar<\/strong> \u2014 becomes a proper Material 3 inline text field with a leading search icon and a trailing clear button<\/li>\n<li><strong>DatePicker<\/strong> \u2014 the legacy spinner-style dialog is replaced by Google\u2019s <code>MaterialDatePicker<\/code> full-screen calendar overlay<\/li>\n<li><strong>TimePicker<\/strong> \u2014 uses the Material 3 clock dial dialog with the Material You color scheme<\/li>\n<li><strong>Slider<\/strong> \u2014 gets the new Material You track and thumb design<\/li>\n<li><strong>ProgressBar<\/strong> \u2014 rendered using Material 3\u2019s <code>LinearProgressIndicator<\/code><\/li>\n<li><strong>RadioButton, Picker<\/strong> \u2014 adopt Material 3 color roles and visual feedback automatically<\/li>\n<\/ul>\n<p>For a detailed side-by-side comparison of each control with Material 2 vs Material 3, check out the <a href=\"https:\/\/learn.microsoft.com\/dotnet\/maui\/user-interface\/material-design\">official documentation<\/a>.<\/p>\n<h2>What is not (yet) covered<\/h2>\n<p>The first wave of Material 3 work focused on the controls where the visual delta between Material 2 and 3 was the largest, and where we needed dedicated handler changes to swap in the underlying Material components.<\/p>\n<p>That covers a wide range already \u2014 <code>Entry<\/code>, <code>Editor<\/code>, <code>SearchBar<\/code>, <code>Picker<\/code>, <code>RadioButton<\/code>, <code>TimePicker<\/code>, <code>DatePicker<\/code>, <code>Switch<\/code>, <code>ProgressBar<\/code>, <code>ActivityIndicator<\/code>, <code>Slider<\/code>, <code>Image<\/code>, <code>ImageButton<\/code>, <code>Button<\/code>, <code>CheckBox<\/code>, <code>Label<\/code>, and <code>Shell<\/code> all have Material 3-aware handler code.<\/p>\n<p>Other controls like <code>Stepper<\/code> and <code>CollectionView<\/code> will pick up Material 3 colors via the underlying Android theme when you enable <code>UseMaterial3<\/code>, but they don\u2019t have dedicated Material 3 handler work yet.<\/p>\n<p>For the current queue of follow-up work, including controls and navigation surfaces that still need dedicated updates, follow the <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/33063\">Material 3 tracking issue<\/a>.<\/p>\n<p>There are also a few things that are being tracked separately:<\/p>\n<ul>\n<li><strong>Per-control opt-in.<\/strong> Today <code>UseMaterial3<\/code> is an app-wide switch on Android. There is no per-control or per-page toggle. Follow the <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/33063\">Material 3 tracking issue<\/a> for status.<\/li>\n<li><strong>Dynamic color tokens via .NET MAUI APIs.<\/strong> The system honors Material You dynamic colors at the Android theme level, but there is no .NET MAUI API surface yet for working with Material 3 color roles directly from your XAML or C#. Follow the <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/35594\">template and color-token issue<\/a> for API and template feedback.<\/li>\n<li><strong>Navigation chrome and collection views.<\/strong> Things like <code>NavigationPage<\/code>, <code>TabbedPage<\/code>, <code>FlyoutPage<\/code>, <code>CollectionView<\/code>, and <code>Frame<\/code>\/<code>Border<\/code> are not specifically restyled for Material 3 in this release. Follow the <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/34758\">handler-based Shell work<\/a> and related <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/35289\">Material 3 flyout issue<\/a> for current progress.<\/li>\n<\/ul>\n<p>The active plan is for Material 3 to become the default Android styling after the tracked gaps are resolved. Watch the <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/33063\">Material 3 tracking issue<\/a> and related follow-ups for implementation status and priorities. Which is a great segue into\u2026<\/p>\n<h2>Try it today, and tell us what you find<\/h2>\n<p>This is exactly the kind of feature that benefits from being run against real apps with real screens. The sooner you try it on yours, the sooner we can spot the rough edges that don\u2019t show up in our sample app.<\/p>\n<p>How to evaluate Material 3 today:<\/p>\n<ol>\n<li>Add <code>&lt;UseMaterial3&gt;true&lt;\/UseMaterial3&gt;<\/code> to a branch of your app.<\/li>\n<li>Run through your most-used screens on a few Android API levels (especially Android 12+ where Material You really shines).<\/li>\n<li>If something looks off, please <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/new\/choose\">open an issue on the .NET MAUI repo<\/a>. Screenshots and a small repro are gold.<\/li>\n<\/ol>\n<p>If everything Just Works, that is also great signal! Drop a note on the issue tracker or ping me on socials so we know which scenarios are already in good shape.<\/p>\n\n<div class=\"d-flex justify-content-center\"><a class=\"cta_button_link btn-primary mb-24\" href=\"https:\/\/learn.microsoft.com\/dotnet\/maui\/user-interface\/material-design\" target=\"_blank\">Try Material 3 in your app today<\/a><\/div>\n<h2>Summary<\/h2>\n<p>Material 3 support in .NET MAUI 10 is one of those rare wins where you flip a single property and your Android app immediately looks more at home on the platform.<\/p>\n<p>Today it covers <code>Entry<\/code>, <code>Editor<\/code>, <code>SearchBar<\/code>, <code>RadioButton<\/code>, <code>ProgressBar<\/code>, <code>Slider<\/code>, <code>Picker<\/code>, <code>TimePicker<\/code>, <code>DatePicker<\/code>, <code>CheckBox<\/code>, <code>Switch<\/code>, <code>ImageButton<\/code>, <code>Button<\/code>, and <code>Shell<\/code>, with the rest of the surface picking up Material 3 colors via the Android theme. There is more to come, and your feedback is what shapes where we go next.<\/p>\n<p>Go enable it, file the issues you find, and let\u2019s make .NET MAUI on Android feel as fresh as the platform underneath it.<\/p>\n<h2>References<\/h2>\n<ul>\n<li><a href=\"https:\/\/learn.microsoft.com\/dotnet\/maui\/user-interface\/material-design\">.NET MAUI Material 3 documentation<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/samples\/dotnet\/maui-samples\/userinterface-material3\/\">.NET MAUI Material 3 sample<\/a><\/li>\n<li><a href=\"https:\/\/m3.material.io\/components\">Material Design 3 Components<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/dotnet\/maui\">.NET MAUI on GitHub<\/a><\/li>\n<\/ul>\n<p>The post <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/dotnet-maui-material-3\/\">Give Your .NET MAUI Android Apps a Material 3 Makeover<\/a> appeared first on <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\">.NET Blog<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Starting with .NET MAUI 10, you can opt your Android app into Material 3 (a.k.a. Material You) styling with a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4151,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[],"class_list":["post-4150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet"],"_links":{"self":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/4150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/comments?post=4150"}],"version-history":[{"count":0,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/4150\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media\/4151"}],"wp:attachment":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media?parent=4150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/categories?post=4150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/tags?post=4150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}