Awesome

MaterialDesignControls Plugin for Xamarin Forms

MaterialDesignControls Plugin for Xamarin.Forms, provides a collection of Xamarin.Forms controls that follow the Material Design 3 Guidelines.

Coming soon

.NET MAUI
We're developing the next version of the plugin for .NET MAUI, bringing you exciting features and improvements.

Demo

Setup

Available on NuGet: Plugin.MaterialDesignControls
Install into your PCL project and Client projects.

Platform Support

Platform	Version
Xamarin.iOS	iOS 8+
Xamarin.Android	API 16+
Xamarin.Forms	>= 5.0.0.1874

API Usage

You must add this line to your platform specific project (AppDelegate.cs, MainActivity.cs) before you use MaterialDesignControls:

if you're using iOS:

Plugin.MaterialDesignControls.iOS.Renderer.Init();

or if you're using Android:

Plugin.MaterialDesignControls.Android.Renderer.Init();

You must add this namespace to your xaml files (deprecated):

xmlns:material="clr-namespace:Plugin.MaterialDesignControls;assembly=Plugin.MaterialDesignControls"

You must add this namespace to your xaml files to use Material Design 3 controls:

xmlns:material="clr-namespace:Plugin.MaterialDesignControls.Material3;assembly=Plugin.MaterialDesignControls"

Styles

You can override colors, font sizes, font families and animations to apply to all the Material controls. View documentation

Controls

MaterialButton

Buttons allow users to take actions, and make choices, with a single tap. <img src="screenshots/button_preview.png" width="300"> View documentation

MaterialChips & MaterialChipsGroup

Chips are compact elements that represent an input, attribute, or action. <img src="screenshots/chips_preview.png" width="300"> View MaterialChips documentation View MaterialChipsGroup documentation

MaterialDatePicker

Date pickers let users select a date. <img src="screenshots/datepicker_preview.png" width="300"> View documentation

MaterialEditor

Text fields let users enter and edit text. <img src="screenshots/editor_preview.png" width="300"> View documentation

MaterialEntry

Text fields let users enter and edit text. <img src="screenshots/entry_preview.png" width="300"> View documentation

MaterialCodeEntry

Code fields let users enter and edit pin codes. <img src="screenshots/code_preview.png" width="300"> View documentation

MaterialField

Displays a value with its respective label in read-only format. <img src="screenshots/field_preview.png" width="300"> View documentation

MaterialPicker

Pickers let users select an option. <img src="screenshots/picker_preview.png" width="300"> View documentation

MaterialDoublePicker

Double pickers let users select two options in the same dialog. <img src="screenshots/doublepicker_preview.png" width="300"> View documentation

MaterialSelection

Selection let users select an option. <img src="screenshots/selection_preview.png" width="300"> View documentation

MaterialTimePicker

Time pickers let users select a time. <img src="screenshots/timepicker_preview.png" width="300"> View documentation

MaterialRating

Displays a rating control <img src="screenshots/rating_preview.png" width="300"> View documentation

MaterialSlider

Displays a slider control <img src="screenshots/slider_preview.png" width="300"> View documentation

MaterialSegmented

Displays a segmented control <img src="screenshots/segmented_preview.png" width="300"> View documentation

MaterialDivider

A divider is a thin line that groups content in lists and layouts. <img src="screenshots/divider_preview.png" width="300"> View documentation

MaterialRadioButtons

Displays a radiobuttons control <img src="screenshots/radio_preview.png" width="300"> View documentation

MaterialFloatingButton

Displays a floating button <img src="screenshots/floatingbutton_preview.png" width="300"> View documentation

MaterialCheckbox

Displays a checkbox control <img src="screenshots/checkbox_preview.png" width="300"> View documentation

MaterialSwitch

Switches toggle the state of a single item on or off. <img src="screenshots/switch_preview.png" width="300"> View documentation

MaterialTopAppBar

TopAppBar displays information and actions at the top of a screen. <img src="screenshots/topappbar_preview.png" width="300"> View documentation

MaterialProgressIndicator

MaterialProgressIndicator show the status of a process in real time <img src="screenshots/progress_preview.png" width="300"> View documentation

MaterialLabel

MaterialLabel helps make writing legible and beautiful <img src="screenshots/label_preview.png" width="300"> View documentation

MaterialBadge

Badges show notifications, counts, or status information on navigation items and icons <img src="screenshots/badge_preview.png" width="300"> View documentation

MaterialNavigationDrawer

Navigation drawers let people switch between UI views on larger devices <img src="screenshots/navigation_preview.png" width="300"> View documentation

MaterialCustomControl

This control provides a simple way to create custom controls with labels and support text that follow the Material Design Guidelines. <img src="screenshots/customcontrol_preview.png" width="300"> View documentation

MaterialSearch

MaterialSearch receives a text and executes a search action. <img src="screenshots/search_preview.png" width="300"> View documentation

MaterialIconButton

MaterialIconButton displays an icon and can execute a command. <img src="screenshots/iconbutton_preview.png" width="300"> View documentation

MaterialSnackBar

MaterialSnackBar show short updates about app processes at the bottom of the screen. <img src="screenshots/snackbar_preview.png" width="300"> View documentation

MaterialDialog

MaterialDialog provide important prompts in a user flow. <img src="screenshots/dialog_preview.png" width="300"> View documentation

MaterialCard

MaterialCard display content and actions about a single subject. <img src="screenshots/card_preview.png" width="300"> View documentation

MaterialBottomSheet

MaterialBottomSheet shows secondary content anchored to the bottom of the screen. <img src="screenshots/bottomsheet_preview.png" width="300"> View documentation

Effects

TouchAndPressEffect

Effect to detect the different types of taps on a view: Pressing, Released and Canceled can be detected.

Example

<MyControl.Effects>
    <material:TouchAndPressEffect />
</MyControl.Effects>

public class MyControl : ContentView, ITouchAndPressEffectConsumer
{
    public void ConsumeEvent(EventType gestureType)
    {
        TouchAndPressAnimation.Animate(this, gestureType);
    }
}

Sample app

https://github.com/HorusSoftwareUY/MaterialDesignControlsPlugin/tree/master/example

Developed by

Contributions

Contributions are welcome! If you find a bug want a feature added please report it.

If you want to contribute code please file an issue, create a branch, and file a pull request.

License

MIT License - see LICENSE.txt