Menu hamburger icon

What is Material Design?

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.

We have also gone one step further by adding automatic styles. What this means is that an Onsen UI app will use the Material Design components when running on the Android platform while it automatically switches to the flat design when running on iOS. This makes it possible to write truly hybrid apps where you can use not only the same JavaScript code on both platforms but even run the same HTML on Android and iOS and still give a close-to-native experience to your users.

Build a Places App with Foursquare and Google Maps using Onsen UI and AngularJS


In this tutorial we are going to learn how to use the Foursquare API and Google Static Maps API to create a Places App with Onsen UI and AngularJS. In this app we will be able to search for a particular place and filter the results by food, shops and outdoor places. There will be also an integrated static map which will lead to the Google Website once clicked.