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

Content table

• 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

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.

View documentation

---

MaterialChips & MaterialChipsGroup

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

View MaterialChips documentation
View MaterialChipsGroup documentation

---

MaterialDatePicker

Date pickers let users select a date.

View documentation

---

MaterialEditor

Text fields let users enter and edit text.

View documentation

---

MaterialEntry

Text fields let users enter and edit text.

View documentation

---

MaterialCodeEntry

Code fields let users enter and edit pin codes.

View documentation

---

MaterialField

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

View documentation

---

MaterialPicker

Pickers let users select an option.

View documentation

---

MaterialDoublePicker

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

View documentation

---

MaterialSelection

Selection let users select an option.

View documentation

---

MaterialTimePicker

Time pickers let users select a time.

View documentation

---

MaterialRating

Displays a rating control

View documentation

---

MaterialSlider

Displays a slider control

View documentation

---

MaterialSegmented

Displays a segmented control

View documentation

---

MaterialDivider

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

View documentation

---

MaterialRadioButtons

Displays a radiobuttons control

View documentation

---

MaterialFloatingButton

Displays a floating button

View documentation

---

MaterialCheckbox

Displays a checkbox control

View documentation

---

MaterialSwitch

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

View documentation

---

MaterialTopAppBar

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

View documentation

---

MaterialProgressIndicator

MaterialProgressIndicator show the status of a process in real time

View documentation

---

MaterialLabel

MaterialLabel helps make writing legible and beautiful

View documentation

---

MaterialBadge

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

View documentation

---

MaterialNavigationDrawer

Navigation drawers let people switch between UI views on larger devices

View documentation

---

MaterialCustomControl

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

View documentation

---

MaterialSearch

MaterialSearch receives a text and executes a search action.

View documentation

---

MaterialIconButton

MaterialIconButton displays an icon and can execute a command.

View documentation

---

MaterialSnackBar

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

View documentation

---

MaterialDialog

MaterialDialog provide important prompts in a user flow.

View documentation

---

MaterialCard

MaterialCard display content and actions about a single subject.

View documentation

---

MaterialBottomSheet

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

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