How to Build an Android App Using Capacitor in Ionic

Building a mobile app for Android using Ionic and Capacitor allows you to create a powerful cross-platform application with a native-like experience. Capacitor bridges the gap between web applications and native functionalities, enabling Ionic apps to run seamlessly on Android, iOS, and web platforms. In this blog, we will walk through the steps to create and build an Android app using Capacitor in an Ionic project.

Prerequisites

Before getting started, ensure that you have the following installed:

• Node.js (LTS version) – Download Node.js
• Ionic CLI – Install via npm ( npm install -g @ionic/cli )
• Android Studio – Download Android Studio

Step 1: Create a New Ionic Project

To begin, create a new Ionic project using the Ionic CLI. If you already have a project, you can skip this step.

• Open your terminal and run the following command to create a blank Ionic app:

ionic start MyApp blank

after that navigate to your project directory

Step 2: Install Capacitor in Your Ionic Project

Capacitor provides a runtime to deploy web apps natively. To integrate Capacitor into your project, follow these steps:

• Install Capacitor

npm i @capacitor/core
npm i -D @capacitor/cli

• Initialize your Capacitor config​

Then, initialize Capacitor using the CLI questionnaire:

npx cap init

The CLI will ask you a few questions, starting with your app name, and the package ID you would like to use for your app. It will create the capacitor-config file with these configuration details, including the expected output directory for the build process of your bundler (e.g. www for Angular, build for React, public for Vue, etc.).

Create your Android and iOS project.​

After the Capacitor core runtime is installed, you can install the Android and iOS platforms.

npm i @capacitor/android or npm i @capacitor/ios 
//install android for Android app and install ios for iOS app.

Once the platforms have been added to your package.json, you can run the following commands to create your Android and iOS projects for your native application.

npx cap add android //for android app
npx cap add ios //for iOS app

Sync your web code to your native project​

Once you've created your native projects, you can sync your web application to your native project by running the following command.

npx cap sync

npx cap sync will copy your built web bundle expected to be found in webDir of the Capacitor Config file to your native project and install the native project's dependencies.

After adding the Android or iOS platform, follow these steps to build your Android application.

Step 1: Build Your Ionic Project

To generate the necessary web assets for your app, run the following command

ionic build

This will compile your Ionic project and produce the required files for the Android build.

Step 2: Copy Web Assets to the Android Platform

Next, copy the generated web assets into your Android project by running:

npx cap copy android

This step transfers the built web assets from your Ionic project to the android folder, making them available for the Android build.

Step 3: Sync Dependencies and Plugins

To ensure that all libraries and plugins used in your Ionic app are properly integrated into the Android project, sync the dependencies using:

npx cap sync android

This command updates your Android project with any new or modified plugins and libraries.

Step 4: Open the Project in Android Studio

Now, open your Android project in Android Studio by running:

npx cap open android

This command will launch Android Studio, where you can build, run, and test your Android application.

After clicking on build to it will build an Android app for your project.

After creating the application, click on locate to find where it will be stored.

And here app-debug.apk is your Android application.