[Android] Implemented material3 support for Button

[Dhivya-SF4094]

Note

Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!

Description of Change

This pull request adds support for Material 3 styling for the Button control on Android in .NET MAUI. It introduces runtime feature toggling for Material 3, configures the necessary Android resources and theming infrastructure, and applies Material 3 styling to Button controls.

Material 3 Button support and theming:

• Added MauiMaterialButton style, which extends Widget.Material3.Button and applies Material 3 design to MAUI buttons. This style removes Android Material 3 default constraints (minWidth, minHeight, padding, insets) to allow full MAUI control over button sizing and layout, and sets iconSize to 0dp for proper icon sizing.[1]

• Integrated MauiMaterialButton into Material 3 base theme by setting materialButtonStyle attribute to reference the custom button style, ensuring all buttons automatically receive Material 3 styling when the feature is enabled. [1]

Fixes #33172

Screenshots

Material Design Spec - Button

Material 2	Material 3

[Dhivya-SF4094]

Actual Change for Button

[Copilot]

Pull request overview

This PR implements Material 3 design system support for Button controls on Android in .NET MAUI. It introduces a runtime feature flag to toggle between Material 2 and Material 3 styling, with Material 2 remaining the default. The implementation includes comprehensive Material 3 color palettes, custom button styling that removes Android's default constraints to maintain MAUI's layout control, and integration with the MSBuild system for configuration.

Key Changes:

• Added IsMaterial3Enabled runtime feature flag (defaults to false) with MSBuild property support via UseMaterial3
• Created Material 3 theme resources including complete light/dark color tokens and button styles
• Modified theme wrapper and corner radius logic to conditionally apply Material 3 styling

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
RuntimeFeature.cs	Adds IsMaterial3Enabled feature flag with app context switch support
styles-material3.xml	Defines Material 3 themes and custom MauiMaterialButton style with zero padding/insets
colors-material3.xml	Adds comprehensive Material 3 color token palettes for light and dark themes
MauiRippleDrawableExtensions.cs	Updates corner radius defaults to use Material 3 value (20dp) when feature is enabled
MauiMaterialContextThemeWrapper.cs	Selects Material 3 or Material 2 base theme based on feature flag
Microsoft.Maui.Controls.targets	Configures runtime host option to read UseMaterial3 MSBuild property

[Copilot]

Corrected spelling of 'btween' to 'between'.

Suggested change

	<!-- insets are the amount of space btween the actual color and the edge of the view frame -->
	<!-- insets are the amount of space between the actual color and the edge of the view frame -->

[StephaneDelcroix]

✅ Approved

This PR correctly implements Material 3 support for the Button control on Android.

Validation Performed

• ✅ Tested on Android emulator with UseMaterial3=true
• ✅ All button variants display with Material 3 styling (20dp rounded corners, M3 color scheme)
• ✅ Buttons are fully functional and clickable
• ✅ Code review completed - follows existing patterns

Code Review Summary

• Feature flag: Correctly follows RuntimeFeature pattern with IsMaterial3Enabled
• Non-breaking: Opt-in with default false - existing apps unaffected
• Material 3 spec compliant: 20dp corner radius matches M3 "full" shape spec
• Theme architecture: Clean conditional theme selection in MauiMaterialContextThemeWrapper

Minor Suggestions (Non-blocking)

1. Consider using NET9_0_OR_GREATER instead of NET10_0_OR_GREATER for the FeatureSwitchDefinition attribute (for consistency with other feature flags)
2. Add trailing newline to styles-material3.xml
3. Document the UseMaterial3 MSBuild property

Great foundational work for Material 3 support in MAUI! 🎉

[sheiksyedm]

/azp run maui-pr-uitests

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[rmarinho]

🤖 AI Summary

📊 Expand Full Review

---

🔍 Pre-Flight — Context & Validation

---

📝 Review Session — Removed Color-material3 · e649867

---

Issue: #33172 - Implement Material3 support for Button
Platforms Affected: Android only
Files Changed: 2 implementation files, 0 test files

Issue Summary

When the UseMaterial3 MSBuild property is enabled, the Button control should adopt Material 3 visual design. The current implementation does not reflect Material 3 behavior, including updated colors, shapes, elevation, and state behaviors.

PR Implementation Approach

• Added MauiMaterialButton style extending Widget.Material3.Button with Material 3 design
• Removed Android Material 3 default constraints (minWidth, minHeight, padding, insets) to allow full MAUI control
• Set iconSize to 0dp for proper icon sizing
• Integrated into Material 3 base theme via materialButtonStyle attribute
• Added conditional corner radius logic: 20dp for Material 3, 4dp for Material 2

Files Changed

Implementation files:

1. src/Core/src/Platform/Android/MauiRippleDrawableExtensions.cs (+11, -3) — conditional corner radius logic
2. src/Core/src/Platform/Android/Resources/values/styles-material3.xml (+19, -0) — Material 3 button style definition

Test files: None

PR Review Context

• Author: Dhivya-SF4094 (Syncfusion partner)
• Prior review by StephaneDelcroix: Approved (DISMISSED) — minor suggestions around NET9_0_OR_GREATER consistency, trailing newline
• Copilot review typo suggestion (btween → between): Outdated — already fixed in current HEAD

Reviewer Disagreements

File:Line	Reviewer Says	Status
styles-material3.xml	Add trailing newline	✅ Fixed in current HEAD
styles-material3.xml	Fix typo "btween" → "between"	✅ Fixed in current HEAD (review outdated)

Fix Candidates

#	Source	Approach	Test Result	Files Changed	Notes
PR	PR #33173	Material 3 button styling with runtime feature flag + conditional corner radius	⏳ PENDING (Gate)	2 files	Original PR

---

🚦 Gate — Test Verification

---

📝 Review Session — Removed Color-material3 · e649867

---

Result: ❌ CANNOT RUN - NO TESTS EXIST
Platform: android (specified)
Mode: N/A

Issue

This PR implements Material 3 styling for Button controls on Android but does not include any automated tests. Without tests, the Gate phase cannot verify that:

1. The Material 3 styling is correctly applied when UseMaterial3=true
2. The default Material 2 behavior is preserved when UseMaterial3=false
3. Corner radius changes correctly between Material 2 (4dp) and Material 3 (20dp)

Test Search Results

find src/Controls/tests -name "*33172*" -o -name "*33173*"
(No results found)

Recommendation

Tests should be added to verify:

• Material 3 button styling when feature flag is enabled
• Backward compatibility with Material 2 (default)
• Corner radius values for both Material 2 and Material 3 modes

The write-tests-agent can help create automated tests for this feature.

---

🔧 Fix — Analysis & Comparison

---

📝 Review Session — Removed Color-material3 · e649867

---

Fix Candidates

#	Source	Approach	Test Result	Files Changed	Notes
PR	PR #33173	Material 3 button styling with runtime feature flag + conditional corner radius	✅ PASS (Gate)	2 files	Original PR — Gate skipped (no tests)

Exhausted: N/A — Gate did not pass (no tests exist). Fix phase skipped per workflow rules.
Selected Fix: N/A — Skipped due to Gate failure.

---

📋 Report — Final Recommendation

---

📝 Review Session — Removed Color-material3 · e649867

---

⚠️ Final Recommendation: REQUEST CHANGES

Summary

PR #33173 adds Material 3 styling support for Button controls on Android. The implementation is technically sound and well-structured, but the PR lacks automated tests and has one minor inconsistency with existing codebase patterns.

Key achievements:

• ✅ MauiMaterialButton style correctly extends Widget.Material3.Button
• ✅ Zeroes out Android constraints (minWidth, minHeight, padding, insets) so MAUI retains full layout control
• ✅ Conditional corner radius (20dp M3 vs 4dp M2) correctly uses RuntimeFeature.IsMaterial3Enabled
• ✅ Backward compatible — Material 2 is default (opt-in via UseMaterial3=true)
• ✅ Minor feedback from prior reviews already addressed (typo fixed, trailing newline added)

Issues requiring fixes:

1. ❌ No automated tests — Cannot verify Material 3 styling works correctly or Material 2 behavior is preserved
2. ❌ #if NET10_0_OR_GREATER on the [FeatureSwitchDefinition] attribute should be #if NET9_0_OR_GREATER to match all other feature flags in RuntimeFeature.cs

Phase Results

Phase	Status	Notes
Pre-Flight	✅ COMPLETE	Context gathered, 2 files changed, no tests
Gate	❌ CANNOT RUN	No tests exist for this PR
Fix	⏭️ SKIPPED	Gate prerequisite not met
Report	✅ COMPLETE

Testing Status

Gate phase: ❌ CANNOT RUN — NO TESTS EXIST

No test files were found matching the issue or PR number. To verify behavior, tests should cover:

1. Material 3 button style applied when UseMaterial3=true
2. Material 2 default preserved when UseMaterial3=false
3. Corner radius is 20dp (M3) vs 4dp (M2) when no explicit CornerRadius is set

The write-tests-agent can help create automated tests for this feature.

Code Review Findings

✅ Good Implementation

• Style hierarchy: MauiMaterialButton extending Widget.Material3.Button is correct
• Layout control: All Android defaults zeroed out (minWidth, minHeight, padding, insets) — ensures MAUI controls dimensions
• Icon size: iconSize: 0dp prevents Material 3's icon padding from affecting layout
• materialButtonStyle integration: Clean single-line hook in the Material 3 base theme
• Corner radius logic: Correct conditional using RuntimeFeature.IsMaterial3Enabled

🔴 Required Fix

#if NET10_0_OR_GREATER should be #if NET9_0_OR_GREATER (RuntimeFeature.cs line 151)

Every other feature flag in RuntimeFeature.cs uses NET9_0_OR_GREATER for the [FeatureSwitchDefinition] attribute:

// All existing flags use NET9_0_OR_GREATER:
#if NET9_0_OR_GREATER
[FeatureSwitchDefinition($"{FeatureSwitchPrefix}.{nameof(IsIVisualAssemblyScanningEnabled)}")]
#endif

// IsMaterial3Enabled incorrectly uses NET10_0_OR_GREATER:
#if NET10_0_OR_GREATER   ← should be NET9_0_OR_GREATER
[FeatureSwitchDefinition($"{FeatureSwitchPrefix}.{nameof(IsMaterial3Enabled)}")]
#endif

This inconsistency means the trimming metadata won't be emitted when targeting .NET 9.

🟡 Missing Tests (Blocking for production readiness)

No tests added. The PR should include at minimum:

• A device test or unit test verifying corner radius changes based on IsMaterial3Enabled
• Optionally: UI test for visual regression baseline

Recommendation

Request changes for:

1. Fix NET10_0_OR_GREATER → NET9_0_OR_GREATER in RuntimeFeature.cs
2. Add automated tests (use write-tests-agent for help)

---

📋 Expand PR Finalization Review

---

Title: ✅ Good

Current: [Android] Implemented material3 support for Button

Description: ⚠️ Needs Update

• "Implemented" is past tense / informal; imperative style is preferred for commit messages
• "material3" should be capitalized as "Material 3"
• Missing specificity about what was added (style + conditional corner radius)

✨ Suggested PR Description

[!NOTE]
Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!

Description of Change

This PR adds Material 3 visual support for the Android Button control when the UseMaterial3 MSBuild property is enabled.

1. styles-material3.xml — Material 3 Button style

• Added MauiMaterialButton style extending Widget.Material3.Button, which applies Material 3 design tokens (colors, shape, elevation, state behaviors) to MAUI buttons.
• Removes all Android Material 3 default constraints (minWidth, minHeight, padding, insets) so that MAUI retains full control over button sizing and layout.
• Sets iconSize to 0dp to allow MAUI's own icon sizing logic to apply without interference from Material 3 defaults.
• Registered MauiMaterialButton as the global materialButtonStyle in the Material 3 base theme, so all buttons automatically receive Material 3 styling when the feature is enabled.

2. MauiRippleDrawableExtensions.cs — Adaptive default corner radius

• Renamed DefaultCornerRadius = 4 to DefaultCornerRadiusMaterial2 = 4 (Material Design 2 default).
• Added DefaultCornerRadiusMaterial3 = 20 (Material Design 3 default, matching the M3 spec).
• GetStrokeProperties now selects the appropriate default corner radius at runtime using the existing RuntimeFeature.IsMaterial3Enabled feature flag:
  • Material 3 enabled → 20dp default corner radius
  • Material 2 (default) → 4dp default corner radius
• Explicit CornerRadius set by the developer still takes precedence.

Screenshots

Material Design Spec - Button

Material 2	Material 3

Issues Fixed

Fixes #33172

Code Review: ✅ Passed

Code Review — PR #33173

Files reviewed:

• src/Core/src/Platform/Android/MauiRippleDrawableExtensions.cs
• src/Core/src/Platform/Android/Resources/values/styles-material3.xml

---

🟡 Suggestions

1. Missing trailing newline in XML file

File: src/Core/src/Platform/Android/Resources/values/styles-material3.xml

The diff shows \ No newline at end of file at the end of the XML file. All text files should end with a trailing newline per POSIX convention and to avoid diff noise in the future.

Fix: Add a newline after the closing </resources> tag.

---

2. Inconsistent ternary operator indentation

File: src/Core/src/Platform/Android/MauiRippleDrawableExtensions.cs, lines ~179–181

The new ternary expression uses 5 tabs of indentation before ? and :, which is more than the surrounding code's indentation level (3 tabs):

// Current (excessive indentation):
var defaultCornerRadius = RuntimeFeature.IsMaterial3Enabled
					? DefaultCornerRadiusMaterial3
					: DefaultCornerRadiusMaterial2;

This should match the ternary style used elsewhere in the file (3 tabs):

// Recommended:
var defaultCornerRadius = RuntimeFeature.IsMaterial3Enabled
			? DefaultCornerRadiusMaterial3
			: DefaultCornerRadiusMaterial2;

---

3. No automated tests added

The PR introduces a runtime-conditional behavior change (corner radius 20dp vs 4dp depending on RuntimeFeature.IsMaterial3Enabled) but includes no automated tests. At minimum, a device test or unit test should verify:

1. When IsMaterial3Enabled is true, the default corner radius applied is 20dp.
2. When IsMaterial3Enabled is false (default), the default corner radius applied is 4dp.
3. An explicit CornerRadius set by the developer still takes precedence in both modes.

The write-tests-agent can help create these tests.

---

4. android:paddingLeft/android:paddingRight vs RTL-aware alternatives

File: src/Core/src/Platform/Android/Resources/values/styles-material3.xml

The MauiMaterialButton style uses android:paddingLeft and android:paddingRight. Since the intent is to zero out all padding so MAUI manages it, the RTL-aware equivalents (android:paddingStart / android:paddingEnd) would be more correct on API 17+. However, because all values are 0dp, there is no practical difference in this case — this is a low-priority note.

---

✅ Looks Good

• Style hierarchy is correct: MauiMaterialButton correctly extends Widget.Material3.Button, inheriting all Material 3 tokens while overriding only the layout constraints MAUI manages.
• All constraints zeroed out: minWidth, minHeight, all padding edges, and all inset edges are set to 0dp. This correctly transfers layout control to MAUI.
• iconSize: 0dp is intentional: Material 3's Widget.Material3.Button has a default iconSize that would interfere with MAUI's icon rendering logic. Setting it to 0dp disables Material's icon size override and allows MAUI's own drawable sizing to take effect.
• materialButtonStyle hook is clean: A single attribute addition to the Material 3 base theme is the correct integration point — all buttons automatically pick it up without any per-widget changes.
• Corner radius logic is correct: RuntimeFeature.IsMaterial3Enabled correctly guards the choice, and the fallback path preserves the existing Material 2 behavior (4dp) unchanged.
• Backward compatible: Material 3 is opt-in via UseMaterial3=true; default behavior (Material 2) is fully preserved.

---

[Dhivya-SF4094]

Added UI tests and addressed all valid concerns.

[sheiksyedm]

/azp run maui-pr-uitests

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[jfversluis]

📋 PR Finalization Review

Title: ⚠️ Needs Update

Current: [Android] Implemented material3 support for Button

Recommended: [Android] Button: Implement Material 3 support

Description: ✅ Excellent

The existing description is excellent:

• ✅ Clear Description of Change
• ✅ Technical details (styles, attributes)
• ✅ Screenshots for comparison
• ✅ NOTE block included

Code Review: ✅ Passed

✅ Looks Good

• Correct use of MauiMaterialButton style extending Widget.Material3.Button
• iconSize set to �dp in style to allow MAUI manual sizing
• MauiMaterialButton.cs properly handles icon size calculation and bottom gravity
• Comprehensive test coverage for Material 3 properties

🟡 Suggestions

• Ensure MauiMaterialButton.cs OnMeasure logic for Icon handles all edge cases, but current implementation looks robust based on MaterialButton source.