How to Apply Material Design Rules to Xamarin Applications?

Image for post
Image for post

Getting mobile apps into the hands of target users is a never-ending dream of businesses worldwide. But creating apps that span all mobile 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.

You will discover how to make your app look more similar across platforms 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.

  1. 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.
  2. Initialize Material Visual in each platform project.
  3. 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:

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

The equivalent C# code is:

Image for post
Image for post

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.

Originally published at on October 9, 2020.

We Are A Self-Organized Squad of IT Experts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store