Ionic Tip: Quickly restyle the Cordova In App Browser Plugin

Skip my rambly intro and go right to the solution

Intro

I just ran into an issue with the Cordova In App Browser plugin today. A client wanted to of course keep the user within their “app experience” while still showing external links, so of course I installed and used the cordova in app browser plugin. I already had ngCordova running so integration into our Ionic app was super easy. However, while it now opened in a window instead of Chrome, it still had a default gray background.  This is I guess better than Chrome, but doesn’t really keep the “app experience” because the theme is lost.

First Thought

At first I thought I’d try to modify the plugin to be theme-able.  It’s certainly possible, I got it working well on Android, but it was ugly.  Options are passed to the plugin in a awkward string syntax instead of something like a a JavaScript object, i.e. “location=yes,hidden=no”.  Furthermore on Android they are only “yes” or “no” options, so the plugin code converts them into a hash map of string to boolean via string parsing…

I created a new parsing function in the native Java code so you could pass in values instead of just yes or no, like “location=yes,navbarColor=#0099cc”, and that worked well, but once I saw the craziness that is Objective C on the iOS side, I decided not to pursue this more elaborate (albeit better) solution.  Instead I decided to go quick and dirty and just fork the plugin and hardcode in my colors.  Call me lazy, but I don’t want to learn Objective C just to add color configuration to a browser.

Fork, Update Config.xml, Change Colors

I went to the plugin’s github page: https://github.com/apache/cordova-plugin-inappbrowser

Forked it into my own account, and then updated my config.xml to use my new forked version:

<plugin name="cordova-plugin-inappbrowser" spec="https://github.com/roblouie/cordova-plugin-inappbrowser.git" />

With my new fork in place I started editing the colors.  I reference the line numbers in the current version of the plugin, but they may vary as the plugin is updated.  However barring major changes, you should still be able to find the right lines by searching for the original code.



Android

In Android, in the file src/android/InAppBrowser.java on line 615 you’ll find:

toolbar.setBackgroundColor(android.graphics.Color.LTGRAY);

You can simply change that to:

toolbar.setBackgroundColor(android.graphics.Color.parseColor("#0099cc"));

Of course substituting in the hex color of your choice.

If you want to change any of the button styles on Android, they are simply stored as png files in the src/android/res folder.

iOS

The in app browser on iOS looks a little different, but it’s still very easy to change the address bar background color and the ‘Done’ button background color.  First you’ll need to convert your hex color into RGB values between 0 and 1 instead of 0 and 255.  You could do the math or just use this site: http://uicolor.xyz/#/hex-to-ui

You’ll then want to add this color to the various components in src/ios/CDVInAppBrowser.m.

Add it to the toolbar on line 601:

self.toolbar.tintColor = [UIColor colorWithRed:0.00 green:0.60 blue:0.80 alpha:1.0];

Change the address label background color on line 612:

self.addressLabel.backgroundColor = [UIColor colorWithRed:0.00 green:0.60 blue:0.80 alpha:1.0];

Change the view background color on line 648:

self.view.backgroundColor = [UIColor colorWithRed:0.00 green:0.60 blue:0.80 alpha:1.0];

Conclusion

To see your changes, make sure you remove the old plugin first with

cordova plugin remove cordova-plugin-inappbrowser

Then re-building to pull down your forked version.  You should then see the results of your work:

 

If you want to see the exact changes I made, you can see the comparison of my fork to the original here: https://github.com/apache/cordova-plugin-inappbrowser/compare/master…roblouie:master




Thoughts?  Ideas?  Know of a better way to theme the in app browser?  Let me know in the comments below!