How to Style Xamarin.Forms Using Material Visual

This is the most comprehensive guide to Xamarin.Forms style using material visual.

In this new guide, you’ll learn how to apply Material Design rules to Xamarin applications.

Let’s dive right in:

Getting mobile apps into the hands of target users is a never-ending dream of businesses worldwide.

But creating apps that span all mobile platforms.is a challenge for developers especially when it comes to creating apps using Xamarin – the renowned open-source mobile app platform for NET.

The shattered landscape of mobile platforms poses a real challenge when it comes to rendering an apt look and feel (style) to Xamarin apps across diverse platforms.

Here, you can get some useful tips to build amazing cross-platform iOS, Android, and Windows applications in .NET.

Let’s discover how to make your app look more similar across-platform using the Xamarin Visual Rendering System. Xamarin.Forms just uses the native controls undercover, which is indeed an adorable thing.

So if you build a settings page on Android and a settings page on iOS,as the operating systems update, your controls are going to get updated and they are going to look like how the operating system thinks modern controls should look.  

Styles are great. You just customize the control as heavily as you need to. You can change any property and apply it through your app. For more information refer Styles.

But there’s another way that you can do it where you hook into an existing design system: by using the Xamarin Visual Rendering System.

You can actually create your own design system with the Visual Rendering System. It’s shareable with different apps as well.

But the really cool thing about the visual system is that you can pull in existing design systems from open source.

One of those is Material Design – Google’s design system. It is very popular and this is what they use for all their apps right now.

So if you open Google Maps on Android and iOS, they look pretty similar and that’s because they are using Material Design renders on those platforms.

Xamarin has introduced Xamarin.Forms Material Visual, which can be used to apply Material Design rules to Xamarin applications.

If we enable Material Visual , the supported views will adopt the same designs cross-platform, resulting in a unified look and feel.

3 Simple steps to add Xamarin.Forms Material Visual in your application.

• Add the Xamarin.Forms.Visual.Material NuGet package to Android and iOS platform projects. This NuGet package delivers optimized Material Design renderers on iOS and Android.
• Initialize Material Visual in each platform project.
• Create Material Visual controls by setting the Visual Property to Material on any pages that should adopt the Material Design rules.

Material Visual Initialization
After installing Material Visual, it should be rendered to each platform project.
On Android, you can add the Xamarin.Forms.FormsMaterial.Init method MainActivity. Cs after the Xamarin.Forms.Forms.Init method:

On iOS, this can be done in AppDelegate.cs by invoking the Xamarin.Forms.FormsMaterial.Init method after the Xamarin.Forms.Forms.Init method:

Apply Material Visual to pages

The VisualElement.Visual property on a page layout will help you to enable Material Visual on your page or on any layout or view.

The equivalent C# code is:

If we set the VisualElement.Visual property to Material then the application will use the Material Visual renderers instead of the default renderers.

The values of Visual property can be set to Default, MatchParent or Material.

Default indicates that the view should render using the default renderer.
MatchParent will be the best option if the view should render like its direct parent.
Material refers that the view can be rendered with the help of Material renderer.

For more information refer this Link.