Showing posts with label Android. Show all posts
Showing posts with label Android. Show all posts

Wednesday, 21 July 2021

Android Back Button to Exit App in Ionic

There are at least two ways to have Android hardware back button to exit app. I am using Ionic 5 at the time of writing this.

1) Using IonRouterOutlet to check through history stack
import { IonRouterOutlet, Platform } from '@ionic/angular';
import { Plugins } from '@capacitor/core';
const { App } = Plugins;

export class HomePage {
   constructor(private platform: Platform, private routerOutlet: IonRouterOutlet){
   
      . . .
   
      this.platform.backButton.subscribeWithPriority(-1, () => {
         if (!this.routerOutlet.canGoBack()) {
            navigator['app'].exitApp();
            //App.exitApp();   // if using Capacitor framework, we can use Plugins component
         }
      });
   }

   . . .
}

2) Using Location from Angular library
import { Platform } from '@ionic/angular';
import { AfterViewInit, OnDestroy } from "@angular/core";
import { Subscription } from "rxjs";
import { Location } from '@angular/common';

export class HomePage implements OnDestroy, AfterViewInit {
   backButtonSubscription: Subscription;
    
   constructor(private platform: Platform, private location: Location){   
      . . .
   }
   
   ngAfterViewInit() {
      this.backButtonSubscription = this.platform.backButton.subscribe(() => {
         if (this.location.isCurrentPathEqualTo("HOME_PAGE_URL")){
            navigator['app'].exitApp();
         }
      });
   }
   
   ngOnDestroy() {
      this.backButtonSubscription.unsubscribe();
   }

   . . .

}

References:
Ionic Framework Documentation - Hardware Back Button
How To Exit App On Back Press | Ionic 4

Further reading:
Ionic 5 handle back hardware event to confirm exit by user

Monday, 12 April 2021

Easily Generating Icon and Splash Images with Cordova Resource Generation Tool

A tool/plugin called cordova-res (https://github.com/ionic-team/cordova-res) is great to automatically generate icon and splash images if you develop an app using Capacitor.

1. First install the plugin
npm install -g cordova-res

2. Prepare the base icon and splash screen images
icon.(png|jpg) must be at least 1024×1024 px
splash.(png|jpg) must be at least 2732×2732 px
For iOS, the icon image should be squared and not masked https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/.

3. Then place the image files in resources folder. The plugin expects files structure like this:
resources/
├── icon.png
└── splash.png
config.xml (optional)


For iOS
4. Run this command
cordova-res ios --skip-config –copy
The result will be something like:
Generated 47 resources for iOS
Copied 21 resource items to iOS

5. Assign the images in Xcode
On Xcode, navigate to App > App > Assets.xcassets. Replace the icon and splash images with the newly generated images.
https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-capacitor-projects/


For Android
4. Run the command
cordova-res android --skip-config –copy
Splash and legacy icon images will be generated.

5. Generate adaptive icons
Since Android 8.0 (API level 26), adaptive icon is used as launcher icons for variety of Android devices.
Open Android Studio then select app folder.
Click File -> New -> Image Asset.
Set Foreground and Background Layers.
For adaptive icon source image, the centre area is smaller than the one for legacy icon.

6. Replace splash images (if using Capacitor framework)
The current Capacitor version replaces all the icons but not the splash screens. We need to replace all the default images under 'splash' folder ourselves.

These default images are in separated folders located inside 'app\src\main\res' folder.

We just need to replace each 'splash.png' file inside each folder with our generated splash images:


Tuesday, 14 July 2015

Generating Android Release Keystore for Visual Studio Apache Cordova Project

Below are the steps to generate an Android keystore for publishing a release version of an app built using Visual Studio Apache Cordova:
1. Make sure you have Java SDK installed.

2. Run keytool command like below:
keytool -genkey -v -keystore YOUR_KEY_NAME.keystore -alias KEY_ALIAS -keyalg RSA -keysize 2048 -validity 20000
Use greater than 10,000 days (i.e. 20,000 days) validity to avoid expiration issue when uploading the package to Google App store.
For example:
C:\Program Files (x86)\Java\jdk1.7.0_55\bin>keytool -genkey -v -keystore c:\users\rical\my-release-key.keystore -alias rical_blog_app_key -keyalg RSA -keysize 2048 -validity 20000
Then you will be prompted with some questions:
Enter keystore password: *****
Re-enter new password: *****
What is your first and last name? 
  [Unknown]:  Rical Wirawan 
What is the name of your organizational unit? 
  [Unknown]:  Organisation
What is the name of your organization? 
  [Unknown]:  MyOrg
What is the name of your City or Locality? 
  [Unknown]:  MyCity 
What is the name of your State or Province? 
  [Unknown]:  NSW
What is the two-letter country code for this unit? 
  [Unknown]:  61 
Is CN=Rical Wirawan, OU=Organisation, O=MyOrg, L=MyCity, ST=NSW, C=61 correct? 
  [no]:  yes 

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days 
        for: CN=Rical Wirawan, OU=Organisation, O=MyOrg, L=MyCity, ST=NSW, C=61 
Enter key password for  
        (RETURN if same as keystore password): 
[Storing my-release-key.keystore] 

3. The key file will be generated in the specified folder.

4. If you use a recent version of Cordova CLI, open build.json file in the root folder of the project. If it does not exist yet then create the file manually. Then put the details in the file, continuing our example:
{
 "android": {
     "release": {
         "keystore":"C:\\users\\rical\\my-release-key.keystore",
         "storePassword":"*****",
         "alias":"rical_blog_app_key",
         "password":"*****",
         "keystoreType":""
       }
   }
}

If your Cordova CLI version is less than 5.0, open ant.properties file (under 'your_project_name\res\cert\android' folder). Then put the key details in the ant.properties file, continuing our example:
key.store=c:\\users\\rical\\my-release-key.keystore
key.alias=rical_blog_app_key
key.store.password=*****
key.alias.password=*****

6. Build the app in Release mode with Device or one of Android emulator platforms option. Do not use any of the Ripple emulators option.

7. The package will be created inside 'bin/Android/Release' folder. The file to be deployed to Google App store is the one that does not end with (-unaligned.apk), e.g. "android-release.apk".

Friday, 27 March 2015

How to Pull File from an Android App

The other day when I tested my Apache Cordova based app, I tried to get a file from my Android phone to test that the file was created correctly by the app. I wanted to copy the file to a location somewhere in my Windows based desktop. Below are the steps of how I do this:
- open a command prompt
- enter 'adb shell', you might need to run this inside a folder that has adb.exe if that is not accessible globally
- enter 'run-as    your.application.name'
- enter 'chmod 777    targeted_File_Path' in order to give full access to the file
So after entering these commands, the command prompt would look like this:
C:\Users\Me>adb shell
shell@zara:/ $ run-as your.application.name
run-as your.application.name
shell@zara:/data/data/your.application.name $ chmod 777 /data/data/your.application.name/files/filename.jpg
data/data/your.application.name/files/filename.jpg                   <
shell@zara:/data/data/your.application.name $ 
- quit the adb shell or open a new command prompt window
- enter 'adb pull    targeted_File_Path    destination_Desktop_Folder'
On command prompt, it will be something like:
C:\Users\Me>adb pull /data/data/your.application.name/files/filename.jpg c:/DestinationDirectory
2097 KB/s (19335 bytes in 0.009s)


References:
http://stackoverflow.com/questions/13006315/how-to-access-data-data-folder-in-android-device
http://www.codeproject.com/Articles/825304/Accessing-internal-data-on-Android-device