Building for Android

Requirements

Unlike iOS, Android development works on any operating system.

Install Android Studio

1. Go to developer.android.com/studio
2. Download Android Studio
3. Run the installer

First-Time Setup

When Android Studio opens:

1. Choose Standard installation
2. Select a theme (Darcula or Light)
3. Wait for component downloads (several GB)
4. Accept all license agreements

Install SDK Components

Go to Tools → SDK Manager and ensure these are installed:

SDK Platforms:

• Android 14 (API 34) or latest

SDK Tools:

• Android SDK Build-Tools
• Android SDK Platform-Tools
• Android Emulator
• Android SDK Command-line Tools

Opening Your Project

From your Capacitor project:

bash
Copy
npx cap open android

Or in Android Studio: File → Open → select your android folder.

Wait for Gradle sync to complete (first time takes several minutes).

Project Structure

android/
├── app/
│   ├── src/
│   │   └── main/
│   │       ├── java/         # Kotlin/Java code
│   │       ├── assets/
│   │       │   └── public/   # Your web files (synced)
│   │       ├── res/          # Icons, layouts, strings
│   │       └── AndroidManifest.xml
│   └── build.gradle          # App dependencies
├── gradle/
└── build.gradle              # Project dependencies

Running on Emulator

Step 1: Create an Emulator

1. Go to Tools → Device Manager
2. Click Create Device
3. Choose a phone (e.g., Pixel 7)
4. Select a system image (e.g., API 34)
   • Download if needed (click the download icon)
5. Click Finish

Step 2: Start Emulator

In Device Manager, click the Play button next to your emulator.

Wait for it to boot (first time is slow).

Step 3: Run Your App

Click the Run button (green play icon) in Android Studio toolbar.

Or press Shift + F10.

Running on Physical Device

Step 1: Enable Developer Mode

On your Android device:

1. Go to Settings → About Phone
2. Tap Build Number 7 times
3. You'll see "You are now a developer!"

Step 2: Enable USB Debugging

1. Go to Settings → System → Developer Options
2. Enable USB Debugging
3. (Optional) Enable Install via USB

Step 3: Connect Device

1. Connect your device with a USB cable
2. On the device, tap Allow when prompted
3. Check Always allow from this computer

Step 4: Run on Device

1. Your device appears in the device dropdown
2. Select it and click Run

Configuring Your App

App Icons

Replace icons in android/app/src/main/res/:

res/
├── mipmap-mdpi/      # 48x48
├── mipmap-hdpi/      # 72x72
├── mipmap-xhdpi/     # 96x96
├── mipmap-xxhdpi/    # 144x144
├── mipmap-xxxhdpi/   # 192x192
└── mipmap-anydpi-v26/ # Adaptive icons

Use Android Asset Studio to generate all sizes.

Display Name

Edit android/app/src/main/res/values/strings.xml:

xml
Copy
<resources>
    <string name="app_name">My Cool App</string>
    <string name="title_activity_main">My Cool App</string>
</resources>

App Colors

Edit android/app/src/main/res/values/styles.xml:

xml
Copy
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">#FF6200EE</item>
    <item name="colorPrimaryDark">#FF3700B3</item>
    <item name="colorAccent">#FF03DAC5</item>
</style>

Splash Screen

The splash screen uses android/app/src/main/res/drawable/splash.png.

Configure in capacitor.config.ts:

typescript
Copy
const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      backgroundColor: '#ffffff',
    },
  },
};

AndroidManifest.xml

The manifest controls permissions and app behavior.

Location: android/app/src/main/AndroidManifest.xml

Common Permissions

xml
Copy
<!-- Internet (usually already present) -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Camera -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Location -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<!-- Storage (for older Android versions) -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Capacitor Plugins Add Permissions

When you install a Capacitor plugin and sync, it usually adds required permissions automatically.

Live Reload Development

Step 1: Find Your Local IP

Step 2: Configure Capacitor

typescript
Copy
// capacitor.config.ts
const config: CapacitorConfig = {
  server: {
    url: 'http://YOUR_LOCAL_IP:3000',
    cleartext: true,
  },
  android: {
    allowMixedContent: true,  // Allow HTTP during development
  },
};

Step 3: Start Development

Terminal 1:

bash
Copy
npm run dev

Terminal 2:

bash
Copy
npx cap sync android
npx cap run android

Changes appear instantly!

Debugging

Chrome DevTools

1. Run your app on device/emulator
2. Open Chrome on your computer
3. Go to chrome://inspect
4. Find your app under "Remote Target"
5. Click inspect

Full web developer tools!

Logcat

In Android Studio:

1. View → Tool Windows → Logcat
2. Filter by your app (package name)
3. See all logs including console.log from your web code

Common Debug Commands

typescript
Copy
import { Capacitor } from '@capacitor/core';

console.log('Platform:', Capacitor.getPlatform());
console.log('Is Android:', Capacitor.getPlatform() === 'android');

// Log to both web and native
console.log('Debug:', { user, data });

Building APK/AAB

Debug APK (for testing)

In Android Studio:

1. Build → Build Bundle(s) / APK(s) → Build APK(s)
2. Find APK in android/app/build/outputs/apk/debug/

Release AAB (for Play Store)

1. Generate a signing key (one time):

   bash
   Copy
   keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias
   

2. Configure signing in android/app/build.gradle

3. Build → Generate Signed Bundle / APK

4. Choose Android App Bundle

Common Issues

bash
Copy
export ANDROID_HOME=$HOME/Android/Sdk

sdk.dir=/path/to/Android/Sdk

Next: Add native features to your app with Capacitor plugins.