How to implement Material design?

Question

I need to implement a material design in my MAUI application.
I want to create handlers (renderers) for android. Do we have a binding library for material?
Already asked here.
Thanks.

Answer 1

Hello,

Experiments for different visuals in MAUI are being explored in dotnet/Microsoft.Maui.Graphics.Controls. Instead of creating a renderer for android, you can try to override the Draw method to customize the control, refer to https://github.com/dotnet/Microsoft.Maui.Graphics.Controls#easy-to-extend

--------Update---------

Material is the default look implemented for Android in MAUI, we don't have to binding library for material, and we can easily use material controls, just import the library by using Google.Android.Material under Android platform. For more details, refer to https://github.com/dotnet/maui/pull/2033

I want to create handlers (renderers) for android

We also could customize handlers, I test MaterialButton, you could refer to the following code :
MyButton in single project

namespace MAUIButtonDemo.Controls  
{  
    public class MyButton:Button  
    {  
    }  
}  

MyCustomButtonHandlers in single project

namespace MAUIButtonDemo.Handlers  
{  
    public partial class MyCustomButtonHandlers  
    {  
      
}  

}
MyCustomButtonHandlerson Android platform

namespace MAUIButtonDemo.Handlers  
{  
    public partial class MyCustomButtonHandlers :ButtonHandler  
    {  
        protected override MaterialButton CreatePlatformView()  
        {  
            MaterialButton button = new MaterialButton(Context);  
            button.SetBackgroundColor(Android.Graphics.Color.Brown) ;//only set background color to test the effect  
            return button;  
        }  
    }  
}  

Add MyCustomButtonHandlers in MauiProgram.cs

builder.UseMauiApp<App>().ConfigureMauiHandlers(Handlers =>  
        {  
#if __ANDROID__  
 Handlers.AddHandler(typeof(MyButton), typeof(MyCustomButtonHandlers));  
#endif  
 });  

Invoke MyButton in MainPage

<local:MyButton   
                Text="Click me"  
                FontAttributes="Bold"  
                SemanticProperties.Hint="Counts the number of times you click"  
                Clicked="OnCounterClicked"  
                HorizontalOptions="Center" />  

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi, any update on this?