Ionic Tip: Quickly restyle the Cordova In App Browser Plugin
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.
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.
In Android, in the file src/android/InAppBrowser.java on line 615 you’ll find:
You can simply change that to:
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.
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];
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!