I would like to take some time to expand on what Material Design is and the approach we have been taking when implementing it in the new version of Onsen UI.
In the previous version of Onsen UI, there was only one theme and it only tried to mimic the visual design of iOS. This is not a problem as long as you only target iOS, but since the app will look like an iOS app, the users might not feel at home when they run the app on an Android device. Things like the navigation bar, tabs, buttons all look completely different in iOS and Android. There are even some components that exist in Android that don’t even have a counterpart in the visual language of iOS native apps.
An important thing to note when talking about hybrid apps is that even though the developer might regard it as nothing but a web app, from a user’s perspective the app is actually more often compared to native apps since that is what the user is normally running on his or her device. In this case the user’s perspective more important. You should not be able to distinguish an ideal hybrid app from it’s native equivalent. Of course, it might be impossible to get the exact same performance from a hybrid app, but for the visual appearance it is possible to get very close. That is what we’re trying to do with Onsen UI. By adding Material Design we are getting one step closer to that ideal.
Material Design is a specification
The full specification can be found here. Since Google have been kind enough to release a full specification, anyone can develop their own library of Material Design components. While developing Onsen UI 2.0 we are trying to follow this specification in order for apps built using our library to resemble native Android apps as closely as possible.
Material Design in Onsen UI
When adding new components to Onsen UI we are very careful to follow the specification precisely. In the app below, we have tried to mimic the design of the native Contacts App that is available in most Android devices. If you have an Android phone, please fire up the app yourself and compare them.
These examples show some behavior that is still not released but will be available in the next beta version. Some of the things we are releasing in
- Automatic style switching based on platform
- A new
<ons-input>element that supports
typeattribute so it can be used for both text input, checkboxes, radio buttons, etc.
<ons-range>element that renders as a slider.
- All async methods now return a Promise object.
- The ripple effect has been improved to look more like the native version.
- Lots of performance tweaks, mainly to remove a lot of memory overhead and speed up initialization of some components.
Making a simple app
All Onsen UI apps start with an element called
<ons-page> which serves as the root element of the app. Inside the
<ons-page> we will go ahead and add an
<ons-toolbar> element to add a fixed toolbar to the top of the app.
In order to populate the toolbar we can add some buttons with icons. To do that we will use the
<ons-toolbar-button> and the
The next step is to add navigation to our app. In native apps you will often navigate using tabs, so by using the
<ons-tabbar> element and the
<ons-tab> elements I will create an app with two tabs. Underneath the toolbar we add the following code:
Finally we can add a floating action button to one of the tabs. In the Material Design spec it says that the floating action button should represent the primary action of the app. In our app it can be used to add some data so we will add a plus icon inside it. The floating action button is represented by the
<ons-fab> element in Onsen UI.
<ons-fab position="bottom right">
Let’s go ahead and add a list with some form elements to create a settings page in the left tab. For the full code please take a look at this gist.
This UI was created using only Onsen UI 2.0 components and I didn’t write any custom CSS at all. As mentioned earlier, the UI will automatically transform based on the platform. This is how it would look on iOS:
We are continuously developing Onsen UI to make it the best hybrid app framework we can possibly make. Since launching our Community forum we have received lots of great feedback from the users. If you have any questions don’t hesitate to post there.
Currently we are focusing on fixing bugs in the core framework and developing bindings for Angular 2.0 and React.js. We are moving along nicely and will be able to support both Angular 2.0 and React.js when we reach the stable release.
If you are having trouble using the beta or if you found a bug, please open an issue and we will take a look at it as soon as we are available.