Forem

Cover image for How to Deploy an Ionic App on Android in 9 Steps
Itamar Tati
Itamar Tati

Posted on

How to Deploy an Ionic App on Android in 9 Steps

Deploying an Ionic app on Android involves several steps, including setting up your development environment, writing the application code, generating necessary assets, building the Android package (APK or AAB), and installing or publishing it. Follow this guide to successfully deploy your Ionic app on an Android device or the Google Play Store.

I am doing this for myself and anyone trying to build an app solo. Leave a comment below if you need help!

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (LTS recommended)
  • Ionic CLI (npm install -g @ionic/cli)
  • Android Studio (with Android SDK and Gradle)
  • Java Development Kit (JDK 11 or later)
  • A physical Android device (optional, but useful for testing)
  • A Google Play Developer account (for publishing)

Step 1: Create or Navigate to Your Ionic Project

If you don’t have an existing Ionic app, create one:

ionic start myApp blank --type=angular
cd myApp
Enter fullscreen mode Exit fullscreen mode

Or navigate to your existing Ionic project:

cd myExistingApp
Enter fullscreen mode Exit fullscreen mode

Step 2: Write Your Application Code

Develop your app by adding pages, components, and logic using Angular or React. Ensure that your application meets all functional and UI requirements before proceeding to the next steps.

Step 3: Add the Android Platform

Ensure you have the Android platform installed:

ionic capacitor add android
Enter fullscreen mode Exit fullscreen mode

If the platform is already added, update it to the latest version:

ionic capacitor update android
Enter fullscreen mode Exit fullscreen mode

Step 4: Generate Splash Screens and Icons

You can generate Splash Screens and Icons for your iOS, Android, or Progressive Web Application using the @capacitor/assets tool.

Install the assets tool:

npm install @capacitor/assets --save-dev
Enter fullscreen mode Exit fullscreen mode

Provide icon and splash screen source images using this folder/filename structure:

assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png
Enter fullscreen mode Exit fullscreen mode
  • Icon files should be at least 1024px x 1024px.
  • Splash screen files should be at least 2732px x 2732px.
  • The format can be jpg or png.

Generate the assets:

npx capacitor-assets generate
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can generate for a specific platform with --ios, --android, or --pwa.

Note: The VS Code Extension can also generate Splash Screen and Icon assets.

Android 12+

In Android 12 and above, Google changed the way Splash Screens are displayed, using a smaller icon with a colored background instead of a full-screen image. Additional documentation about this change can be found at developer.android.com.

Step 5: Build the Ionic App

Run the following command to generate the production build:

ionic build
Enter fullscreen mode Exit fullscreen mode

This will create a www folder containing your compiled app.

Step 6: Sync the Build with Android

After building your app, sync it with the Android project:

ionic capacitor sync android
ionic capacitor open android
Enter fullscreen mode Exit fullscreen mode

This will open Android Studio, where you can manage and build your project.

Step 7: Run the App on an Android Device

To test on a physical device, enable USB debugging on your Android phone and run:

ionic capacitor run android --device
Enter fullscreen mode Exit fullscreen mode

Or, to run on an emulator:

ionic capacitor run android --emulator
Enter fullscreen mode Exit fullscreen mode

Step 8: Generate a Signed APK/AAB

To distribute your app, you need to generate a signed APK or AAB:

  1. Open Android Studio.
  2. Select Build > Generate Signed Bundle / APK.
  3. Choose Android App Bundle (AAB) for Google Play or APK for direct installation.
  4. Create or use an existing keystore for signing.

    • If you need to generate a keystore, use the following command:
     keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias
    
  • Store the keystore file securely, as you’ll need it for future updates.
    1. Select Release and generate the file.

Step 9: Upload to Google Play Store

To publish your app:

  1. Go to Google Play Console.
  2. Create a new app and fill in the required details.
  3. Upload your signed AAB file.
  4. Complete the content rating, app release, and store listing.
  5. Submit for review and publish.

Conclusion

Deploying an Ionic app on Android requires setting up the environment, writing the application code, generating assets, building the app, testing it on a device or emulator, and generating a signed release for distribution. Following these steps will ensure a smooth deployment process. Happy coding!

Top comments (0)