Sunday, May 31, 2015

Dipping Toes into Material Design

The first thing that I noticed is that the Android folks (Google) are pushing a new design philosophy (infrastructure) called Material Design starting with the Android 5.0 / API 21 release.  In order to allow for wide deployment of this design, they have included key elements into the v7 support libraries (allowing for usage in versions greater than or equal to Android 2.1 / API 7).

Incidentally, virtually 100% of Android devices in use are greater than or equal to Android 2.1 / API 7; per Dashboard | Android Developer.

To ease into Material Design for Android, thought to first spin up on AngularJS's implementation of Material Design.
Angular Material - Introduction
https://material.angularjs.org/latest/#/
The comparable elements that are in the v7 support library are:
  • Theming
  • Toolbar
  • Tabs
  • Card
  • Toast (aka., Snackbar)
Some of the challenges in getting up to speed with Angular Material were:
  • It is important to understand AngularJS to start of with.
  • Knowing CSS media queries.
  • Angular Material is build upon the new Flexbox browser feature; which takes some getting used to.
The following is a basic implementation of Angular Material.
AngularJS: Material Design Demo - 5
http://jsfiddle.net/sckmkny/0far55wa/

No comments:

Post a Comment