Material Design for Ionic

Ionic apps around the world

Ionic Framework is an amazing project and it’s helped over 320,000+ hybrid applications to be built and submitted to the app stores. But what it lacks is Google’s Material Design for the Android platform.

Why Material Design?

Ionic’s success [in part] is the way it translates the “look and feel” of your application across platforms, whether that’s the transition between views or the alignment of the title.

Yet Android is a second class citizen in Ionic, the “look and feel” is a midway between iOS and Android, using subtle changes but never actually reaching a true Android experience.

This isn’t a slight against the Ionic team, Android has come a long way since the early days, where there was a wider level of inconsistency between Android versions and devices. Ionic had to be opinionated about it’s design choices.

Ionic 2 will feature Material Design, but for those still using Ionic 1 there won’t be any official support for Material Design.

Introducing Material Design for Ionic

The project’s aims are simple. Bring Material Design’s “look and feel” to the Android platform within Ionic; allowing Ionic Developers to build great apps without having to add custom directives or write logic to enable said “look and feel”.

Buttons should automatically use the ripple animation on Android, when a user interacts with it; the developer shouldn’t have to declare the button needs to enable the animation.

Primary action buttons should be displayed as Fabs etc.

Using Material Design Lite as a base to ensure the guidelines are met, each component within Ionic will be given the Material Design treatment.

Ionic Components using Material Design

The goal is to provide a complete set of Ionic components utilising the Material Design guidelines, then adding animation and transitions for elements on the screen, just like paper.

Many developers will want to include Material Design for their iOS applications, this will be possible by overriding the platform configuration through a dedicated config provider, as simple as:

$ionicMaterialConfigProvider.enableForAllPlatforms();

It’s still early days for the project, but support from the Ionic community and Drifty Co have been incredible.

I hope you’ll come with us on this journey. I’m releasing RC1 31st August.

Checkout the project here: https://github.com/delta98/ionic-material-design-lite


What’s next

UI8 Material UI Kit

Building onto the foundation set by the open source project, I am currently kickstarting a series of premium templates. These templates won’t be available for free or found on github.

From as little as £8/$15 you can help make it happen. Check out the Kickstarter, back it and share it.

Thank you.