How to implement Material design?

Igor Kravchenko 281 Reputation points
2022-04-20T12:41:38.207+00:00

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.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,176 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,876 Reputation points Microsoft Vendor
    2022-04-21T05:29:01.677+00:00

    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.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Parvez ali 6 Reputation points
    2022-06-21T05:57:33.73+00:00

    Hi, any update on this?

    0 comments No comments