How to add support for Samsung Multi Window and PopUp mode to your cordova android app

How to add support for Samsung Multi Window and PopUp mode to your cordova android app

With the latest samsung devices and the introduction of Android/Samsung MultiWindow and PopUp mode, you're able to split your screen and use more than 1 app at time. Really useful feature for multitasking.

All modern phones have multi-tasking capabilities, yet some are clearly better than others. Samsung Galaxy S6 multi window is not a new feature, it is actually quite stable and reliable.

But not only is the hardware which makes the difference, but also software. At less for an android application built with cordova, you'll be not able to use those modes automatically, you'll need to give the right permission to your app to access these features.

Features

Samsung multi window allows two type of views (as shown below):

Split screen view

Two apps share the screen without overlapping. You can adjust the size and location of for one app. The other app will take the rest of the screen.

Split screen view

Pop-up view

Two or more apps float on the screen. They can overlap, partially overlap with each other. You can move and re-size them individually without affecting others.

Android popup view

Requirements

We need to modify the AndroidManifest.xml file, however, as a good practice we will not modify it manually as everytime you build your project (or the addition of a new plugin) you'll lose your changes.

To prevent this, we are going to use the cordova-custom-config plugin which allow us to change the manifest from our config.xml easily.

Download the cordova-custom-config plugin using :

cordova plugin add cordova-custom-config 
# Or if you're using phonegap
phonegap plugin add cordova-custom-config

For more information about the plugin, visit the official repository here.

Enabling Multi Window and PopUp modes

To enable these views, you need to add the following block inside the <platform name="android"> tag in your config.xml file.

<!-- Note that this settings needs to be inside the android platform -->
<platform name="android">
   <!--Support for multiwindow and popup Samsung
     Note that the content needs to be inside the first <intent-filter> tag inside your manifest
   -->
   <config-file target="AndroidManifest.xml" parent="./application/activity/intent-filter">
        <category android:name="android.intent.category.MULTIWINDOW_LAUNCHER" />
   </config-file>
   <!-- Note that the content needs to be outside of any tag, but inside of the <application> tag-->
   <config-file target="AndroidManifest.xml" parent="./application">
        <uses-library android:required="false" android:name="com.sec.android.app.multiwindow"></uses-library>
        <meta-data android:name="com.samsung.android.sdk.multiwindow.penwindow.enable" android:value="true"/> 
        <meta-data android:name="com.sec.android.support.multiwindow" android:value="true" />
   </config-file>
   <!-- End support for samsung multiwindow-->
</platform>

The first config-file tag will create a launcher of your app in the menu bar where appears the apps that supports this feature. Remember that if you want that your app appears on the bottom (or top if there's no active split window) while trying to open another app i.e , you'll need to restart your device and then it will appear.

The second config-file tag will contain the permissions and the most important line of this setup. The uses-library tag specifies a shared library that the application must be linked against. This element tells the system to include the library's code in the class loader for the package. As your app probably is NOT only for marshmallow users, we need to set android:required to false in order to provide compatibility for previous versions as KitKat and Lollipop. 

And finally the meta-tags that will allow the use of those features if the library is available.

If android:required is set to true, the PackageManager framework won't let the user install the application unless the library is present on the user's device. Of this way, the Samsung users will be able to resize how they want your app.

Now build your app and test it on your device. Have fun

Become a more social person