Skip to main content

Xamarin.Forms Material Visual

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.
Xamarin.Forms.Visual.Material

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem.
This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Material ? 


Material Design is introduced in Xamarin.Forms 3.6.
Material Design is a design system created by Google, that prescribes the size, color, spacing, and other aspects of how Views and layouts should look and behave.
  • Visual="Material"
  • Visual="Default"

Note

On Android, the material renderers require a minimum version of 5.0 (API 21) or greater, and a TargetFramework of version 9.0 (API 28).In addition, your platform project requires Android support libraries 28.0.0 or greater, and its theme needs to inherit from a Material Components theme or continue to inherit from an AppCompat theme.

First of All… What Do I Need?
➖ Add from NuGet Package the plugin: Xamarin.Forms.Visual.Material
➖ 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();
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.
 ➖ ActivityIndicator ➖ Editor 
 ➖ Button ➖ Entry 
 ➖ CheckBox ➖ Frame 
 ➖ DatePicker ➖ Picker 
 ➖ ProgressBar  ➖ Slider 
 ➖ Stepper ➖ 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
C#
Visual property gets the following values:
🔹 Default: Render the view using the default renderer.
🔹 Material: Render the view with the direct parents renderer.
🔹 MatchParent: Render the view using the Material renderer.
Material Design components adhere closely to Google's guidelines. As a result, Material Design renderers are biased towards that sizing and behavior. When you require greater control of styles or behavior, you can still create your own Effect, Behavior, or Custom Renderer to achieve the detail you require.

Customize Material Visual

The Material Visual NuGet package is a collection of renderers that realize the Xamarin.Forms controls. Customizing Material Visual controls is identical to customizing default controls.
Effects are the recommended technique when the goal is to customize an existing control. If a Material Visual renderer exists, it is less work to customize the control with an effect than it is to subclass the renderer. 
Custom renderers are the recommended technique when a Material renderer does not exist. The following renderer classes are included with Material Visual:
  • MaterialButtonRenderer
  • MaterialCheckBoxRenderer
  • MaterialEntryRenderer
  • MaterialFrameRenderer
  • MaterialProgressBarRenderer
  • MaterialDatePickerRenderer
  • MaterialTimePickerRenderer
  • MaterialPickerRenderer
  • MaterialActivityIndicatorRenderer
  • MaterialEditorRenderer
  • MaterialSliderRenderer
  • MaterialStepperRenderer
Subclassing a Material renderer is almost identical to non-Material renderers. However, when exporting a renderer that subclasses a Material renderer, you must provide a third argument to the ExportRenderer attribute that specifies the VisualMarker.MaterialVisual type:

using Xamarin.Forms.Material.Android; [assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomMaterialProgressBarRenderer), new[] { typeof(VisualMarker.MaterialVisual) })] namespace MyApp.Android { public class CustomMaterialProgressBarRenderer : MaterialProgressBarRenderer { //... } }

In this example, the ExportRendererAttribute specifies that the CustomMaterialProgressBarRenderer class will be used to render the ProgressBar view, with the IVisual type registered as the third argument.
 Note
A renderer that specifies an IVisual type, as part of its ExportRendererAttribute, will be used to render opted in views, rather than the default renderer. At renderer selection time, the Visual property of the view is inspected and included in the renderer selection process.

Sample App

https://github.com/xamarin/xamarin-forms-samples/releases/download/143381/Xamarin_Forms___Material_Visual.zip

I hope you have understood how to use Material design in Xamarin.Forms.
Thanks for reading. Please share your comments and feedback.
Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

Play Audio in Xamarin Forms using Xam.Plugin.SimpleAudioPlayer

A light-weight and easy to use cross-platform audio player for Windows UWP, Xamarin.iOS, Xamarin.Android, Xamarin.Mac, Xamarin.tvOS and Xamarin.Forms. Load wav and mp3 files from any location including a shared library. Works well for sound effects or music. Multiple instances can be instantiated to play multiple sources simultaniously. Install-Package Xam.Plugin.SimpleAudioPlayer -Version 1.1.0 Dependencies ·          .NETPlatform 5.0 No dependencies. ·          .NETStandard 1.0 NETStandard.Library (>= 1.6.1) ·          MonoAndroid 1.0 No dependencies. ·          Tizen 0.0 No dependencies. ·          UAP 0.0 No dependencies. ·          Xamarin.iOS 1.0 No dependencie...
42 comments
Read more

How To Check Network Connectivity In Xamarin.Forms

Introduction Network connectivity refers to the internet connectivity of a device,  which can be either mobile data or Wi-Fi. In Xamarin.Forms, we are creating cross platform apps, so the different platforms have different implementations. In this blog, we will learn how to check internet connectivity in Xamarin.Forms apps. Solution To check the internet connection in Xamarin.Forms app, we need to follow the steps given below. Step 1 Go to your solution and on your Portable project, right click and select Manage NuGet Packages. Step 2 Search and install Xam.Plugin.Connectivity NuGet Package. Step 3 Write the lines of code given below to check the internet connectivity. if  (CrossConnectivity.Current.IsConnected) {        // your logic...    }  else  {        // write your code if there is no Internet...
19 comments
Read more

All About .NET MAUI

  What’s .NET MAUI? .NET MAUI (.NET Multi-platform App UI) is a framework for building modern, multi-platform, natively compiled iOS, Android, macOS, Windows and apps using C# and XAML in a single codebase. With  .NET MAUI , you can build native applications from a single codebase for Android, iOS, macOS, Windows and Tizen which is backed by Samsung. If you’ve used Xamarin Forms,  MAUI will be very familiar  to you. Instead of different projects for desktop, mobile, and each OS, all your code is in a single project. .NET MAUI also provides  hosting Blazor in MAUI , with embedded web view controls to run Razor components natively on your target device. The decoupled UI and single project enables you to stay focused on one application instead of juggling the unique needs of multiple platforms. It’s the new baby of Microsoft and I know there will be more libraries and the broader ecosystem come alongside .NET MAUI in the following months. Rich Components UI compone...
Post a Comment
Read more