Skip to content
mikepham edited this page Jul 7, 2015 · 4 revisions

Material Design for the People!

Project Goal

The goal of the project is to bring native Material Design elements to Xamarin.Forms on Android. As such, new widgets will be created where appropriate along with replacing existing widgets with their AppCompat counterparts. We want to strive for the following tenets:

  • Everything should be a drop-in replacement with a minimal amount of code setup as possible. If additional configuration is needed, it should be debated before implementing it.
  • We want to re-use existing Xamarin.Forms infrastructure where possible. In other words, a Button should still be a normal Xamarin.Forms Button in XAML, but rendered with an AppCompatButton behind the scenes. Note that behaviors should not change. A MasterDetailPage should still act the same even with the new look and feel.
  • We want to enable new Material Design widgets that might not be truly cross-platform. Developers that use the framework should be aware of which controls are not compatible across platforms as there is no equivalent idiom.
  • If there's a choice between breaking the cross-platform nature of Xamarin.Forms versus Material Design guidelines, always err on the side of cross-platform.

Some parts of the project might not live forever. The goal is to provide Material Design themes now until Xamarin provides this by default. Hence, the we want the smallest footprint possible so that when Xamarin does implement Material Design themselves, it should be as simple as removing the derived activity and setup code.

For an explanation of how AppCompatDelegate is integrated with Xamarin.Forms, please see this blog post.

Future Goals

  • Implement those controls that aren't cross-platform to have iOS/WindowsPhone renderers. Nice to have, not a project goal.

Using the Project

Setting up your project (Quick Start)

  1. Create a typical Xamarin.Forms Android project.
  2. Install the AppCompat package.
  3. Replace the MainActivity base class with AppCompatFormsApplicationActivity.
  4. Setup your styles.xml or themes.xml file appropriately. You can now use Theme.AppCompat themes.
  5. Optionally install the AppCompat Renderers package. Don't forget to call FormsAppCompat.EnableAll in order to enable renderers.

Additional Utilities and Types

  • Font and Typeface caching via Xamarin Forms Labs.
  • Common EventListeners that can be used passing in lambdas as callbacks when wiring up Android listeners. Currently, only the OnClickListener is provided.
  • Common ImageSource conversion and resizing extensions.
  • InflateViewRenderer that allows inflating custom controls via layouts and using them as part of a Xamarin.Forms renderer.