{"id":13712855,"url":"https://github.com/Baseflow/XF-Material-Library","last_synced_at":"2025-05-06T22:31:41.128Z","repository":{"id":41293816,"uuid":"138375258","full_name":"Baseflow/XF-Material-Library","owner":"Baseflow","description":"A Xamarin Forms library for implementing Material Design","archived":false,"fork":false,"pushed_at":"2024-06-13T11:47:17.000Z","size":10839,"stargazers_count":646,"open_issues_count":106,"forks_count":162,"subscribers_count":38,"default_branch":"develop","last_synced_at":"2025-04-24T12:51:48.572Z","etag":null,"topics":["baseflow","material","material-dialogs","xamarin","xamarin-forms","xamarin-plugin"],"latest_commit_sha":null,"homepage":"https://baseflow.com","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Baseflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"Baseflow","custom":"https://baseflow.com/contact"}},"created_at":"2018-06-23T05:52:22.000Z","updated_at":"2025-04-15T07:15:37.000Z","dependencies_parsed_at":"2024-06-21T02:36:28.829Z","dependency_job_id":"16428ef3-7dd0-4983-8515-1cb456d82230","html_url":"https://github.com/Baseflow/XF-Material-Library","commit_stats":{"total_commits":618,"total_committers":31,"mean_commits":19.93548387096774,"dds":0.610032362459547,"last_synced_commit":"fef56fb66de1ff7fc198745f200883f6ac489c20"},"previous_names":["contrix09/xf-material-library","baseflowit/xf-material-library"],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baseflow%2FXF-Material-Library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baseflow%2FXF-Material-Library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baseflow%2FXF-Material-Library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baseflow%2FXF-Material-Library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Baseflow","download_url":"https://codeload.github.com/Baseflow/XF-Material-Library/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252779111,"owners_count":21802885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["baseflow","material","material-dialogs","xamarin","xamarin-forms","xamarin-plugin"],"created_at":"2024-08-02T23:01:23.614Z","updated_at":"2025-05-06T22:31:36.107Z","avatar_url":"https://github.com/Baseflow.png","language":"C#","funding_links":["https://github.com/sponsors/Baseflow","https://baseflow.com/contact"],"categories":["UI"],"sub_categories":[],"readme":"\n\u003cimg src=\"images/xf.material_logo.png\" width=\"112\" /\u003e\n\n# XF.Material Library\n\n[![NuGet](https://img.shields.io/nuget/v/XF.Material?color=orange)](https://www.nuget.org/packages/XF.Material/) [![Build status](https://dev.azure.com/compiledevops/XF.Material/_apis/build/status/XF.Material-CI%20NuGet)](https://dev.azure.com/compiledevops/XF.Material/_build/latest?definitionId=20)\n\nA Xamarin.Forms library for Xamarin.Android and Xamarin.iOS to implement [Google's Material Design](https://material.io/design).\n\n# Support\n\n* Feel free to open an issue. Make sure to use one of the templates!\n* Commercial support is available. Integration with your app or services, samples, feature request, etc. Email: [hello@baseflow.com](mailto:hello@baseflow.com)\n* Powered by: [baseflow.com](https://baseflow.com)\n\n## Contents\n\n- [Getting Started](#getting-started)\n- [Features](#features)\n  - [Material UI](#material-ui)\n    - [App Bar Customization](#app-bar-customization)\n    - [Cards](#cards)\n    - [Buttons](#buttons)\n    - [Text Fields](#text-fields)\n    - [Selection Controls](#selection-controls)\n    - [Menus](#menus)\n    - [Slider](#slider)\n    - [Switch](#switch)\n    - [Typography Label](#typography-label)\n    - [Chips](#chips)\n    - [Circular Progress Indicator](#circular-progress-indicator)\n    - [Tintable Image Icon](#tintable-image-icon)\n  - [Material Dialogs](#material-dialogs)\n    - [Alert Dialog](#alert-dialog)\n    - [Simple Dialog](#simple-dialog)\n    - [Confirmation Dialog](#confirmation-dialog)\n    - [Input Dialog](#input-dialog)\n    - [Loading Dialog](#loading-dialog)\n    - [Snackbar](#snackbar)\n    - [Styling Dialogs](#styling-dialogs)\n  - [Material Resources](#material-resources)\n    - [Color](#color)\n    - [Typography](#typography)\n    - [Adding the Material Resources](#adding-the-material-resources)\n    - [Retrieving a Material Resource](#retrieving-a-material-resource)\n  - [Changing the Status Bar Color](#changing-the-status-bar-color)\n- [Android Compatibility Issues](#android-compatibility-issues)\n- [Thanks and Appreciation](#thanks-and-appreciation)\n\n## Getting Started\n1. Download the current version through [NuGet](https://www.nuget.org/packages/XF.Material) and install it in your Xamarin.Forms projects.\n2. Call the `Material.Init()` method in each project:\n\n```c#\n//Xamarin.Forms\n\npublic App()\n{\n    this.InitializeComponent();\n    XF.Material.Forms.Material.Init(this);\n}\n\n//Xamarin.Android\n\nprotected override void OnCreate(Bundle savedInstanceState)\n{\n    TabLayoutResource = Resource.Layout.Tabbar;\n    ToolbarResource = Resource.Layout.Toolbar;\n\n    base.OnCreate(savedInstanceState);\n\n    Xamarin.Forms.Forms.Init(this, savedInstanceState);\n    XF.Material.Droid.Material.Init(this, savedInstanceState);\n\n    this.LoadApplication(new App());\n}\n\n//Xamarin.iOS\n\npublic override bool FinishedLaunching(UIApplication app, NSDictionary options)\n{\n    Xamarin.Forms.Forms.Init();\n    XF.Material.iOS.Material.Init();\n    this.LoadApplication(new App());\n\n    return base.FinishedLaunching(app, options);\n}\n\n```\n\n3. Configure your application's color and font resources. Read more about it [here](#material-resources).\n\n### Additional configuration for iOS\n\nIn order to be able to change the status bar's colors using [this](#changing-the-status-bar-color) or by setting your app colors [here](#adding-the-material-resources), add this to your `info.plist` file:\n\n```xml\n\u003ckey\u003eUIViewControllerBasedStatusBarAppearance\u003c/key\u003e\n\u003cfalse/\u003e\n```\n\n**Note**: If some of the controls like progressbar, checkbox and radio buttons are not showing in iOS then add all the files from \u003cu\u003e[here](https://github.com/Baseflow/XF-Material-Library/tree/master/XF.Material/Platforms/Ios/Resources)\u003c/u\u003e to \t    iOS project's \u003cu\u003eResources\u003c/u\u003e folder.\n\n## Features\n\n### Material UI\nUnder the `XF.Material.Forms.UI` namespace, the library offers a number of controls available.\n\n#### App Bar Customization\nYou can customize the appearance of the App Bar by using the `MaterialNavigationPage` control.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n|`\u003cContentPage .... xmlns:material=\"clr-namespace:XF.Material.Forms.UI;assembly=XF.Material\" material:MaterialNavigationPage.AppBarColor=\"#2c3e50\" material:MaterialNavigationPage.AppBarTitleTextFontFamily=\"Roboto\" material:MaterialNavigationPage.AppBarTitleTextFontSize=\"14\" material:MaterialNavigationPage.StatusBarColor=\"#1B3147\" material:MaterialNavigationPage.AppBarTitleTextAlignment=\"Start\" /* Content goes here * \u003c/ ContentPage\u003e` |\u003cimg src=\"https://media.giphy.com/media/MU4IeOwCKtssPAmgNB/giphy.gif\" alt=\"Android card\" width=\"500\" /\u003e|\u003cimg src=\"https://media.giphy.com/media/XJ1bwhVkWKPDU2UmKP/giphy.gif\" alt=\"iOS card\" width=\"500\"/\u003e |\n\n\n##### Attached Properties\nThese are attached properties that can be used on pages that are navigated through the `MaterialNavigationPage` control.\n\n1. `AppBarColor` - The color of the app bar.\n\n2. `AppBarTitleTextAlignment` - The text alignment of the app bar title. The default value is `TextAlignment.Start`.\n\n3. `AppBarTitleTextColor` - The text color of the app bar title. The default value is `Material.Color.OnPrimary`.\n\n4. `AppBarTitleFontFamily` - The font family of the app bar title. The default value is `Material.FontFamily.H6`.\n\n5. `AppBarTitleFontSize` - The font size of the app bar title. The default value is  `24`.\n\n6. `AppBarElevation` - The size of the shadow below the app bar. The default value is  `4`.\n\n7. `StatusBarColor` - The color of the status bar.\n\n##### Usage and Behavior\nThis control uses the new feature of Xamarin 3.3, the `TitleView` property, to be able to change the appearance of the app bar title.\nBut when the `TitleView` property is set on a page, the attached properties will not work.\n\n#### Cards\n\nCards contain content and actions about a single subject.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| ` \u003cmaterial:MaterialCard CornerRadius=\"2\" Elevation=\"1\" HeightRequest=\"80\" HorizontalOptions=\"FillAndExpand\" /\u003e ` |\u003cimg src=\"images/card_android.jpg\" alt=\"Android card\" width=\"500\" /\u003e|\u003cimg src=\"images/card_ios.jpg\" alt=\"iOS card\" width=\"573\"/\u003e |\n\n##### Property\n\n`MaterialCard` inherits the `Frame` class.\n\n- `Elevation` - The virtual distance along the z-axis. The value determines the importance of the content pesented in this view. The default value is `1`.\n\n- `IsClickable` - When set to `true`, the card displays a ripple-effect when touched.\n\n- `ClickCommand` - The command that will run when this card was touched and the property `IsClickable` is set to `true`.\n\n- `ClickCommandParameter` - The parameter to pass in `ClickCommand` when it is executed.\n\n##### Event\n\n- `Clicked` - The event that is raised when this card was touched and the property `IsClickable` is set to `true`.\n\n##### Usage\n\nCards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.\n\nRead more about cards [here](https://material.io/design/components/cards.html).\n\n#### Buttons\n\nButtons allow users to take actions, and make choices, with a single tap.\n\nThere are two types of buttons you can use: `MaterialButton` and `MaterialIconButton`\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| `\u003cmaterial:MaterialButton BackgroundColor=\"#EAEAEA\" HorizontalOptions=\"Center\" Text=\"Elevated Button\" TextColor=\"Black\" VerticalOptions=\"Center\" /\u003e ` |\u003cimg src=\"https://media.giphy.com/media/fegjbOqxJpQ5P8Fly6/giphy.gif\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"https://media.giphy.com/media/1oHpBfcWb2a3ZKv3ul/giphy.gif\" alt=\"iOS button\" width=\"500\"/\u003e |\n\n##### Properties\n\n`MaterialButton` inherits the `Button` class. `MaterialIconButton` inherits the `ContentView` class.\n\nBoth of these controls have these common properties:\n\n1. `ButtonType` - The type of the button. The default value is `Elevated`.\n\n    - `Elevated` - This button will cast a shadow.\n    - `Flat` - This button will have no shadow.\n    - `Outlined` - This button will have no shadow, has a transparent background, and has a border.\n    - `Text` - This button will only show its label. It will not have a shadow, has a transparent background, and no border. *Text buttons has a smaller inner padding as compared to the other button types.*\n\n2. `BackgroundColor` - The color of the button's background. *Outlined and Text button types will always have a transparent background color. Flat and elevated buttons have a default background color based on the value of `MaterialColorConfiguration.Secondary`.*\n\n3. `PressedBackgroundColor` - The color of the button's background when it is pressed.\n\n4. `DisabledBackgroundColor` - The color of the button's background when it is disabled.\n\n5. `Elevation` - The virtual distance along the z-axis.\n\n`MaterialButton` have these properties:\n\n1. `Image` - The icon to be displayed next to the button's label. The color of the icon will be based on the `TextColor` property value of the button.\n\n2. `AllCaps` - Whether the letters in the label of the button should be in upper case or not. By default, this is set to `true`.\n\n`MaterialIconButton` has this property:\n\n1. `Image` - The image of the button.\n\n2. `TintColor` - The tint color of the image.\n\n##### Usage \u0026 Behavior\nButtons communicate actions that users can take. They are typically placed throughout your UI.\n\n- `Elevated` and `Flat`\n\n    \u003cimg src=\"images/button_elevated.jpg\" alt=\"contained buttons\" width=\"800\" /\u003e\n    \n    These are high-emphasis buttons that are distinguished by their fill color and/or shadow. The actions bound to them are primary to your app.\n\n- `Outlined`\n\n    \u003cimg src=\"images/button_outlined.jpg\" alt=\"outlined buttons\" width=\"800\" /\u003e\n    \n    These are medium-emphasis buttons. The actions bound to them are important, but are not the primary action in an app.\n\n- `Text`\n\n    \u003cimg src=\"images/button_text.jpg\" alt=\"outlined buttons\" width=\"800\" /\u003e\n    \n    These buttons are typically used for less-pronounced actions, which are located in modal dialogs or in cards.\n\nYou can set the `Elevation` property of the button using XAML or C# code. You can also set values when the button is in normal state or pressed state.\n\nUsing XAML\n\n```xml\n\u003c!-- Button with a normal and pressed elevation of `4` --\u003e\n\u003cmaterial:MaterialButton Elevation=\"4\" Text=\"Click\" /\u003e\n\n\u003c!-- Button with a normal elevation of `4` and pressed elevation of `8` --\u003e\n\u003cmaterial:MaterialButton Elevation=\"4, 8\" Text=\"Click\" /\u003e\n```\n\nUsing C#\n```c#\n// Button with a normal and pressed elevation of `4`\nvar button1 = new MaterialButton()\n{\n    Elevation = new MaterialElevation(4),\n    Text = \"Click\"\n};\n\n// Button with a normal and pressed elevation of `4` using implicit operator\nvar button2 = new MaterialButton()\n{\n    Elevation = 4,\n    Text = \"Click\"\n};\n\n// Button with a normal elevation of `4` and pressed elevation of `8`\nvar button3 = new MaterialButton()\n{\n    Elevation = new MaterialElevation(4,8),\n    Text = \"Click\"\n};\n```\n\nOn press, buttons display touch feedback (ripple effect).\n\nRead more about buttons [here](https://material.io/design/components/buttons.html).\n\n#### Text Fields\nText fields allow users to enter and edit text.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| `\u003cmaterial:MaterialTextField Placeholder=\"Placeholder\" HelperText=\"Helper Text\" ErrorText=\"Error Text\" Text=\"Input Text\" InputType=\"Default\" /\u003e`|\u003cimg src=\"images/textfield_android.jpg\" alt=\"iOS button\" width=\"573\"/\u003e|\u003cimg src=\"images/textfield_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Properties\n\n`MaterialTextField` inherits the `ContentView` class.\n\n1. `AlwaysShowUnderline` - Boolean flag determines whether the underline accent of this text field should always show or not. The default value is `false`.\n\n2. `BackgroundColor` - The background color of the text field. Default hex color value is `#DCDCDC`.\n\n3. `ErrorColor` - The color to indicate an error in the text field. The default value is based on the color value of `MaterialColorConfiguration.Error`.\n\n4. `ErrorText` - The text that will show to indicate an error in this text field. This will replace `HelperText` when `HasError` is set to `true`.\n\n5. `ErrorIcon` - The icon that will show to indicate an error in this text field. Will show when `HasError` is set to `true`.\n\n6. `FocusCommand` - The command that will be executed when this text field receives or loses focus.\n\n7. `HasError` - Boolean flag that indicates whether an error has occurred or not in this text field.\n\n8. `HelperText` - The text that appears below the text field to indicate additional hints for the text field.\n\n9. `HelperTextColor` - The color of the helper text. The default hex color value is `#99000000`.\n\n10. `HelperTextFontFamily` - The font family of the helper text. The `ErrorText` will use this as its font family.\n\n11. `LeadingIcon` - The image icon that will show on the left side of this text field.\n\n12. `LeadingIconTintColor` - The color to be used to tint the icon image of this text field. The default hex color value is `#99000000`.\n\n13. `InputType` - The keyboard input type to be used for this text field.\n\n14. `MaxLength` - The maximum allowed number of characters in this text field.\n\n15. `Placeholder` - The placeholder text of this text field. This property must never be null or empty.\n\n16. `PlaceholderColor` - The color of the placeholder text. The default hex color value is `#99000000`.\n\n17. `ReturnType` -  The appearance of the return button of the keyboard.\n\n18. `ReturnCommand` - The command that will run when the user returns the input.\n\n19. `ReturnCommandParameter` - The parameter to be passed in `ReturnCommand` property when it is executed.\n\n20. `Text` - The input text of this text field.\n\n21. `TextChangeCommand` - The command that executes when there is a change in this text field's input text.\n\n22. `TextColor` - The color of the input text. The default hex color value is `#D0000000`.\n\n23. `TextFontFamily` - The font family of the input text. By default, it uses the `MaterialFontConfiguration.Body2` font family.\n\n24. `TintColor` - The tint color of the underline accent and the placeholder of this text field when focused. The default color is set to the value of `MaterialColorConfiguration.SecondaryColor`.\n\n25. `FloatingPlaceholderEnabled` - Determines whether the placeholder should float above when the text field is focused.\n\n26. `Choices` - When the `InputType` property is set to `MaterialInputType.Choice`, provides the list of choices from which the user will select one.\n\n27. `ChoicesBindingName` - The name of the property of the items in the `Choices` property to display.\n\n28. `ChoiceSelectedCommand` - The command that will execute when an item is selected using the input type `Choice`. The parameter that will be passed to this command is the selected item.\n\n29. `HorizontalPadding` - The value that determines the left and right padding of the text field.\n\n30. `IsSpellCheckEnabled` - Boolean flag determines whether spell checking is enabled in this text field.\n\n31. `IsTextPredictionEnabled` - Boolean flag determines whether text prediction is enabled in this field.\n\n32. `TextFontSize` - The font size of the text field's input text.\n\n33. `FloatingPlaceholderFontSize` - The font size of the text field's floating placeholder.\n\n34. `FloatingPlaceholderColor` - The color of the text field's floating placeholder.\n\n35. `IsAutocapitalizationEnabled` - Boolean value that determines whether to autocapitalize the input text or not.\n\n36. `IsMaxLengthCounterVisible` - Boolean value that determines whether to show the max input length counter on not.\n\n37. `ShouldAnimateUnderline` - Boolean value that determines whether to anumate the underline indicator or not.\n\n##### Events\n\n1. `Focused` - Raised when this text field receives focus.\n\n2. `Unfocused` -  Raised when this text field loses focus.\n\n3. `TextChanged` - Raised when the input text of this text field has changed.\n\n4. `ChoiceSelected` - The event that will be raised when an item is selected using the input type `Choice`. Gives the item that was selected.\n\n5. `Completed` - The event that will be raised when the user completes the input using the return key.\n\n##### Usage and Behavior\n\nA text field container, by default, has a fill. You can make the text field's `BackgroundColor` transparent and `AlwaysShowUnderline` to `true`.\n\nThe placeholder text should always be visible, because it is used to inform users as to what information is requested for a text field.\n\nHelper text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus.\n\nWhen input text isn’t accepted, an error text can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.\n\nRead more about text fields [here](https://material.io/design/components/text-fields.html#usage).\n\n#### Selection Controls\nSelection controls allow users to complete tasks that involve making choices such as selecting \noptions, or switching settings on or off. Selection controls are found on screens that ask \nusers to make decisions or declare preferences such as settings or dialogs.\n\n##### Radio Buttons\nAllow users to select one option from a set.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| `\u003cmaterial:MaterialRadioButtonGroup x:Name=\"radioButtonGroup\" Choices=\"{Binding Jobs}\" /\u003e ` |\u003cimg src=\"images/radiobuttons_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/radiobuttons_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n###### Properties\n\n1. `Choices` - The list of string the user will choose from.\n\n2. `FontFamily` - The font family of the text of each radio buttons. The default is the value of `MaterialFontConfiguration.Body1`.\n\n3. `FontSize` - The font size of the text of each radio buttons. The default value is `16`.\n\n4. `HorizontalSpacing` - The spacing between the radio button and its text.\n\n5. `SelectedColor` - The color that will be used to tint this control whe selected. The default is the value of `MaterialColorConfiguration.Secondary`.\n\n6. `SelectedIndex` - The index of the selected choice.\n\n7. `SelectedIndexChanged` - Raised when there is a change in the control's selected index.\n\n8. `SelectedIndexChangedCommand` - The command that wil run if there is a change in the control's selected index. The parameter is the selected index.\n\n9. `TextColor` - The color of the text of each radio button. The default value is `#DE000000`.\n\n10. `UnselectedColor` - The color that will be used to tint this control when unselected. The default value is `#84000000`.\n\n11. `VerticalSpacing` - The spacing between each radio buttons.\n\n###### Usage and Behavior\nUse radio buttons when the user needs to see all available options. The orientation of the radio buttons is limited to vertical position, since\nthe custom view used to present the radio buttons is a `ListView`, but the scroll bars will not show since the `ListView`'s height is based on the number\nof choices. Each radio button has a fixed height of `48`.\n\n##### Checkboxes\nCheckboxes allow the user to select one or more items from a set.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| `\u003cmaterial:MaterialCheckboxGroup x:Name=\"checkBoxGroup\" Choices=\"{Binding Jobs}\" /\u003e ` |\u003cimg src=\"images/checkboxes_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/checkboxes_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n###### Properties\n\n1. `Choices` - The list of string the user will choose from.\n\n2. `FontFamily` - The font family of the text of each checkboxes. The default is the value of `MaterialFontConfiguration.Body1`.\n\n3. `FontSize` - The font size of the text of each checkboxes. The default value is `16`.\n\n4. `HorizontalSpacing` - The spacing between the checkbox and its text.\n\n5. `SelectedColor` - The color that will be used to tint this control whe selected. The default is the value of `MaterialColorConfiguration.Secondary`.\n\n6. `SelectedIndices` - The indices of the selected choices.\n\n7. `SelectedIndicesChanged` - Raised when there is a change in the control's selected inices.\n\n8. `SelectedIndicesChangedCommand` - The command that wil run if there is a change in the control's selected indices. The parameter is the list of selected indices.\n\n9. `TextColor` - The color of the text of each radio button. The default value is `#DE000000`.\n\n10. `UnselectedColor` - The color that will be used to tint this control when unselected. The default value is `#84000000`.\n\n11. `VerticalSpacing` - The spacing between each checkboxes.\n\n\n###### Usage and Behavior\nIt has the same limitations as `MaterialRadioButtonGroup`.\n\nCheckboxes can be used to turn an option on or off.  If there is only one option, you can use `MaterialCheckbox` instead.\n\n`MaterialCheckbox` has the property `IsSelected`, you can use this to determine whether the option was selected or not.\n\n#### Menus\nMenus display a list of choices on temporary surfaces.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| `\u003cmaterial:MaterialMenuButton ButtonType=\"Text\" CornerRadius=\"24\" Choices=\"{Binding Actions}\" Command=\"{Binding MenuCommand}\" /\u003e`|\u003cimg src=\"https://media.giphy.com/media/pjPfJ9XWRJx0JyeIhs/giphy.gif\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"https://media.giphy.com/media/2rAIp1FRTY98qjDuJ5/giphy.gif\" alt=\"iOS button\" width=\"500\"/\u003e |\n\n##### Properties\n\n`MaterialMenuButton` inherits the `XF.Material.Forms.UI.MaterialIconButton` class.\n\n1. `Choices` - The list of items from which the user will choose from. You can either assign a collection of `string` or `MaterialMenuItem`.\n\n2. `MenuBackgroundColor` - The background color of the menu.\n\n3. `MenuCornerRadius` - The corner radius of the menu.\n\n4. `Command` - The command that will execute when a menu item was selected. The type is `Command\u003cMaterialMenuResult\u003e`. The result will contain the index of the selected menu and the parameter, if any.\n\n5. `CommandParameter` -  The parameter to pass in `Command` property.\n\n6. `MenuTextColor` - The text color of the menu items.\n\n7. `MenuTextFontFamily` - The text font family of the menu items.\n\n##### Event\n\n1. `MenuSelected` - Raised when a menu item was selected.\n\n##### Usage and Behavior\nMenus are positioned relative to both the element that generates them and the edges of the screen. They can appear in front of, beside, above, or below the element that generates them.\n\nMenus can be dismissed by tapping outside, when an item was selected, or when the back button was pressed in Android.\n\nBe sure to always match the width and height of the child view to the width and height of the menu.\n\nMenu is by default a button. In the menu sample shown above the 3 dots is an added image. This is one of the possibilities how the menu can look like.\n\n#### Slider\nSliders allow users to make selections from a range of values.\n\n```xml\n\u003cmat:MaterialSlider Value=\"{Binding CurrentValue}\" MinValue=\"0\" MaxValue=\"100\" /\u003e\n```\n\n##### Properties\n`MaterialSlider` inherits the `ContentView` class.\n\n1. `Value` - The current value selected.\n\n2. `MinValue` -  The minimum value allowed to select.\n\n3. `MaxValue` - The maximum value allowed to select.\n\n4. `ValueChangedCommand` - The command that will execute when the current value has changed.\n\n5. `TrackColor` - The track color of the slider.\n\n6. `ThumbColor` - The thumb color of the slider.\n\n##### Event\n\n1. `ValueChanged` - The event that is raised when the current value has changed.\n\n#### Switch\nSwitches allow the user to toggle between two states.\n\n```xml\n\u003cmat:MaterialSwitch IsActivated=\"{Binding IsTracking}\" /\u003e\n```\n\n##### Properties\n`MaterialSwitch` inherits the `ContentView` class.\n\n1. `ActiveTrackColor` - The track color of the switch when it is in active state.\n\n2. `ActiveThumbColor` - The thumb color of the switch when it is in active state.\n\n3. `InactiveTrackColor` - The track color of the switch when it is in inactive state.\n\n4. `InactiveThumbColor` - The thumb color of the switch when it is in inactive state.\n\n5. `IsActivated` - Boolean flag whether the switch was activated or not.\n\n##### Event\n\n1. `Activated` - The event that is raised when the switch was activated or not.\n\n#### Typography Label\nA view that displays a text. Allows customizations to conform with the typography guidelines.\n\n##### Properties\n`MaterialLabel` inherits the `Label` class.\n\n1. `TypeScale` - In material design, these are categories on how the text are displayed. Each type scale has its own font family, font weight, font size, and letter spacing. For more info about type scale, read [here](#type-scale).\n\n2. `LineHeight` - The factor to multiply that will identify the distance between the base of a line of text to another. The default value is `1.4`.\n\n#### Chips\nChips are compact elements that represent an input, attribute, or action.\n\n| Code | Android  | iOS |\n| ------------- | ------------- | ------------- |\n| `\u003cmaterial:MaterialChip BackgroundColor=\"#F2F2F2\" Image=\"im_google\" Text=\"Google\" TextColor=\"#DE000000\" /\u003e ` |\u003cimg src=\"images/chip_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/chip_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Properties\n\n`MaterialChip` inherits the `ContentView` class.\n\n1. `Text` - The chip's label to be displayed.\n\n2. `TextColor` - The color of the chip's label.\n\n3. `FontFamily` - The font family of the chip's label.\n\n4. `BackgroundColor` - The color of the chip's background.\n\n5. `Image` - The chip's image to be displayed.\n\n6. `ActionImage` - The chip's action image to be displayed.\n\n7. `ActionImageTappedCommand` - The bindable command that executes when the `ActionImage` of the chip is tapped.\n\n##### Event\n1. `ActionImageTapped` - The event that is called when the `ActionImage` of the chip is tapped.\n\n##### Usage and Behavior\n\nChips allow users to enter information, make selections, filter content, or trigger actions.\n\nRead more about chips [here](https://material.io/design/components/chips.html).\n\n#### Circular Progress Indicator\nAn indeterminate progress indicator that express an unspecified wait time of a process.\n\n##### Code\n\n```xml\n\u003cmaterial:MaterialCircularLoadingView WidthRequest=\"56\"\n    HeightRequest=\"56\"\n    TintColor=\"#6200EE\" /\u003e\n```\n\n##### Properties\n\n`MaterialCircularLoadingView` inherits the `Lottie.Forms.AnimationView` class.\n\n1. `TintColor` - The color of the circular progress indicator.\n\n##### Usage \u0026 Behavior\n\nCircular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.\n\n[Loading Dialog](###Loading-Dialog) uses this to indicate a process running.\n\nRead more about circular progress indicator [here](https://material.io/design/components/progress-indicators.html#circular-progress-indicators).\n\n#### Tintable Image Icon\nA tintable image view.\n\n##### Code\n\n```xml\n\u003cmaterial:MaterialIcon WidthRequest=\"56\"\n    HeightRequest=\"56\"\n    Source=\"ic_save\"\n    TintColor=\"#6200EE\" /\u003e\n```\n\n##### Properties\n\n`MaterialIcon` inherits the `Image` class.\n\n1. `TintColor` - The tint color of the image.\n\n### Material Dialogs\n\nUnder the `XF.Material.Forms.UI.Dialogs` namespace, you can display modal views to notify users by using `MaterialDialog.Instance`.\n\n**Handling the Back Button on Android**\n\nIn order for the back button to work on Android for dismissing dialogs, override the `OnBackPressed` method in your `MainActivity` class and add this:\n\n```c#\npublic override void OnBackPressed()\n{\n    XF.Material.Droid.Material.HandleBackButton(base.OnBackPressed);\n\n    //No need to call  Rg.Plugins.Popup.Popup.SendBackPressed();\n}\n```\n\n**Important**\u003cbr /\u003e\nIf you are using `Rg.Plugins.Popup`, using `XF.Material.Droid.Material.HandleBackButton(base.OnBackPressed)` will call `Popup.SendBackPressed` when\nthere is a modal page that is not a shown using `MaterialDialog.Instance`.\n\n\n#### Alert Dialog\nAlert dialogs interrupt users with urgent information, details, or actions.\n\n| Android  | iOS |\n| ------------- | ------------- |\n|\u003cimg src=\"images/dialog_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/dialog_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Code\nYou can show an alert dialog using any of the following overload methods of `MaterialDialog.Instance.AlertAsync()` or `MaterialDialog.Instance.ConfirmAsync()`.\n\nThere are two common parameters in this method:\n\n1. `message` - The message of the alert dialog.\n\n2. `title` - The title of the alert dialog.\n\n- Shows an alert dialog for acknowledgement. It only has a single, dismissive action used for acknowledgement.\n\n    ```c#\n    await MaterialDialog.Instance.AlertAsync(message: \"This is an alert dialog.\");\n\n    await MaterialDialog.Instance.AlertAsync(message: \"This is an alert dialog\", \n                                        title: \"Alert Dialog\");\n    \n    await MaterialDialog.Instance.AlertAsync(message: \"This is an alert dialog\", \n                                        title: \"Alert Dialog\", \n                                        acknowledgementText: \"Got It\");\n    ```\n    \n    - `acknowledgementText` - The text of the alert dialog's acknowledgement button. The default string value is `Ok`.\n\n- Showing an alert dialog for confirmation of action. Returns true when the confirm button was clicked, false if the dismiss button was clicked or if the alert dialog was dismissed.\n\n    ```c#\n    await MaterialDialog.Instance.ConfirmAsync(message: \"Do you want to sign in?\", \n                                        confirmingText: \"Sign In\");\n    \n    await MaterialDialog.Instance.ConfirmAsync(message: \"Do you want to sign in?\", \n                                        confirmingText: \"Sign In\", \n                                        dismissiveText: \"No\");\n    \n    await MaterialDialog.Instance.ConfirmAsync(message: \"Discard draft?\", \n                                        title: \"Confirm\", \n                                        confirmingText: \"Yes\", \n                                        dismissiveText: \"No\");\n    ```\n\n    - `confirmingText` - The text of the alert dialog's confirmation button.\n    \n    - `dismissiveText` - The text of the alert dialog's dismissive button. The default string value is `Cancel`.\n\n\n##### Usage \u0026 Behavior\n\nAn alert dialog is displayed by pushing a modal window. This will appear in front of the content of the app to provide critical information or ask for a decision.\n\nAlert dialogs are interruptive. This means that it disables all app functionality when they appear, and remain on screen until confirmed, dismissed or a required action has been taken.\n\nAlert dialogs may be dismissed by tapping outside of the dialog, tapping the dismissive button (e.g. \"Cancel\" button), or by tapping the system back button (for Android).\n\nRead more about alert dialogs [here](https://material.io/design/components/dialogs.html#alert-dialog).\n\n##### Custom Alert Dialog Content\nYou can show a custom dialog content by using the `MaterialDialog.Instance.ShowCustomContentAsync()`.\n\n\u003cimg src=\"images/custom_content_android.png\" alt=\"Android button\" width=\"500\" /\u003e\n\n```c#\nvar choices = new string[]\n{\n    \"Biology\",\n    \"Psychology\",\n    \"Phsyics\",\n    \"Chemistry\"\n};\n\nvar view = new MaterialRadioButtonGroup()\n{\n    Choices = choices\n};\n\nbool? wasConfirmed = await MaterialDialog.Instance.ShowCustomContentAsync(view, \"What field of science is considered as the study of life?\", \"Question 1\");\n```\nThis method returns a nullable `bool`. Returns `true` when the user dismisses the dialog using the confirm button, `false` when using the dismiss button, and `null` when using the back button or when the background was clicked.\n\nYou can pass parameters as like what you would do in when using `MaterialDialog.Instance.ConfirmAsync()`. The only\n difference is that it takes a `View` as a parameter and this will be shown inside the dialog.\n\nYou can remove the negative button by passing `null` to the `dismissiveText` parameter.\n\n#### Simple Dialog\nSimple dialogs can display items that are immediately actionable when selected. They don’t have text buttons.\n\n| Android  | iOS |\n| ------------- | ------------- |\n|\u003cimg src=\"images/simpledialog_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/simpledialog_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Code\nYou can show a simple dialog by using any of the overload methods of `MaterialDialog.Instance.SelectActionAsync()`.\n\n```c#\n\n//Create actions\nvar actions = new string[]{ \"Open in new tab\", \"Open in new window\", \"Copy link address\", \"Download link\" };\n\n//Show simple dialog\nvar result = await MaterialDialog.Instance.SelectActionAsync(actions: actions);\n\n//Show simple dialog with title\nvar result = await MaterialDialog.Instance.SelectActionAsync(title: \"Select an action\", \n                                                             actions: actions);\n\n```\n\n##### Usage \u0026 Behavior\nSimple dialogs are dismissed by tapping an action, or by tapping outside the dialog.\n\nRead more about alert dialogs [here](https://material.io/design/components/dialogs.html#alert-dialog).\n\n#### Confirmation Dialog\nConfirmation dialogs give users the ability to provide final confirmation of a choice before committing to it, \nso they have a chance to change their minds if necessary.\n\n| Android  | iOS |\n| ------------- | ------------- |\n|\u003cimg src=\"images/confirmdialog_single_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/confirmationdialog_multi_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Code\nYou can show two types of confirmation dialog: Choose one of listed choices using `MaterialDialog.Instance.SelectChoiceAsync()`, and choose one or more of listed choices using `MaterialDialog.Instance.SelectChoicesAsync()`.\n\n```c#\n//Create choices\nvar jobs = new string[]\n{\n    \"Mobile Developer (Xamarin)\",\n    \"Mobile Developer (Native)\",\n    \"Web Developer (.NET)\",\n    \"Web Developer (Laravel)\",\n    \"Quality Assurance Engineer\",\n    \"Business Analyst\",\n    \"Recruitment Officer\",\n    \"Project Manager\",\n    \"Scrum Master\"\n};\n\n//Show confirmation dialog for choosing one.\nvar result = await MaterialDialog.Instance.SelectChoiceAsync(title: \"Select a job\", \n                                                             choices: jobs);\n\n//Show confirmation dialog for choosing one or more.\nvar result = await MaterialDialog.Instance.SelectChoicesAsync(title: \"Select a job\", \n                                                              choices: jobs);\n```\n\nYou can also define pre-selected choice/s by supplying the parameters `selectedIndex` and `selectedIndices` for `MaterialDialog.Instance.SelectChoiceAsync()` and `MaterialDialog.Instance.SelectChoicesAsync()`, respectively.\n\n```c#\n...\n\n//Show confirmation dialog for choosing one, with pre-selected choice.\nvar result = await MaterialDialog.Instance.SelectChoiceAsync(title: \"Select a job\", \n                                                             selectedIndex: 1,\n                                                             choices: jobs);\n\n//Show confirmation dialog for choosing one or more, with pre-selected choices.\nvar result = await MaterialDialog.Instance.SelectChoicesAsync(title: \"Select a job\", \n                                                              selectedIndices: new int[] { 1, 0 },\n                                                              choices: jobs);\n\n```\n\n##### Usage and Behavior\nConfirmation dialogs provide both confirmation and cancel buttons. After a confirmation button is tapped, a selection is confirmed. \nIf the cancel button is tapped, or the area outside the dialog, the action is cancelled.\n\nThe confirmation button will only be enabled when an item is selected.\n\n#### Input Dialog\nA type of confirmation dialog that allow users to input text and confirm it.\n\n| Android  | iOS |\n| ------------- | ------------- |\n|\u003cimg src=\"images/inputdialog_android.png\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/inputdialog_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Code\nYou can show an input dialog by calling any of the overload methods of `MaterialDialog.Instance.InputAsync()`.\n\n```c#\n\nvar input = await MaterialDialog.Instance.InputAsync();\n\n```\n\n##### Usage and Behavior\nJust like confirmation dialogs, input dialogs also provide confirmation and cancel buttons. It will return the string value of the input field if the confirm button was clicked. If the cancel button is tapped, or the area outside the dialog, the action is cancelled.\n\n\n#### Loading Dialog\nA modal dialog that is displayed to inform users about a process that is running for an unspecified time.\n\n| Android  | iOS |\n| ------------- | ------------- |\n|\u003cimg src=\"images/loading_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/loading_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Code\n\nYou can show a loading dialog using either of two ways:\n\n- Show in a `using` block. The loading dialog will automatically dispappear when the task/s are done.\n```c#\nusing(await MaterialDialog.Instance.LoadingDialogAsync(message: \"Something is running\"))\n{\n    await Task.Delay(5000) // Represents a task that is running.\n}\n```\n\n- Show by calling the method and assign the return value to a variable, then call the `Dispose` method of the variable to hide the loading dialog after all task/s are done.\n\n```c#\nvar loadingDialog = await MaterialDialog.Instance.LoadingDialogAsync(message: \"Something is running\");\n\nawait Task.Delay(5000) // Represents a task that is running.\n\nawait loadingDialog.DismissAsync();\n```\n\n- Change the dialog's text.\n```c#\nusing(var dialog = await MaterialDialog.Instance.LoadingDialogAsync(message: \"Something is running\"))\n{\n    await Task.Delay(5000) // Represents a task that is running.\n    dialog.Text = \"Something else is running now!\";\n    await Task.Delay(5000) // Represents a task that is running.\n}\n```\n\n\n##### Usage \u0026 Behavior\n\nShow a loading dialog to inform users of a running process in your app.\n\nA loading dialog can never be dismissed by user interaction, even by using Android's back button.\n\n#### Snackbar\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n| Android  | iOS |\n| ------------- | ------------- |\n|\u003cimg src=\"images/snackbar_android.jpg\" alt=\"Android button\" width=\"500\" /\u003e|\u003cimg src=\"images/snackbar_ios.jpg\" alt=\"iOS button\" width=\"573\"/\u003e |\n\n##### Code\n\nYou can show a snackbar by using either of the two overload methods of `MaterialDialog.Instance.SnackbarAsync()`.\n\nBoth methods have this default parameter `message`, which is the message that will display on the snackbar.\n\n- Shows a snackbar with no action. \n    ```c#\n    await MaterialDialog.Instance.SnackbarAsync(message: \"This is a snackbar.\", \n                                                msDuration: MaterialSnackbar.DurationLong);\n    ```\n    - `msDuration` -  The duration, in milliseconds, before the snackbar will disappear. There are pre-defined constants which you can use  in the `MaterialSnackbar` class.\n        - `MaterialSnackbar.DurationShort` - Snackbar will show for 1500 milliseconds.\n        \n        - `MaterialSnackbar.DurationLong` - Snackbar will show for 2750 milliseconds. The default value of `msDuration`.\n        \n        - `MaterialSnackbar.DurationIndefinite` - Snackbar will show indefinitely.\n\n- Shows a snackbar with an action. Returns true if the snackbar's action button was clicked, or false if the snackbar was automatically dismissed.\n    ```c#\n    await MaterialDialog.Instance.SnackbarAsync(message: \"This is a snackbar.\",\n                                                actionButtonText: \"Got It\",\n                                                msDuration: 3000);\n    ```\n    - `actionButtonText` - The text that will appear on the snackbar's button.\n\nYou can also use a snackbar to indicate a task/s running without interrupting the user. You can use the `MaterialDialog.Instance.LoadingSnackbarAsync()` method.\n\nThere are two ways to display a loading snackbar.\n\n- Show in a `using` block. The loading dialog will automatically dispappear when the task/s are done.\n```c#\nusing(await MaterialDialog.Instance.LoadingSnackbarAsync(message: \"Something is running\"))\n{\n    await Task.Delay(5000) // Represents a task that is running.\n}\n```\n\n- Show by calling the method and assign the return value to a variable, then call the `Dispose` method of the variable to hide the snackbar after all task/s are done.\n\n```c#\nvar snackbar = await MaterialDialog.Instance.LoadingSnackbarAsync(message: \"Something is running\");\n\nawait Task.Delay(5000) // Represents a task that is running.\n\nawait snackbar.DismissAsync();\n```\n\n- Change the snackbar's text.\n```c#\nusing(var snackbar = await MaterialDialog.Instance.LoadingSnackbarAsync(message: \"Something is running\"))\n{\n    await Task.Delay(5000) // Represents a task that is running.\n    snackbar.Text = \"Something else is running now!\";\n    await Task.Delay(5000) // Represents a task that is running.\n}\n```\n\n##### Usage \u0026 Behavior\n\nSnackbars can be used to inform users of a process that an app has performed, will perform, or is performing. They can appear temporarily towards the bottom of the screen. Only one snackbar may be displayed at a time.\n\nA snackbar can contain a single action. When setting the duration of how long before it disappears automatically, the action shouldn't be \"Dismiss\" or \"Cancel\".\n\nRead more about snackbars [here](https://material.io/design/components/snackbars.html).\n\n#### Styling Dialogs\n\nYou can customize modal dialogs that are shown using `MaterialDialog.Instance`. \n\n`BaseMaterialDialogConfiguraion`, which the classes `MaterialAlertDialogConfiguration`, `MaterialLoadingDialogConfiguration`, and `MaterialSnackbarConfiguration` inherits, has these properties:\n\n1. `BackgroundColor` - The background color of the dialog. The default value is `Color.White`.\n\n2. `CornerRadius` - The roundness of the dialog's corners. The default value is `2`. For `MaterialSnackbarConfiguration`, the value is `4`.\n\n3. `MessageFontFamily` - The font family of the dialog's message. The default value is set to the value of `MaterialFontConfiguration.Body1`. For `MaterialSnackbarConfiguration`, the default value is set to the value of `MaterialFontConfiguration.Body2`.\n\n4. `MessageTextColor` - The color of the dialog's message. The default value is `#99000000`. For `MaterialSnackbarConfiguration`, the default value is `#DEFFFFFF`\n.\n5. `ScrimColor` - The color that will appear at the back of this dialog. The default value is `#51000000`. For `MaterialSnackbarConfiguration`, the value is `Color.Transparent`.\n\n6. `TintColor` - The color to tint views such as buttons and images. The default value is set to the value of `MaterialColorConfiguration.Secondary`. For `MaterialSnackbarConfiguration`, the default value is `Color.Yellow`.\n\n##### Styling Alert Dialogs\n\n`MaterialAlertDialogConfiguration` class provides properties to be used for customizing an alert dialog. You can pass an instance of this class to any overload methods of `MaterialDialog.Instance.AlertAsync()`.\n\nThe properties of `MaterialAlertDialogConfiguration` class are:\n\n1. `TitleTextColor` - The color of the alert dialog's title. The default color hex value is `#DE000000`;\n\n2. `TitleFontFamily` - The font family of the alert dialog's title. The default value is set to the value of `MaterialFontConfiguration.H6`.\n\n3. `ButtonFontFamily` - The font family of the alert dialog's button/s. The default value is set to the value of `MaterialFontConfiguration.Button`.\n\n4. `ButtonAllCaps` - The boolean value whether the text of the alert dialog's button/s should all be capitalized or not. The default value is `true`.\n\n```C#\nvar alertDialogConfiguration = new MaterialAlertDialogConfiguration\n{\n    BackgroundColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.PRIMARY),\n    TitleTextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ONPRIMARY),\n    TitleFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.Exo2Bold\"),\n    MessageTextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ONPRIMARY).MultiplyAlpha(0.8),\n    MessageFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansRegular\"),\n    TintColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ONPRIMARY),\n    ButtonFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansSemiBold\"),\n    CornerRadius = 8,\n    ScrimColor = Color.FromHex(\"#232F34\").MultiplyAlpha(0.32),\n    ButtonAllCaps = false\n};\n\nawait MaterialDialog.Instance.AlertAsync(message: \"This is an alert dialog\",\n                                         title: \"Alert Dialog\",\n                                         acknowledgementText: \"Got It\",\n                                         configuration: alertDialogConfiguration);\n```\n\u003cbr /\u003e\n\u003cimg src=\"images/alertconfig.png\" width=\"400\" /\u003e\u003cbr /\u003e\n\nYou can also pass the same configuration when you want to style alert dialogs with custom content. But you would\nhave to update also the style of the custom view separately.\n\n\u003cimg src=\"images/custom_content_android_styled.png\" width=\"400\" /\u003e\u003cbr /\u003e\n\n#### Styling Simple Dialogs\n`MaterialSimpleDialogConfiguration` class provides properties to be used for customizing a simple dialog. You can pass an instance of this class to any overload methods of `MaterialDialog.Instance.SelectActionAsync()`.\n\n```c#\nvar simpleDialogConfiguration = new MaterialSimpleDialogConfiguration\n{\n    BackgroundColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.PRIMARY),\n    TitleTextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ON_PRIMARY),\n    TitleFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansSemiBold\"),\n    TextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ON_PRIMARY).MultiplyAlpha(0.8),\n    TextFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansRegular\"),\n    CornerRadius = 8,\n    ScrimColor = Color.FromHex(\"#232F34\").MultiplyAlpha(0.32)\n};\n\nvar result = await MaterialDialog.Instance.SelectActionAsync(title: \"Select an action\",\n                                                             actions: new string[] { \"Open in new tab\", \"Open in new window\", \"Copy link address\", \"Download link\" },\n                                                             configuration: simpleDialogConfiguration);\n```\n\n\u003cbr /\u003e\n\u003cimg src=\"images/simpledialogconfig.jpg\" width=\"400\" /\u003e\n\n#### Styling Confirmation Dialogs\n`MaterialConfirmationDialogConfiguration` class provides properties to be used for customizing a confirmation dialog. You can pass an instance of this class to any overload methods of `MaterialDialog.Instance.SelectChoiceAsync()` or `Material.Instance.SelectChoicesAsync()`.\n\n```c#\nvar confirmationDialogConfiguration = new MaterialConfirmationDialogConfiguration\n{\n    BackgroundColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.PRIMARY).AddLuminosity(-0.1),\n    TitleTextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ON_PRIMARY),\n    TitleFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansSemiBold\"),\n    TextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ON_PRIMARY).MultiplyAlpha(0.8),\n    TextFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansRegular\"),\n    CornerRadius = 8,\n    ButtonAllCaps = false,\n    ButtonFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansSemiBold\"),\n    ControlSelectedColor = Color.White,\n    ControlUnselectedColor = Color.White.MultiplyAlpha(0.66),\n    TintColor = Color.White,\n    ScrimColor = Color.FromHex(\"#232F34\").MultiplyAlpha(0.32)\n};\n\nvar result = await MaterialDialog.Instance.SelectChoiceAsync(title: \"Select a  job\",\n                                                             choices: /*choices list*/,\n                                                             configuration: confirmationDialogConfiguration);\n```\n\n\u003cbr /\u003e\n\u003cimg src=\"images/confirmdialogconfig.jpg\" width=\"400\" /\u003e\n\n#### Styling Input Dialogs\n`MaterialInputDialogConfiguration` class provides properties to be used for customizing an input dialog.\nYou can pass an instance of this class to any overload methods of `MaterialDialog.Instance.InputAsync()`.\n\nThe input type of the input field can be set by using this configuration.\n\n```c#\nvar config = new MaterialInputDialogConfiguration()\n{\n    InputType = MaterialTextFieldInputType.Password,\n    CornerRadius = 8,\n    BackgroundColor = Color.FromHex(\"#2c3e50\"),\n    InputTextColor = Color.White,\n    InputPlaceholderColor = Color.White.MultiplyAlpha(0.6),\n    TintColor = Color.White,\n    TitleTextColor = Color.White,\n    MessageTextColor = Color.FromHex(\"#DEFFFFFF\")\n};\n\nvar input = await MaterialDialog.Instance.InputAsync(title: \"Deactivate account\",\n                                                     message: \"To continue, please enter your current password\",\n                                                     inputPlaceholder: \"Password\",\n                                                     confirmingText: \"Deactivate\",\n                                                     configuration: config);\n```\n\n\u003cbr /\u003e\n\u003cimg src=\"images/inputdialogconfig.png\" width=\"400\" /\u003e\n\n#### Styling Loading Dialogs\n\n`MaterialLoadingDialogConfiguration` class provides properties to be used for customizing a loading dialog. You can pass an instance of this class to any overload methods of `MaterialDialog.Instance.LoadingDialogAsync()`.\n\n```c#\nvar loadingDialogConfiguration = new MaterialLoadingDialogConfiguration()\n{\n    BackgroundColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.PRIMARY),\n    MessageTextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ONPRIMARY).MultiplyAlpha(0.8),\n    MessageFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansRegular\"),\n    TintColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ONPRIMARY),\n    CornerRadius = 8,\n    ScrimColor = Color.FromHex(\"#232F34\").MultiplyAlpha(0.32)\n};\n\nawait MaterialDialog.Instance.LoadingDialogAsync(message: \"Something is running...\",\n                                                 configuration: loadingConfiguration);\n```\n\u003cbr /\u003e\n\u003cimg src=\"images/loadingconfig.png\" width=\"400\" /\u003e\n\n#### Styling Snackbars\n\n`MaterialSnackbarConfiguration` class provides properties to be used for customizing a snackbar. You can pass an instance of this class to any overload methods of `MaterialDialog.Instance.SnackbarAsync()` or `MaterialDialog.Instance.LoadingSnackbarAsync()`.\n\n```c#\nvar snackbarConfiguration = new MaterialSnackbarConfiguration()            \n{\n    BackgroundColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.PRIMARY),\n    MessageFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansRegular\"),\n    ButtonAllCaps = true,\n    ButtonFontFamily = XF.Material.Forms.Material.GetResource\u003cOnPlatform\u003cstring\u003e\u003e(\"FontFamily.OpenSansSemiBold\"),\n    TintColor = Color.White,\n    MessageTextColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.ONPRIMARY).MultiplyAlpha(0.8)\n}\n\nawait MaterialDialog.Instance.SnackbarAsync(message: \"This is a snackbar.\"\n                                            actionButtonText:  \"Got It\",\n                                            configuration: snackbarConfiguration);\n```\n\u003cbr /\u003e\n\u003cimg src=\"images/snackbarconfig.png\" width=\"400\" /\u003e\n\n#### Setting a global style for each type of dialogs\n\nYou can set the global styles of each dialog by using the `MaterialDialog.Instance.SetGlobalStyles()` method.\n\nYou can still override these styles be passing the configuration object when showing an alert dialog, loading dialog, simple dialog, confirmation dialog, and snackbar.\n\n### Material Resources \nYou can create Material-based resources which will be used by your app. This library strictly follows Google's Material Design, following principles of good design while maintaining a common UI across platforms.\n\nThe `MaterialConfiguration` class allow you to define your theme and combine it along with the built in resource dictionary to your app.\n\n#### Color\n\nYou can fully express your branding with the use of the baseline Material color theme, while creating a uniform, cross-platform design.\n\nUse the [Color Tool](https://material.io/tools/color/) to create your palette. This tool provides a preview of what your UI will look like while keeping accessibility.\n\n\u003cimg src=\"images/color.jpg\" width=\"400\" /\u003e\n\nYou can define your color theme with the `MaterialColorConfiguration` class. The properties of the class are:\n\n1. `Primary` - Displayed most frequently across your app. `MaterialNavigationPage` uses this color as its default `BarBackgroundColor`.\n\n2. `PrimaryVariant` - A tonal variation of the `Primary` color. Used for coloring the status bar.\n\n3. `Secondary` - Accents select parts of your UI. If not defined, it will use the `Primary` color. `MaterialButton` (including the buttons in [Alert Dialogs](#alert-dialog)), `MaterialTextField` and `MaterialCircularLoadingView` uses this color value as their default accent color.\n\n4. `SecondaryVariant` - A tonal variation of the `Secondary` color.\n\n5. `Background` - The underlying color of an app's content. The root page and pages pushed by the `MaterialNavigationPage` control will have their `BackgroundColor` property set to this value by default, unless there is already a value defined in the page.\n\n6. `Error` - The color used to indicate error status.\n\n7. `Surface` - The color of surfaces such as cards. `MaterialCard` uses this color value as its `BackgroundColor`.\n\n8. `OnPrimary` - A color that passes accessibility guidelines for text/iconography when drawn on top of the `Primary` color. `MaterialNavigationPage` uses this color as its `BarTextColor` by default.\n\n9. `OnSecondary` - A color that passes accessibility guidelines for text/iconography when drawn on top of the `Secondary` color. `MaterialButton` types `Elevated` and `Flat` use this color value as their default `TextColor`.\n\n10. `OnBackground` - A color that passes accessibility guidelines for text/iconography when drawn on top of the `Background` color.\n\n11. `OnError` - A color that passes accessibility guidelines for text/iconography when drawn on top of the `Error` color.\n\n12. `OnSurface` - A color that passes accessibility guidelines for text/iconography when drawn on top of the `Surface` color.\n\nIf you did not set the `ColorConfiguration` property of the `MaterialConfiguration` class in [here](#adding-the-material-resources), it will use a default color theme.\n\n#### Typography\nAs stated [here](https://material.io/design/typography), you can use typography to present your design and content as clearly and efficiently as possible.\n\n##### Type Scale\nThe Material Design type scale includes a range of contrasting styles that support the needs of your product and its content. These are resusable categories of text, each with an intended application and meaning.\n\nThis library offers the same type scales, each can be applied and reused in your app.\n\n\u003cimg src=\"images/typescale.jpg\" width=\"400\" /\u003e\u003cbr /\u003e\n\n| TypeScale                     | Font Size | Font Attribute | Letter Spacing |\n| ----------------------------- | --------- | -------------- | -------------- |\n| `MaterialTypeScale.H1`        | 96        | Regular        | -1.5           |\n| `MaterialTypeScale.H2`        | 60        | Regular        | -0.5           |\n| `MaterialTypeScale.H3`        | 48        | Regular        | 0              |\n| `MaterialTypeScale.H4`        | 34        | Regular        | 0.25           |\n| `MaterialTypeScale.H5`        | 24        | Regular        | 0              |\n| `MaterialTypeScale.H6`        | 20        | Bold           | 0.15           |\n| `MaterialTypeScale.Subtitle1` | 16        | Regular        | 0.15           |\n| `MaterialTypeScale.Subtitle2` | 14        | Bold           | 0.1            |\n| `MaterialTypeScale.Body1`     | 16        | Regular        | 0.5            |\n| `MaterialTypeScale.Body2`     | 14        | Regular        | 0.25           |\n| `MaterialTypeScale.Button`    | 14        | Bold           | 0.75           |\n| `MaterialTypeScale.Caption`   | 12        | Regular        | 0.4            |\n| `MaterialTypeScale.Overline`  | 10        | Regular        | 1.5            |\n\n\n- \u003cb\u003eHeadlines\u003c/b\u003e - The largest text on the screen, and used for short, important text or numerals.\n\n- \u003cb\u003eSubtitles\u003c/b\u003e - Smaller than headlines. Typically used for medium-emphasis text that is shorter in length.\n\n- \u003cb\u003eBody\u003c/b\u003e - Used for long-form writing as it works well for small text sizes.\n\n- \u003cb\u003eCaption and Overline\u003c/b\u003e - Smallest font sizes. Used sparingly to annotate imagery or to introduce a headline.\n\n- \u003cb\u003eButton\u003c/b\u003e - Used for different types of buttons. `MaterialButton` automatically applies this style.\n\nRead more about applying the type scale [here](https://material.io/design/typography/#applying-the-type-scale).\n\n##### Applying a Type Scale\nYou can apply a type scale to a text using `MaterialLabel`.\n\n##### Setting a Font Family to a Type Scale\nThe `MaterialFontConfiguration` class allows you to set a specific font to a type scale.\n\n#### Adding the Material Resources\nThe code below shows a complete example on how to include the `MaterialColorConfiguration` and `MaterialFontConfiguration`.\n\n```xml\n\u003cApplication x:Class=\"XF.MaterialSample.App\"\n    xmlns=\"http://xamarin.com/schemas/2014/forms\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n    xmlns:mtrl=\"clr-namespace:XF.Material.Forms.Resources;assembly=XF.Material\"\n    xmlns:mtrltypo=\"clr-namespace:XF.Material.Forms.Resources.Typography;assembly=XF.Material\"\u003e\n    \u003cApplication.Resources\u003e\n\n        \u003cOnPlatform x:Key=\"FontFamily.RobotoRegular\"\n            x:TypeArguments=\"x:String\"\n            Android=\"Fonts/Roboto-Regular.ttf#Roboto-Regular\"\n            iOS=\"Roboto-Regular\" /\u003e\n        \u003cOnPlatform x:Key=\"FontFamily.RobotoMedium\"\n            x:TypeArguments=\"x:String\"\n            Android=\"Fonts/Roboto-Medium.ttf#Roboto-Medium\"\n            iOS=\"Roboto-Medium\" /\u003e\n\n        \u003cmtrltypo:MaterialFontConfiguration x:Key=\"Material.Font\"\n            Body1=\"{StaticResource FontFamily.RobotoRegular}\"\n            Body2=\"{StaticResource FontFamily.RobotoRegular}\"\n            Button=\"{StaticResource FontFamily.RobotoMedium}\"\n            Caption=\"{StaticResource FontFamily.RobotoRegular}\"\n            H1=\"{StaticResource FontFamily.RobotoRegular}\"\n            H2=\"{StaticResource FontFamily.RobotoRegular}\"\n            H3=\"{StaticResource FontFamily.RobotoRegular}\"\n            H4=\"{StaticResource FontFamily.RobotoRegular}\"\n            H5=\"{StaticResource FontFamily.RobotoRegular}\"\n            H6=\"{StaticResource FontFamily.RobotoMedium}\"\n            Overline=\"{StaticResource FontFamily.RobotoRegular}\"\n            Subtitle1=\"{StaticResource FontFamily.RobotoRegular}\"\n            Subtitle2=\"{StaticResource FontFamily.RobotoMedium}\" /\u003e\n\n        \u003cmtrl:MaterialColorConfiguration x:Key=\"Material.Color\"\n            Background=\"#EAEAEA\"\n            Error=\"#B00020\"\n            OnBackground=\"#000000\"\n            OnError=\"#FFFFFF\"\n            OnPrimary=\"#FFFFFF\"\n            OnSecondary=\"#FFFFFF\"\n            OnSurface=\"#000000\"\n            Primary=\"#011A27\"\n            PrimaryVariant=\"#000000\"\n            Secondary=\"#063852\"\n            SecondaryVariant=\"#001229\"\n            Surface=\"#FFFFFF\" /\u003e\n\n        \u003cmtrl:MaterialConfiguration x:Key=\"Material.Configuration\"\n            ColorConfiguration=\"{StaticResource Material.Color}\"\n            FontConfiguration=\"{StaticResource Material.Font}\" /\u003e\n\n    \u003c/Application.Resources\u003e\n\u003c/Application\u003e\n```\n\nThen in your `App.xaml.cs`, pass the resource key of the `MaterialConfiguration` object.\n\n`MaterialFontConfiguration`'s and `MaterialColorConfiguration`'s properties are optional, they always have a default value. For `MaterialFontConfiguration` the default font is the system font. \n\n```c#\n// Xamarin.Forms\n\npublic App()\n{\n    InitializeComponent();\n    XF.Material.Forms.Material.Init(this, \"Material.Configuration\");\n}\n\n```\n\nYou can also instantiate the `MaterialConfiguration` object via C# code.\n\n```c#\n// Xamarin.Forms\n\npublic App()\n{\n    InitializeComponent();\n    XF.Material.Forms.Material.Init(this, new MaterialConfiguration\n    {\n        ColorConfiguration = new MaterialColorConfiguration\n        {\n            // Set properties\n        },\n        FontConfiguration = new MaterialFontConfiguration\n        {\n            // Set properties\n        }\n    });\n}\n\n```\n\n#### Retrieving a Material Resource\n\nThe static properties `ColorConfiguration` and `FontConfiguration` of `Material` class allows you to retrieve the resource values that you have set.\n\nYou can also use`XF.Material.Forms.Material.GetResource\u003cT\u003e(string key)` method that allows you to get a resource value of the specified type.\n\nThe static `MaterialConstants` class provides a list of constant Material resource keys.\n\n```c#\n//Get color resource, use either\nColor primaryColor = XF.Material.Forms.Material.GetResource\u003cColor\u003e(MaterialConstants.Color.PRIMARY);\nColor primaryColor = XF.Material.Forms.Material.Color.Primary;\n\n//Get font family resource, use either\nstring body1Font = XF.Material.Forms.Material.GetResource\u003cstring\u003e(MaterialConstants.FontFamily.BODY1);\nstring body1Font = XF.Material.Forms.Material.FontFamily.Body1;\n```\n\n### Changing the Status Bar Color\nYou can change the color of the status bar by using the `Material.PlatformConfiguration.ChangeStatusBarColor(Color color)` method.\n\nThe status bar color is automatically changed depending on the value of `MaterialColorConfiguration.PrimaryVariant`.\n\n## Android Compatibility Issues\nIt is recommended to use this library for applications targeting Android 5.0 (Lollipop) or higher for better rendering.\n\nIf targeted below Android 5.0, the following issues can be seen:\n\n- Material shadows, like that of `MaterialCard` and `MaterialButton`, will not show.\n- On Android 4.2 (Jellybean), `MaterialButton` is larger. Explanation is provided in this [issue](https://github.com/contrix09/XF-Material-Library/issues/2#issuecomment-417819032).\n- Letter spacing of typescale effects won't work for devices running below Android 5.0 (Lollipop). The API for setting the letter spacing was added in Android 5.0.\n\n## Thanks and Appreciation\nSpecial thanks to the following libraries I used for this project:\n- [Rg.Plugins.Popup](https://github.com/rotorgames/Rg.Plugins.Popup)\n- [LottieXamarin](https://github.com/Baseflow/LottieXamarin)\n- [Xamarin.Essentials](https://github.com/xamarin/Essentials)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBaseflow%2FXF-Material-Library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBaseflow%2FXF-Material-Library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBaseflow%2FXF-Material-Library/lists"}