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

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

• Setup
• API Usage
• Styles
• Controls
  • MaterialButton
  • MaterialChips & MaterialChipsGroup
  • MaterialDatePicker
  • MaterialEditor
  • MaterialEntry
  • MaterialCodeEntry
  • MaterialField
  • MaterialPicker
  • MaterialDoublePicker
  • MaterialSelection
  • MaterialTimePicker
  • MaterialRating
  • MaterialSlider
  • MaterialSegmented
  • MaterialDivider
  • MaterialRadioButtons
  • MaterialFloatingButton
  • MaterialCheckbox
  • MaterialSwitch
  • MaterialTopAppBar
  • MaterialProgressIndicator
  • MaterialLabel
  • MaterialBadge
  • MaterialNavigationDrawer
  • MaterialCustomControl
  • MaterialSearch
  • MaterialIconButton
  • MaterialSnackBar
  • MaterialDialog
  • MaterialCard
  • MaterialBottomSheet
• Effects
  • TouchAndPressEffect
• Sample app
• Developed by
• Contributions
• License

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

Platform Support

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"

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

Buttons allow users to take actions, and make choices, with a single tap.

View documentation

Chips are compact elements that represent an input, attribute, or action.

View MaterialChips documentation
View MaterialChipsGroup documentation

Date pickers let users select a date.

View documentation

Text fields let users enter and edit text.

View documentation

Text fields let users enter and edit text.

View documentation

Code fields let users enter and edit pin codes.

View documentation

Displays a value with its respective label in read-only format.

View documentation

Pickers let users select an option.

View documentation

Double pickers let users select two options in the same dialog.

View documentation

Selection let users select an option.

View documentation

Time pickers let users select a time.

View documentation

Displays a rating control

View documentation

Displays a slider control

View documentation

Displays a segmented control

View documentation

A divider is a thin line that groups content in lists and layouts.

View documentation

Displays a radiobuttons control

View documentation

Displays a floating button

View documentation

Displays a checkbox control

View documentation

Switches toggle the state of a single item on or off.

View documentation

TopAppBar displays information and actions at the top of a screen.

View documentation

MaterialProgressIndicator show the status of a process in real time

View documentation

MaterialLabel helps make writing legible and beautiful

View documentation

Badges show notifications, counts, or status information on navigation items and icons

View documentation

Navigation drawers let people switch between UI views on larger devices

View documentation

This control provides a simple way to create custom controls with labels and support text that follow the Material Design Guidelines.

View documentation

MaterialSearch receives a text and executes a search action.

View documentation

MaterialIconButton displays an icon and can execute a command.

View documentation

MaterialSnackBar show short updates about app processes at the bottom of the screen.

View documentation

MaterialDialog provide important prompts in a user flow.

View documentation

MaterialCard display content and actions about a single subject.

View documentation

MaterialBottomSheet shows secondary content anchored to the bottom of the screen.

View documentation

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);
    }
}

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

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.

MIT License - see LICENSE.txt