Material Design Improvements for Syncfusion Xamarin.Forms Controls | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (178).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (225)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (225)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (936)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (156)Chart  (138)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (67)Development  (652)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (609)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Material Design Improvements for Syncfusion Xamarin.Forms Controls

Material Design Improvements for Syncfusion Xamarin.Forms Controls

The Material design concept by Google has completely changed the way the Android applications are developed. By following the provided guidelines on how the UI has to be designed, applications became super interactive, with impressive and creative designs.

Xamarin.Forms has taken advantage of this guideline and provided Material design support for their most-used framework controls in 3.6 for iOS and Android platforms. This support not only provides a beautiful appearance for the application, but also provides a uniform look in iOS and Android platforms. When it is enabled in an application, all the supported views are rendered with a uniform look and feel.

Having said that, it is always not enough to have new features for the framework controls alone. We understand this and we make sure that Syncfusion controls are always compatible with these new features from Xamarin.Forms. Hence, we have provided a built-in support for this in our components in 2019 Volume 3. We have also made lots of improvements in Material design. I will walk you through how to enable this support in applications and show you the UI enhancements it makes in Xamarin.Forms and Syncfusion components.

How to set the Visual property

In this blog, we are not going to concentrate on the required configurations and how the Visual property works, since this was already discussed in detail in this blog post. So, let me just show you how to set Visual.

    <StackLayout Spacing="50" VerticalOptions="Center" HorizontalOptions="Center">
        <Button Text="Default" />
        <Button Text="Material" Visual="Material" />
Default and Material Buttons in iOS.
Default and Material Buttons in iOS.

You can see the difference it makes to the button. Moreover, Visual is a property that can be set to the element or its parent or the page itself. Due to this, you can set Visual as Material for the root element and override it as Default for a specific element if needed.

    <StackLayout Visual="Material" Spacing="50" VerticalOptions="Center" HorizontalOptions="Center">
        <ProgressBar Progress="0.5" ProgressColor="Black" WidthRequest="200" />
        <ProgressBar Progress="0.5" ProgressColor="Black" WidthRequest="200" Visual="Default" />
Overriding the Visual property.
Overriding the Visual property.

Support for Syncfusion controls

One of the most important aspects of Material design is that all the UI elements should feel responsive. So, we have added ripple and highlight effects to applicable controls. If you want to achieve this effect in any kind of view, use our new Effects View control, which was introduced in 2019 Volume 3. Refer to this blog post to learn details about the Effects View.

Note: For the Calendar control, we have changed the default appearance to this improved Material design to make the UI more attractive.

Let me show you the Material design improvements made for Syncfusion controls. The following images are taken in either the iOS or Android platform. However, both the iOS and Android platforms will have the uniform UI.

Calendar and Schedule

Calendar and Schedule.

Accordion, ListView, Expander, and TreeView

Accordion, ListView, Expander, and TreeView.

Picker and Popup

Picker and Popup.

Button, Radio Button, CheckBox, and Chips

Button, Radio Button, CheckBox, and Chips.

Switch, Range Slider, and Tabbed View

Switch, Range Slider, and Tabbed View.

Input components

The previously listed controls will change to Material design automatically when you set the Visual property to Material. However, the following input components will be wrapped with our Text Input Layout control to render in the Material design. To learn more about this, refer to this blog post.

  • DataForm
  • Numeric Entry
  • Masked Entry
  • Autocomplete
  • ComboBox
  • NumericUpDown (from 2019 Volume 3)
Input components used to acquire the details of a card
Input components used to acquire the details of a card

In addition to the existing controls, we have also added support for NumericUpDown in our 2019 Volume 3 release.


In this blog post, we have walked through the Material design support introduced by Xamarin.Forms and how it can be achieved by setting the Visual property to Material. Also, we have seen the Material UI improvements made in Syncfusion Xamarin controls and the ability the design provides to achieve uniform appearance in iOS and Android platforms. We will keep improving the UI based on the requirements in our upcoming releases. If you have any questions, please let us know in the comments section below.

Also, you can contact us through our support forumDirect-Trac, or feedback portal. We are waiting to hear your feedback about these UI improvements!


Share this post:

Comments (4)

Do the renderers work for UWP?

Hi Mark,

No. Like framework controls, we support this only for iOS and Android.


LiveXAML allows for live UI reload in Xamarin Forms applications. This package is a runtime dependency, you also need to install Visual Studio extension. ResourceDictionary instances containing standard Google Material Design swatches, for inclusion in a XAML application.

Mohamed Samsudeen
Mohamed Samsudeen

Hi Maria,

Are you facing any issues in material design? Could you please provide more details about your requirements?


Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Syncfusion Ad