How to build ionic app on android

5 min readAug 25, 2020

In this article, we will talk about how to build an Ionic application on Android

Ionic is an open-source, cross-platform mobile development technology stack. It is “the app platform for web developers,” allowing them to build mobile, web, and desktop apps all with one shared code base.

The original version was built on top of AngularJS and Apache Cordova. The more recent releases, known as Ionic 2 or simply “Ionic”, are built on Angular.

The plan down the road is to see if we can make an Apple iOS version of our app with the same code base.

But for now, we’ll focus on Android.

Our system remains the same.

What we are using

Windows 10 OS Pro
Android Studio
Ionic
An Android device
(not required in this starter tutorial)

First, we must get to know the Ionic : Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like “Bootstrap for Native,” but with support for a broad range of common native mobile components, slick animations, and beautiful design.

Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you would get with a native SDK on iOS or Android but didn’t really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.

Tools to be installed to setup Ionic:

To work with Ionic we need following set of tools to be installed in your machine.

1. Android SDK (https://developer.android.com/studio/)
2. node.js (https://nodejs.org )

Let look into each with step by step implementations,

Download android studio in following link
Once android studio is downloaded please install it with admin permission.
If you want to know more about android studio installation steps please follow below blog

https://www.javaworld.com/article/3095406/android/android-studio-for-beginners-part-1-installation-and-setup.html

Node.js

You need to install Node.js. If you haven’t installed this already, please refer to the instructions available here to do so. To check your version of node run

Open the node.js command prompt or cmd

$ node -v 
v10.15.1 # Might be a different version on your system

Ionic and Cordova

Install the latest Cordova and Ionic command-line tools.

$ npm install -g cordova ionic

Now check the version of the Ionic and that the installation is correct

$ ionic -v

Now if it appears on the screen like this, everything is correct

Initiate your app

We will make use of the Ionic blanc template. Navigate to the folder where you want to create your project and run the following command to start your application.

$ ionic start MyFirstApp

When you run this command, two options will appear for you to select the framework you want to use.

| We are using angular framework

| choose your choice and click on the enter button

Now choose the template ,we will choose the blank template

| choose your choice and click on the enter button

Project Structure

Before we start building our application, let’s take a close look at the anatomy of an ionic application. Inside the folder that was created during the scaffold, you have a typical Cordova project structure where you’ll be able to install native plugins and create platform-specific project files.

./src/index.html

src/index.html is the main entry point for the app. Much like the index.html file from angular projects you worked on yesterday, you'll spend very little time in this file while building your application. It's main purpose is to setup script and CSS includes and bootstrap, or start running, our application.

For the app to function, Ionic will look for the <ion-app> tag in your index.html file. Think of this as the root component for your ionic application.

./src/

Inside the src directory, you'll find all your uncompiled code. This is where you'll spend most of your time while building your app. When you run ionic serve, all the code inside of src/ is transpiled into a Javascript version that is supported by most browser.

Build your App

Once that is complete, run the following commands to add support for Android.

$ cd MyFirstApp
$ ionic cordova platform add android # publish for android.
$ ionic cordova build android #building for android

At this point, you usually want to make sure you initialize a git repository inside the project folder. This is such so important that the good folks from ionic team built this in as part of the process of scaffolding the app.
If you were paying attention, you might have noticed that after installing all necessary project dependencies, a git repository was initialized and the Initial commit was made.
All you have to do now is, create a new repository on GitHub and add it as a remote. Git flow is outside the scope of this walkthrough but do make use of version control when working on this project.

Run your android app in your device

Now we are opening Android Studio and click open project then go to folder the app MyFirstApp -> Platform -> Android and open this folder.

After this, connect your phone to the computer via cable usb then run your application