{"id":19806,"date":"2015-07-13T16:35:00","date_gmt":"2015-07-13T23:35:00","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=19806"},"modified":"2015-07-13T16:35:00","modified_gmt":"2015-07-13T23:35:00","slug":"add-beautiful-material-design-with-the-android-support-design-library","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/add-beautiful-material-design-with-the-android-support-design-library\/","title":{"rendered":"Beautiful Material Design with the Android Support Design Library"},"content":{"rendered":"

\t\t\t\tIt was clear when Google introduced Material Design that it would shift the Android landscape even more than its Holo predecessor, and thus far the journey for developers to implement those new design principles in their apps has been a bit of a long and bumpy ride.<\/p>\n

\"Material<\/p>\n

In the beginning, Material Design was only available on devices running Android 5.0+ Lollipop, but over time the Support Library v7 AppCompat was updated to enable Material theming<\/a> on older versions of Android.<\/p>\n

Theming, though, is only a part of the equation. Material Design also comprised a lot of new UI components and interactions that were not present in AppCompat. This is where the new Android Support Design Library comes in, offering a wide range of implementations of several portions of the Material Design specification in a fully backwards compatible fashion when combined with Support Library v7 AppCompat.<\/p>\n

Get The Support Design Library<\/h2>\n

If you haven’t gotten up to speed yet on switching your apps to use AppCompatActivity<\/code> and AppCompat theming, be sure to first read through our entire blog post<\/a> on how to get set up. Once your app has been AppCompat enabled, head over to the component store from inside of Visual Studio or Xamarin Studio and Search for “Android Support Design”.<\/p>\n

\"Component<\/p>\n

Add the component to your project and the Support Design Library NuGet, and samples will automatically be installed in your project. Be sure to browse the sample for an overview of everything that Support Design Library has to offer.<\/p>\n

Now that you’re set up, let’s take a look at a few of my favorite new widgets that are built into this awesome library.<\/p>\n

Floating Labels with TextInputLayout<\/h2>\n

The EditText<\/code> widget offers a wide range of customizations, including my favorite, the Hint<\/code> property, but there is one small issue with it. While the Hint property displays an indication of what your users should enter when in its unfocused state, it vanishes when the user taps the control or if anything is entered in the EditText field. This usually means you have to add a separate label to your fields to add context.<\/p>\n

Not anymore! The TextInputLayout can now wrap any EditText and will automatically animate the Hint to be displayed right above the EditText widget.<\/p>\n

\n<android.support.design.widget.TextInputLayout\n    android:layout_width="match_parent"\n    android:layout_height="wrap_content">\n    <EditText\n        android:id="@+id\/username"\n        android:layout_width="fill_parent"\n        android:layout_height="wrap_content"\n        android:hint="Username" \/>\n<\/android.support.design.widget.TextInputLayout>\n<\/pre>\n
Here it is in action:\n\"Android<\/p>\n
Snackbar: Powerful & Enhanced Toast<\/h2>\n
Toasts<\/a> on Android are normally used to display short lived information that has no interaction.<\/p>\n
The new Snackbar<\/code> component on the other hand, provides a similar lightweight feedback mechanism but lets you specify extra actions available to users. If you’ve used toasts before, the core API will look familiar:<\/p>\n
\nSnackbar\n  .Make (parentLayout, "Message sent", Snackbar.LengthLong)\n  .SetAction ("Undo", (view) => { \/*Undo message sending here.*\/ })\n  .Show (); \/\/ Don\u2019t forget to show!\n<\/pre>\n
\"Android<\/p>\n
You should note the use of a View<\/code> as the first parameter to Make ()<\/code> — Snackbar will attempt to find an appropriate parent of the Snackbar’s view to ensure that it’s anchored to the bottom.<\/p>\n
There are several instances where the Snackbar will come in handy. Take the example above of a login page: you may want to use the new Snackbar to display information when the user attempts to log in. Additionally, if your user enters an incorrect password, you could supply an optional action to clear the password field:<\/p>\n
\nloginButton.Click += (sender, e) => {\n  if (string.IsNullOrWhiteSpace (username.Text)) {\n    Snackbar.Make (drawerLayout, "Fill in username.", Snackbar.LengthLong)\n\t    .SetAction ("OK", (v) => { })\n\t    .Show ();\n  } else if (password.Text != "monkey") {\n    Snackbar.Make (parentLayout, "Invalid Password", Snackbar.LengthLong)\n            .SetAction ("Clear", (v) => { password.Text = string.Empty; })\n            .Show (); \n  } else {\n    Snackbar.Make (parentLayout, "You are now Logged in!", Snackbar.LengthLong)\n            .Show ();\n  }\n};\n<\/pre>\n
\"Snackbar<\/p>\n
Effective Navigation in Android<\/h2>\n
\"NavigationThere are several ways to handle navigation in your app, including dashboards, tabs, and even drop down spinners. My favorite, though, is the Navigation Drawer.<\/p>\n
By providing a simple, yet highly customizable slide out menu, the Navigation Drawer is an ideal pattern for a lot of apps. Implementing the Navigation Drawer was always a bit of a pain, but this has been greatly simplified by combing the new  NavigationView<\/code> class with the standard DrawerLayout<\/code>.<\/p>\n
The NavigationView<\/code> makes it easier to display menu items by leveraging the standard menu resource system that you’re already familiar with. It also provides a simplified way of adding a header layout to the top of your NavigationView. You can easily have a beautiful and functional Navigation Drawer up and running with just a few lines of code.<\/p>\n
Setup<\/h3>\n
The root of your app will be a standard Android XML that will house three important items:<\/p>\n