I have posted about theming Cordova / PhoneGap to look like native Android before but at the time Android Lolipop and the Material design were not out.
Since then the world of Android has changed a lot. Google has created a new UI design which developers are using to design their applications. It’s nice looking, elegant, and simple.
But I’m not a great mobile developer. I can make Android do pretty much whatever I want, but it takes me substantially longer to write an Android application than it does for me to write a web application. Because of that I like to rapidly prototype my applications in Cordova first and sometimes keep them in Cordova because of the ability to have one codebase that covers multiple platforms.
But web applications always tend to look like web applications and not native.
That is what Materialize is trying to change, and doing a damn good job at.
What Does it Do?
Materialize is an open source CSS and JavaScript library like Bootstrap or Foundation but designed to look and behave like the Material design first seen in Android Lolipop.
It includes components like badges, buttons, cards, and navbars, and has helper classes like shadows that can be added easily to any element and conform very accurately to the Material design.
Materialize also includes a set of jQuery plugins that provide more Android like behavior like sidebars that move when you swipe in from the left side of the screen. It accomplishes this by leveraging Hammer.js, the best touch / gesture event listener library around.
Materialize also provides UI elements that can only be added with JavaScript, such as toast notifications.
Conclusion
Overall Materialize is a great UI library that mimics the look of the Material design from Google. It has some bugs but the team responds quickly to GitHub issues and closes bugs often.
I will be using this myself in some personal project and might start using it in professional projects too.
April 24, 2015 at 9:08 AM
What webkit version or earliest version of android supports materialize? I’m interested in building a cordova app with materialize and am interested how much support I will have if I use materialize?
April 29, 2015 at 1:42 PM
I’ve only tested Materialize with Jelly Bean and later and it worked great for me.
Because Materialize uses CSS3 elements I don’t think anything under Jelly Bean will support it, but you can always look into using Crosswalk with Cordova.