Menu hamburger icon

Posts for material design

Style your app automatically with Onsen UI

Automatic Styling

As we mentioned in a previous post, we just released a new killer feature called automatic styling for Onsen UI 2.0. This feature allows you to style your app for both iOS and Android automatically with little to no effort.

In this post we will explain how to make a sample To-Do app step by step using as many Onsen UI 2.0 features as we can: implementation in Vanilla JavaScript (framework agnostic), automatic styling, notification promises and combination of Navigator + Tabbar + Splitter (new sliding menu) in the same app.

Preview: New features in Onsen UI beta.7

Automatic Styling

The new beta version of Onsen UI 2.0 is out! Apart from several fixes and performance improvements, we are introducing a bunch of new features that will make you fall for Onsen UI 2.0 if you didn’t already. Automatic styling, new structure for list items, promises for asynchronous methods and more.

In this post we will briefly explain these new features and give some quick examples about how to use them. You can also see a live demo of these features implemented in Vanilla JavaScript.

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.

Announcing the Onsen UI 2.0 Beta

Announcing Onsen UI 2.0 Beta

After several months of hard work we are happy to announce the release of the Onsen UI 2.0 beta version. This release comes packed with new features and beautiful UI components. We have created a webpage solely dedicated to the Onsen UI 2.0 beta, complete with documentation and design patterns.

One of the new features we are most excited about is the introduction of Material Design into Onsen UI. Material Design lets you easily create a native-like experience for Android users. Of course, the original flat theme is still included so you can now easily create apps that look good and native on both iOS and Android.

Although this is a completely new version of Onsen UI, we realize that a lot of users have apps made using Onsen UI 1.x and want to upgrade. For this reason we want to make migration as easy and painless as humanly possible. We provide a binding library for AngularJS that is almost 100% backwards compatible.

Material Design in Onsen UI

Onsen UI 2.0 Material Design

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.