Published on Monday, July 18, 2016,00:47:42   in    Mobile

---

---

Get Material Design UI to build yours Ionic/AngularJS mobile app. Save hours of developing by using our 70+ beautifully HTML5 designed layouts. Choose between travel, media, social, e-shop and universal theme or combine hundreds of HTML5 UI components by your wish. Don’t lose time in breaking your head and build HTML5 mobile app from scratch – we did it for you! In Material Design UI Ionic Template App we combined Ionic and Materialize frameworks in wish to provide developers very low time consuming tool for fast and clean-code development of best mobile apps. By using our template you can quickly produce best mobile apps for Android and iOS. In our ionic/Angularjs UI components we expanded default Ionic’s features and functionalities and added them Material Design polishing. All elements are inspired with Google’s Material Design and created by their instructions. You can very easy to implement UI elements source code from Ionic UI template by following our huge and well organized documentation. Yours is just to code (little bit), we do the design. Check our example demo app! Easy as cake. Happy coding!

Full feature list

Two frameworks combined: Ionic + Materialize framework. Develop your mobile web app front-end fast as lightning!

70+ finished elements and layouts ready to use - build your mobile application over directives. Every directive contain 5-7 themes (HTML5 layouts) that can be very easily implemented. Of course you can customize it and create unique HTML5 mobile app. Or you can use default Materialize’s classes. All you need to do is to provide content.

5 themes – all UI components are made in five themes: media, travel, social, e-shop and universal.

Unified graphic – all graphic elements are inspired by Google’s Material Design and they can be combined infinitely. Even if you want to combine UI components from different themes it is possible with just few tweaks.

Many UI elements have animation and/or transparency – beautiful transparent animations which are more and more popular in web development.

Icons – included wide range of 800+ Material Design icons from Materialdesignicons.com over Fontello font. No more different sized PNG’s – we make it over scalable SVG format. Also there is a 740+ default icons from Materialize framework. So you get a lot of Ionic icons.

Every UI element and layout work on Android 4.4 and up to latest Android version. We test it on Samsung Galaxy S7 (Android 6), Sony Xperia Z2 (Android 6), Samsung Galaxy J5 (Android 5.1), Sony M2 (Android 5.1), Samsung s4 (Android 4.4). Also we test it on GenyMotion. And everything works perfect.

Everything tested too (and works great) on iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6s, iPhone 6 plus and iPhone 6s plus.

Clean code with comments - all HTML5 and CSS3 files are well commented for easier and quicker development and customizing.

Fonts changeable in one line of code – we used web fonts (Roboto) as Google suggest it but it is very easy to replace it in only one line of code in main CSS file (by changing URL to web font). Note: If you plan to change font we suggest that you change it with some web fonts that have same number of font weights.

CSS blend modes – used in some UI components to boost aesthetic side of template and make it more beautiful. Users loves nice app!

CSS animations – in combination with Animate.css we produce several animated elements that will raise UX quality of your mobile app

Images – through all themes there is just 4 sizes of images (200×200px, 600×300px, 600×150px and 130×220px). Backgrounds are full HD (1920×1080px). All other used sizes are made automatically.

Colors – colors and color combinations of every Ionic theme are made from Google Material Design color palette and by theirs guidelines.

Events – on every button we provide clickable “event” that you can override and customize by your needs. Also we set toasts for every “event”.

Ripple effect – included in almost all UI components at hover state.

All UI components list:

List Views – Five types of List Views: Expandable, Drag&Drop, Swipe to dismiss, Sticky list headers and Google Cards. We used some elements of Ionic framework and combine them with Materialize. We weren’t happy how it looks so we upgrade and polish them to be prettier and easier to work with them. All of them have their own specific effects and functionalities. Also we added Appearance animations that can be combined with all five List Views for better look and user experience. And of course everything is made in five Material Design Ionic themes which makes in total 25 List Views. Open source project used in this components: Sticky List Header

Parallax Effect – We made new component for Ionic/AngularJS in way that we combined Materializer’s Parallax with Ionic lists and get beautiful Material Design UI element. Open source project used: Elastic header with zoom.

Left menu (side menu) – We used standard Ionic left menu (or side menu) ) and we designed it in five Ionic themes combining gradients and photos with CSS blend mods.

Login & Register – Materializer’s login with small but nice letter effect with HD images in background. 5 login screens + 2 register screen (for shop and travel).

Image Gallery – Gallery and sub-gallery with cool Ripple effect. Can be combined with every of our UI themes.

Shape Image Views – 32 shapes prepared for using for avatars or/and profile images and chosen to match our themes. All made with SVG shapes so can be easily replaced with your own SVG images.

Check buttons -Matching styles for every of UI themes. Also we make two version combining check buttons with Expandable effect which you can use for filters (for ex. with search fields)

Splash screens – 3 Splash screens combined with Ken Burns effect (made from scratch by us) and several logo entrance animation.

Text Views – Prepared typography by Google instructions in 3 letter weights. All made with default Roboto font but you can easily replace it with font by your wish.

Search bars – 5 versions of Search bars for quick implementation in your app that fit perfectly with every Ionic theme.

Technologies and open source projects

To be able to make all of Ionic/AngularJS components in Material Design we had to use several technologies and few open source projects. In documentation we have explained how to use this projects. Here is list what we used to bring our design to life:

Ionic – it is open source mobile framework for developing hybrid mobile and web apps. With Ionic you can produce Android, iOS and Windows mobile apps at once.

AngularJS – AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly.

jQuery – jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

NgCordova – ngCordova is a collection of 70+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS.

MaterializeCSS – it is a modern and responsive front-end framework based on Google’s Material Design.

AnimateCSS – “Just-add-water CSS animations” made by Daniel Eden is collection of beautiful CSS animations.

Sticky List Header (ion-affix) – is a lightweight Angular directive for Ionic framework to have sticky affix element made by Ali Ok.

Elastic header with zoom – is Ionic/Angular directive for elastic headers made by Ola Christensson.

Why our customers love us?

“Excellent. You saved me a lot of development effort. Great!”
Alessandrotorres, Material Design UI Android Template app “Couldn’t pick one area for the 5 star review. Overall quality, design and usability are excellent. Support is also fantastic. Thanks for help. Luke”
Betty8080, Material Design UI Android Template app< “One of the best in all respects.”
Nikhil3831, Material Design UI Android Template app “Everything is clear. @developer, nice work”
Satyagvns, Material Design UI Android Template app “Excellent work. thanks for sharing :)”
Bisoncode, Material Design UI Android Template app “Most features required for app design and development available. We gone build an app for gozopping.com with this, and make our customer go mad.. thx a lot.”
Ojalsuthar, Material Design UI Android Template app “Absolutely amazing.”
Vanduh, Material Design UI Android Template app “Fantastic, thanks. I’m sure I’ll be buying more sources from you.”
Henrik S., HD wallpaper Android Template App “Great design quality!”
Dedania23, HD wallpaper Android Template App

Excellent customer support

We are offering FREE SUPERB after sales support around. We care about your apps as much as you and we will help you in any way possible.

FREE Lifetime Updates – get all the new features we add in each future update for free.

Once you purchase, you can use our dedicated support where we quickly answer your questions.

Includes great online documentation you can find and it’s constantly being updated with new material.

Basic tutorials for newcomers about importing our template.

Contact us at dev@csform.com

Working hours: 09:00 – 16:00h, UTC+01:00. From Monday to Friday.

Credits

The images used in demos are not included in the downloaded ZIP file. All images belong to their rightful owners. Full lists of credits are here