Material Design in Onsen UI
We have some exciting news for all of you developing hybrid apps for Android! Onsen UI 2.0 is adding Material Design!
Since Onsen UI hybrid app framework can be used to create apps for iOS and Android, it makes sense to provide native-like UI components for both platforms. That’s why we are currently implementing Material Design, adding new components alongside the current iOS based ones.
Many users have requested the Material Design support. We’ve listened to those voices and are working hard to make it available for you as soon as possible. Material Design is currently being implemented in parallell with Onsen UI 2.0, so get ready for native-like Android components included in the next major version.
We are excited to announce closing of alpha. There are still some important tasks remaining, but most parts are already in place.
We just finished implementing a new component called <ons-splitter>, which is a responsive component that combines a draggable slide menu with a two-column tablet layout. This component simplifies making apps that look great on both tablets and phones, using the same code-base. We will provide an overview of this component and other new features in upcoming blog posts.
New components
In addition to typography and page layout, the Material Design spec introduces a collection of UI components. Some are already available in Onsen UI, and for those we will implement new styles that conform to the spec. In the case where a component doesn’t currently exist in Onsen UI, we will add it as a new Custom Element.
A bunch of Material Design components have already been created and merged into the master branch. Feel free too give it a test ride! The examples in the following section are all running with the current Onsen UI codebase. They are all interactive, so go ahead and play around with them.
Floating action button
We have added a component called <ons-fab>. It displays “Floating action button”, which is a circular button that performs the primary action of an application when pressed.
When clicking or tapping the button, it shows a “ripple” effect, which is actually implemented as a separate custom element called <ons-ripple>. In Android apps the position of the button is usually fixed, but for the purpose of this blog it’s displayed inline.
The way to use it is really simple and requires very little markup.
The <ons-ripple> component can be attached to any element to create a ripple effect.
Speed dial
With the <ons-speed-dial> component, the Floating action button displays a menu with related actions when pressed. It’s useful when there are several important actions performed by the app.
This one is also really easy to integrate in your apps and its behavior can be customized using attributes.
Toggle switch
The <ons-switch> used to only display a switch similar to the one in iOS native apps. We have added a modifier attribute called material to change the style of the component. The functionality is just like a normal <ons-switch>
In the current version the switch will only switch value when tapped or clicked. We will make it possible to toggle the switch by dragging, as well to give a more native experience.
Progress indicator
This is another component that didn’t already exist in Onsen UI. A new element called <ons-progress> has been added to display a progress indicator.
The element comes in two flavors. There is a horizontal progress bar, as well as a circular loader, and both can be displayed using the same custom element. They both have an “indeterminate” mode that displays an infinite looping animation that can be used when the total progress is unknown.
The behavior can be customized using custom attributes.
Form elements
We have also implemented new form elements like checkboxes, radio buttons and range sliders.
More components
These are just some of the components that are already merged to the master branch. We will keep adding components like input elements, toasts, dialogs and icons.
If there is a component you would like to see in Onsen UI, please comment below or open an issue on GitHub. We are always open for suggestions.
We need your help!
Onsen UI is an open source project and a community effort. There is nothing that makes us happier than getting contributions from the community.
A good place to start is the GitHub issues page. If there’s an issue that you would like to solve, go ahead and fork the repository and make a Pull request. We also appreciate new features. Upon receiving a pull request, we will review it as soon as possible.
Another way to contribute is by helping other users on Gitter or Stack Overflow.
Originally published at onsen.io on September 14, 2015.
