O'Reilly logo

PhoneGap 4 Mobile Application Development Cookbook by Zainul Setyo Pamungkas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a layout

In the last recipe, we explored the Ionic UI components by creating a single-page application using a blank starter template. In this recipe, we will create a clone of the Instagram mobile app's layout.

How to do it…

To start creating our own version of the Instagram UI, we follow these steps:

  1. Create a new tab Ionic application project with the name as ionSnap:
    ionic start ionSnap tabs
    
  2. Change the directory to ionSnap:
    cd ionSnap
    
  3. Then add the device platforms to the project:
    ionic platform add ios
    ionic platform add android
    
  4. Let's change the tab name. Open www/templates/tabs.html and edit each title attribute of ion-tab:
    <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <ion-tab title="Timeline" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required