Cordova is a great platform for building native feeling mobile applications on Android and iOS with web technology like HTML, CSS,
and JavaScript. But what about the getting the native look out of these applications?
Obviously you have to use or write a CSS library which include all the UI components from the Android system and styles the appropriately.
Luckily developers have already created these types of frameworks and today I’m going to explore two of them for making web and Cordova applications look like native Android applications.
What is Ratchet?
Ratchet is a UI library for making web applications that look like native Android and iOS applications.
It was created in 2012 as a library for creating prototype web and Cordova applications for iOS.
Soon the Ratchet team realized their library could be used as a full featured UI framework. They integrated it into Bootstrap and added Android support. Currently it’s party of the Bootstrap project.
The greatest thing about Ratchet is that the look and feel of your application can be changed from Android to iOS by just changing the source of a CSS file.
However, Ratchet’s Android interface is a little lacking. It has mostly all the Android components but not all. The biggest missing component I have notice is the range slider. Also, it’s look is very close to but not exactly matching the native Android interface.
What is Fries?
Fries is a very good looking UI framework which very closely matches the native Android Holo theme.
Fries actually states it was inspired heavily by Ratchet, and was created when Ratchet was only a UI library that looked like iOS.
It’s interface is much closer to looking like native Android. It looks so close that when looking over the documentation I really couldn’t tell it apart from the native look at all.
Unfortunately, like Ratchet, it, or at least it’s documentation, is lacking some UI components. The range slider and checkboxes are notably missing.
However, in terms of looking like Android it probably is the closet thing you will find using just HTML, CSS, and JavaScript.
So there are two ways to create native looking web and Cordova applications.
If you device to use either of these libraries be aware that they might not play well with each other. Use one or the other, but not both.
January 28, 2015 at 3:19 PM
Apparently Fries is no longer actively maintained and I have not yet found any documentation on how to use it.
FYI your Fries link doesn’t work.