Ionic Material Design Free Download

About :

Ionic Material Design is Mobile Native Web Application that developed by Ionic Framework under the design concept of Google Material Design integrate with the functions of ngCorgova.

The application will present the function of Application storage, Social Connect, Share content to social network, Advertising in application, Hardware connect and Material Design Concept.

Also we have the documentation that will Introduce you about how to getting started with the project.

Important Notes :

To running this project and use it productive way.
You’ll need a basic understanding of this following:

Highlight :

Application Storage :

Every application have to store data. We will introduce you to using application storage to store data in your application by using SQLite and LocalStorage.

SQLite Database :

SQLite is the best way to store data to application storage. It allow you to manage complex relational database.

Advantage of SQLite it have unlimit ability to store data. It will create the sqlite file that store in the application. Also can store more complex data such as relation between tables.

We use SQLite function to create a small contract application that including function to :

Local Storage Database :

LocalStorage have ability to store data by HTML5 loacalStorage function.

We use LocalStorage function to create a notes application that including function to :

WordPress :

Getting WordPress feed by input your WordPress URL to application. It will use for connecting with WordPress Feed.

The function include:

Social Network Connect :

Using Social Network Connect for connect your application with social network. You can use it to be your application log in authentication and get user profile information from social network. Also it can retrieve data object of user timeline.

Advantage of Social Network Connect is you don’t need to create login page for your application just use social log in authentication. And it is easy for user to login.

Facebook :

Use cordovaOauth for connect with facebook to get user profile information, user timeline and friend list by calling facebook API.

The function include:

Google Plus :

Use cordovaOauth for connect with Google to get user profile information and user activity by calling Google API.

The function include:

Instagram :

Use cordovaOauth for connect with instagram to get user profile information and user feed by calling instagram API.

The function include:

  • Log in
  • Get user profile information
  • Get user feed

Foursquare :

Use cordovaOauth for connect with foursquare to get user profile information and user tips feed by calling foursquare API.

The function include:

Dropbox :

Use cordovaOauth for connect with dropbox to get user profile information and user files directory feed by calling dropbox API.

The function include:

  • Log in
  • Get user profile information
  • Get files directory feed

Share Application Content :

Share Application Content is for share content from the application to social network by using feature of ngCordova.

Social Share :

Using cordovaSocialSharing for share application content to social network and using Canvas2ImagePlugin for save image to mobile gallery.

The function include:

  • Share content to facebook
  • Share content to twitter
  • Share content to e-mail
  • Save image to mobile gallery

Mail & Message :

Using cordovaSocialSharing for send email from the application and using cordovaSMS for sent message.

The function include:

  • Send e-mail
  • Send message
  • Mobile calling

Advertising Application :

Google AdMob :

Using Google AdMob for earning money to your application. By using cordovaAdMob.

The function include:

  • Show AdMob
  • Hide AdMob

Hardware Connect :

Hardware Connect is for connecting with mobile feature by using ngCordova.

Mobile Contract :

Using cordovaContacts for connecting the application to mobile contract.

The function include:

Image Picker :

Using cordovaImagePicker for selecting image from mobile gallery.

The function include:

  • Select single image
  • Select multiple images

Vibration :

Using cordovaVibration for using mobile vibration.

The function include:

Flashlight :

Using cordovaFlashlight for using mobile flashlight.

The function include:

Device Information :

Using ionic.Platform.device for get device information.

The function include:

  • Get mobile device information

Material Design Themes :

Material theme that will help you to generate idea to create your powerful application.

Theme Color :

You can change color of application theme, Just config it !!!

Installation :

To install Ionic Material Design you can following this video instruction : .

Documentation :

We have brings all of system features to the table list and providing a quick start guideline of how to start with our product. We describes all details that is needed in order to get started with the product and put the explanation of the code for you to understand in the source code.

This is a Documentation in the package file by the topic of :

Please read deeply and understand the documentation before you buy this product.

Compatibility :

This project was tested in :

  • IOS Version 9 iPhone 5c
  • IOS Version 8 iPhone 5c
  • IOS Version 7 iPhone 5
  • Android Version 4.4.4 Samsung E5

Compatible with:

  • IOS Version 9
  • IOS Version 8
  • IOS Version 7
  • Android Version 4.4.4 >

Known Issues :

  1. Social connect :
    Foursquare and Dropbox feed API have no paging so it cannot do load more function.

  2. Social Share :
    1. For send email user must add email to the native mail application before sent e-mail.
    2. Facebook and Twitter sharing can not send a text via ngCordova API to shareing screen. However user can type text message on sharing screen.
    3. The reference limitation of $cordovaSocialSharing :

      Learn more:

  3. Mobile contract :
    For get all contracts you have to wait up to 2 sec for loading contracts form device.

  4. HTML Button Tag :

    Problem : Ionic Material Design doesn’t support HTML button Tag, Because Angular material and angular-aria will have double event when tap at the HTML button Tag on Mobile Browser.

    Solution : Ionic Material Design avoid this issue by using HTML a to create button by :

      <a class="md-raised md-button" href="#" ng-click="doSomeThing()">Button</a>                                                     

    To create button :.

  5. Image Size :
    Application will lag and slow if image size are large.

Sources and Credits :

I’ve used the following Icons, Framework, Idea , Inspiration or Other files as listed.
Also a thanks to all the awesome resources I’ve used for the development of this project.

Resources used in Development

Resources used in Design

Version History

Version 1.0 – released 21 september 2015

   View Demo     Download