- Capacitor Android Documentation
- Android Support
- Adding the Android Platform
- Opening the Android Project
- Running Your App
- Running on the Command-Line
- Running with Android Studio
- Troubleshooting
- Next Steps
- Further Reading
- Using Capacitor with Ionic Framework
- Installing
- New Ionic Project
- Existing Ionic Project
- Add Platforms
- Workflow
- Build your Ionic App
- Ionic CLI Capacitor Commands
- Deploying to iOS and Android
- Capacitor Setup
- iOS Deployment
- Android Deployment
- Android Development
- Android Studio
- Installing Android Studio
- Installing the Android SDK
- Configuring Command Line Tools
- Creating an Android Virtual Device
- Set up an Android Device
- Cordova Setup
- Gradle
- Project Setup
- Running with Capacitor
- Live reload
- Running with Cordova
- Debugging Android Apps
- Using Chrome DevTools
- Viewing Native Logs
Capacitor Android Documentation
Capacitor features a native Android runtime that enables developers to communicate between JavaScript and Native Java or Kotlin code.
Capacitor Android apps are configured and managed through Android Studio.
Android Support
API 21+ (Android 5 or later) is supported, which represents over 95% of the Android market . Capacitor requires an Android WebView with Chrome version 60 or later. On Android 5 and 6, Capacitor uses the Android System WebView . On Android 7+, Google Chrome is used.
Adding the Android Platform
First, install the @capacitor/android package.
Then, add the Android platform.
Opening the Android Project
To open the project in Android Studio, run:
Alternatively, you can open Android Studio and import the android/ directory as an Android Studio project.
Running Your App
You can either run your app on the command-line or with Android Studio.
To use an Android Emulator you must use an API 24+ system image. The System WebView does not automatically update on emulators. Physical devices should work as low as API 21 as long as their System WebView is updated.
Running on the Command-Line
To run the project on a device or emulator, run:
The command will prompt you to select a target. Learn more about run .
Running with Android Studio
In Android Studio, first select the device or emulator and then click the run or debug button to run your app. Unless you’re debugging Java or Kotlin code, the run button is preferred.
Troubleshooting
If you encountered any issues while getting started, you can consult the Android Troubleshooting Guide . Feel free to open a discussion if you need help.
Next Steps
If your app ran you are now ready to continue developing and building your app. Use the various APIs available, Capacitor or Cordova plugins, or custom native code to build out the rest of your app.
Further Reading
Follow these Android-specific guides for more information on setting permissions for your app, updating dependencies, building plugins, and more:
Источник
Using Capacitor with Ionic Framework
Installing
Capacitor can be installed directly into any new or existing Ionic app.
New Ionic Project
Capacitor is installed in new Ionic apps by default! All you have to do is start a new project:
If you’d like a tutorial for building your first Ionic/Capacitor app, see this tutorial .
Existing Ionic Project
Install and initialize Capacitor with your app name and bundle ID:
Ionic Framework makes use of the APIs in the following plugins:
For the best user experience, you should make sure these plugins are installed even if you don’t import them in your app:
If your Ionic app uses Cordova, you will want to read the Migrating from Cordova to Capacitor guide as well.
Add Platforms
After Capacitor installed, you can add native platforms to your app:
This will create a new directory in the root of your project for the native platform. This directory is a native project that should be considered a source artifact. Learn more about native project management .
Workflow
Build your Ionic App
Capacitor JavaScript libraries are bundled into your app, so the web asset build is no different after Capacitor is installed.
This creates the web asset directory that Capacitor copies into native projects, configured via webDir in the Capacitor configuration .
Ionic CLI Capacitor Commands
The Ionic CLI has a variety of high-level commands that wrap the Capacitor CLI for convenience. See the documentation for each below. Help output is also available by using the —help flag after each command.
Источник
Deploying to iOS and Android
Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! Remember, you can find the complete source code for this app here .
Capacitor Setup
Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences here .
If you’re still running ionic serve in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports:
Next, create both the iOS and Android projects:
Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).
Every time you perform a build (e.g. ionic build ) that updates your web directory (default: www ), you’ll need to copy those changes into your native projects:
Note: After making updates to the native portion of the code (such as adding a new plugin), use the sync command:
iOS Deployment
To build an iOS app, you’ll need a Mac computer.
Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by CocoaPods . Before running this app on an iOS device, there’s a couple of steps to complete.
First, run the Capacitor open command, which opens the native iOS project in Xcode:
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that Camera.getPhoto() is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy — Camera Usage.” To set it, the Info.plist file must be modified ( more details here ). To access it, click «Info,» then expand «Custom iOS Target Properties.»
Each setting in Info.plist has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it’s often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle «Raw Keys/Values.»
Add the NSCameraUsageDescription Key and set the Value to something that describes why the app needs to use the camera, such as «To Take Photos.» The Value field is displayed to the app user when the permission prompt opens.
Follow the same process to add the other two Keys required of the Camera plugin: NSPhotoLibraryAddUsageDescription and NSPhotoLibraryUsageDescription .
Next, click on App in the Project Navigator on the left-hand side, then within the Signing & Capabilities section, select your Development Team.
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it ( App -> Matthew’s iPhone for me) then click the «Build» button to build, install, and launch the app on your device:
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
Android Deployment
Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there’s a couple of steps to complete.
First, run the Capacitor open command, which opens the native Android project in Android Studio:
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the AndroidManifest.xml file. Android Studio will likely open this file automatically, but in case it doesn’t, locate it under android/app/src/main/ .
Scroll to the Permissions section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the «Run» button, select the attached Android device, then click OK to build, install, and launch the app on your device.
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
In the final portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion — thus completing our Photo Gallery feature.
Источник
Android Development
This guide covers how to run and debug Ionic apps on Android emulators and devices using Capacitor or Cordova . Android apps can be developed on Windows, macOS, and Linux.
Android Studio
Android Studio is the IDE for creating native Android apps. It includes the Android SDK , which will need to be configured for use in the command line.
Android Studio is also used to create Android virtual devices , which are required for the Android emulator. Ionic apps can also be launched to a device .
We don’t recommend using Android Studio for developing Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices.
Installing Android Studio
Download Android Studio from the Android website . More detailed installation instructions can be found in the User Guide .
Installing the Android SDK
Once installed, open Android Studio. The IDE should detect that the Android SDK needs to be installed. In the SDK Components Setup screen, finish installing the SDK. Keep note of the Android SDK Location .
By default, the latest stable SDK Platform is installed, which includes a collection of packages required to target that version of Android.
To install system images and other minor SDK platform packages, you may need to ensure Show Package Details is checked at the bottom of the SDK Manager.
For future reference, the Android SDK can be managed with Android Studio in the Configure » SDK Manager menu of the Android Studio welcome screen or Tools » SDK Manager inside Android projects.
Configuring Command Line Tools
The Android SDK ships with useful command-line tools . Before they can be used, some environment variables must be set. The following instructions are for macOS and Linux. For Windows, check the documentation on setting and persisting environment variables in terminal sessions.
/.bash_profile , or similar shell startup scripts, make the following modifications:
Set the ANDROID_SDK_ROOT environment variable. This path should be the Android SDK Location used in the previous section.
Add the Android SDK command-line directories to PATH . Each directory corresponds to the category of command-line tool .
# avdmanager, sdkmanager export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
# adb, logcat export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
# emulator export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
For apksigner and zipalign , $ANDROID_SDK_ROOT/build-tools must also be added to PATH .
Creating an Android Virtual Device
Android Virtual Devices (AVDs) are blueprints that the Android emulator uses to run the Android OS. The following documentation is a quick way to get the Android emulator set up. For more detailed instructions and information, see the Android documentation .
AVDs are managed with the AVD Manager. In the Android Studio welcome screen, click Configure » AVD Manager . The AVD Manager can also be opened inside Android projects in the Tools » AVD Manager menu.
Click Create Virtual Device and select a suitable device definition. If unsure, choose Pixel 2 . Then, select a suitable system image. If unsure, choose Pie (API 28) with Google Play services. See Android version history for information on Android versions.
Once the AVD is created, launch the AVD into the Android emulator. Keeping the emulator running is the best way to ensure detection while developing Ionic apps for Android.
Set up an Android Device
Actual Android hardware can also be used for Ionic app development. But first, the device must be set up for development. The following documentation is a quick way to set up Android devices for development. For more detailed instructions and information, see the Android documentation .
- Enable USB debugging on the device. Open Settings , navigate to Developer options , and enable USB debugging . The Developer options menu may need to be enabled first. See the Android documentation for instructions.
- Ensure the device has permission to connect to the computer. For macOS, no additional setup is required. For Windows, install the OEM USB drivers .
Verify the connection works by connecting the device to the computer with a USB cable and using the following command:
The device should be listed. See the full adb documentation for troubleshooting and detailed information.
Cordova Setup
Additional setup is required for Cordova to support programmatic builds. This section is not necessary for Capacitor.
Native Android apps are compiled with the Java programming language. Download JDK8 from the download page .
Unfortunately, Cordova is not compatible with the latest version of Java.
Gradle
Gradle is the build tool used in Android apps and must be installed separately. See the install page for details.
Project Setup
Before apps can be deployed to Android simulators and devices, the native project must be configured.
Generate the native project, if it does not already exist.
For Capacitor, run the following:
For Cordova, run the following:
For Capacitor, open the capacitor.config.json file and modify the appId property.
For Cordova, open the config.xml file and modify the id attribute of the root element, . See the Cordova documentation for more information.
Running with Capacitor
Capacitor uses Android Studio to build and run apps to simulators and devices.
Develop the Ionic app and sync it to the native project.
With each meaningful change, Ionic apps must be built into web assets before the change can appear on Android simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.
In Android Studio, click the Run button and then select the target simulator or device.
Live reload
To start a live-reload server run the following command.
When running on a device make sure the device and your development machine are connected to the same network.
Running with Cordova
The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in ionic serve , to provide live-reload functionality.
Run the following to start a long-running CLI process that boots up a live-reload server:
Now, when changes are made to the app’s source files, web assets are rebuilt and the changes are reflected on the simulator or device without having to deploy again.
Debugging Android Apps
Once an app is running on an Android device or emulator, it can be debugged with Chrome DevTools.
Using Chrome DevTools
Chrome has web developer tool support for Android simulators and devices. Go to chrome://inspect in Chrome while the simulator is running or a device is connected to the computer and Inspect the app that needs to be debugged.
Make sure your application is running on the device or simulator, or it will not show up in the list.
Viewing Native Logs
If running with Android Studio, native logs can be found in Logcat .
If the Logcat window is hidden, you can enable it in View » Tool Windows » Logcat .
You can also access Logcat with ADB .
Источник