Learning About Material Design in Xamarin Forms

Wondering how to achieve the same look for your Xamarin Forms application on both Android and iOS? Learn how to implement Material Design in your Xamarin Forms apps and make this easy.

As we know, when we are working with design in Xamarin Forms, the controls are rendered to the native controls defined by each platform. That’s why we sometimes declare a container as simple as an Entry, and when we visualize it in Android it looks different than iOS. And that is really amazing :heart_eyes:! But what happens if we have a client that requires their application to look the same on both Android and iOS?

For this there is Material Design , which is a design system responsible for making our controls have the same visualization in each platform.

To be able to implement it in Xamarin, we have Xamarin.Forms Material Visual , which is used to apply the designs defined in Material Design.

⚠ Important To Know

On Android:

:small_blue_diamond: Material Visual requires a minimum version of 5.0 (API 21) or greater

:small_blue_diamond: TargetFramework of version 9.0 (API 28)

First of All… What Do I Need?

:heavy_minus_sign: Add from NuGet Package the plugin: Xamarin.Forms.Visual.Material

:heavy_minus_sign: Let’s initialize Material Visual on each platform

Add the following lines after the Xamarin.Forms.Forms.Init method:

On Android:In your MainActivity.cs :

global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

On iOS:In your AppDelegate.cs :

global::Xamarin.Forms.FormsMaterial.Init();

Let’s Start!

Let’s Learn the Controls Supported by Material Visual

It’s important to know the controls that are actually supported by Visual. These controls are made by Material renderers, which apply the Material Design rules.

:heavy_minus_sign: ActivityIndicator :heavy_minus_sign: Editor  :heavy_minus_sign: Button :heavy_minus_sign: Entry  :heavy_minus_sign: CheckBox :heavy_minus_sign: Frame  :heavy_minus_sign: DatePicker :heavy_minus_sign: Picker  :heavy_minus_sign: ProgressBar  :heavy_minus_sign: Slider  :heavy_minus_sign: Stepper :heavy_minus_sign: TimePicker

Applying Material Visual

It’s so easy to use – you just have to add the Visual property to your controls.

On your XAML:

<ContentPage Visual="Material">
         ...
    </ContentPage>

Also you can apply it in your C# file:

ContentPage cp =  new  ContentPage();
    cp.Visual  =  VisualMarker.Material  or  VisualMarker.MatchParent  orVisualMarker.Default

Visual propertygets the following values:

:small_blue_diamond: Default: Render the view using the default renderer.

:small_blue_diamond: Material: Render the view with the direct parents renderer.

:small_blue_diamond: MatchParent: Render the view using the Material renderer.

And now let’s see some examples of my favorite controls that Visual bring to us!

Thanks for reading!!! :green_heart: :two_hearts:

References: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/