Customizing Login Page for Mobile SDK Hybrid Android App

Question

I have a Hybrid Remote Android App built using Mobile SDK 3.1. It is configured to use a custom community login page (it is the only entry in res/xml/servers.xml). It's working fine, except for two issues which don't exist in the iOS version of the app:

1. How do I suppress the header bar on the login page? Shown here inside the red box:

2. Is there something about the login page that prevents me from loading cordova via <script src="https://localhost/cordova.js"></script>? This works fine in the app, but the login page reports connection refused in the debugger. How can I lift this restriction? I need to use the splashscreen plugin (via javascript) once the login form is submitted to show the splash until the app is fully loaded. Again, working fine on iOS.

I suspect that the Mobile SDK handles the login page with an Android WebView which is configured to show the titlebar and to disallow localhost access, but I'm just guessing here; I know little about native Android dev and have no idea how to modify.

Answer 1

After digging around in the Salesforce MobileSDK for Android, it seems clear that both of my problems are due to design decisions within the Android version of the SDK.

For #1, suppressing the login page title bar probably could be accomplished by changing an AndroidManifest.xml (possibly the app's; certainly the MobileSDK plugin's), except that the code assumes that title bar is present, and causes a null pointer exception if it isn't. So you'll have to modify the code.

First, update the plugin's manifest (plugins/com.salesforce/src/android/libs/SalesforceSDK/AndroidManifest.xml), and find:

    <!-- Login activity -->
    <activity android:name="com.salesforce.androidsdk.ui.LoginActivity"
        android:theme="@style/SalesforceSDK.ActionBarTheme" />

and change android:theme to "@android:style/Theme.Black.NoTitleBar.Fullscreen". Next, open:

app/plugins/com.salesforce/src/android/libs/SalesforceSDK/src/com/salesforce/androidsdk/ui/LoginActivity.java

find the onCreate and comment out these two lines:

    // We'll show progress in the window title bar
    getWindow().requestFeature(Window.FEATURE_PROGRESS);
    getWindow().requestFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

Finally, find method loadingLoginPage, and replace ab.setTitle(loginUrl); with:

    if (ab!=null) {
        ab.setTitle(loginUrl);
    }

You'll need to rebuild the sdk; cordova doesn't seem to do so for me. I use the following:

cd platforms/android
ant debug  # or ant release for release version

For #2, serving files from localhost inside the login view, it looks like the app's main web view is an instance of SalesforceDroidGapActivity which has support for localhost urls (via SalesforceIceCreamWebViewClient), but the login page is an instance of LoginActivity which extends AccountAuthenticatorActivity, and has no localhost support. Dropping in one for the other doesn't look practical either. I think the login view should have access to file:// urls, but I'm not sure if the cordova js file and plugins would be accessible via such a file url; I'll update this post if I learn more.

Answer 2

A more elegant solution would be to add in the Manifest file the following:

 <activity
     android:name="com.salesforce.androidsdk.ui.LoginActivity"
     android:theme="@style/SalesforceTheme.NoActionBar"
     tools:replace="android:theme"
  />