Awin
Here are 2 tips for Ionic app development for Android platforms. Ionic is one of the hybrid mobile app development frameworks, which supports react, vue and angular.
1. Generating icon and splash screen
When I was a beginner using the ionic framework, I wondered how to change the default icon and the splash screen with the brand. With the release of ionic 3, there is a handy command that can help you generate the icon and the splash screen.
First create a icon.png file and place it in the resources folder. The resolution of the icon image should be atleast 192x192. This makes sure that the icon gets resized for all android resolutions without loss of clarity.
Also create a splash.png file and place it in the resources folder. The minimum resolution of 1920x1920.
Android provides a set of four generalized sizes densities:
- ldpi (low) ~120dpi
- mdpi (medium) ~160dpi
- hdpi (high) ~240dpi
- xhdpi (extra-high) ~320dpi
- xxhdpi (extra-extra-high) ~480dpi
- xxxhdpi (extra-extra-extra-high) ~640dpi
You can read more about it here. https://developer.android.com/guide/practices/screens_support.html The image resolutions mentioned above are w.r.t these standards.
Next ionic toolchain provides a cli command to generate images for all android standard dpis.
Run the following command with ionic cli.
ionic cordova resources
This generates the images for the android standard dpis
2. Live-reload on an Android Device
Often times it takes time to generate a build and transfer it to your android device to check how it works in the device. You can directly debug your ionic app, by running it on your device, by connecting via USB to your development laptop/desktop.
On your mobile device look for Developer options in Settings. You need to enable the following options:
- USB debugging
- Install via USB
- USB debugging (Security settings)
Based on you device the wordings for these options might defer.
Now connect you device via USB, and run the ionic cli command from the app folder.
ionic cordova run android
Allow all permissions that pop up on your device.
For debugging your applications on the device, you can run this cli command with the --livereload option.
ionic cordova run android --livereload
This will load the app changes on the device, as you edit the ionic app source code.