InAppBrowser - change button color, show spinner

[Nino_D_]

Hi, 

we need help with InAppBrowerser plugin, please.

After many days of testing various solutions, we haven't find a way to change color of back button and show spinner while loading external page. (we know spinner is white, so it can not be seen on white background). 

We have tried inserting CSS 
and also tried editing local CDVInAppBrowser.m file (located in .../plugins/org.apache.cordova.inappbrowser/src/ios) 

Button:
self.closeButton.tintColor = [UIColor colorWithRed:60.0 / 255.0 green:136.0 / 255.0 blue:230.0 / 255.0 alpha:1];
and changed it to:
self.closeButton.tintColor = [UIColor whiteColor];

Spinner:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
and changed it to:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

but without any success.

Is there any way to change color of back button and spinner in InAppBrowerser plugin using Intel XDK?

Thanks.

[Amrita_C_Intel]

Hello,

If you prefer to target specific buttons instead of changing the color for all of them as a group, you'll need to apply some custom CSS to your theme. Paste in the piece of code and replace the hex color value (like #000000) with the color of your choice!

.sg-back-button {
color: #000000;
background: #993399;
}

 For spinner below is the example.

<section class="spinner-1"> <div class="spinner"></div> </section>

.spinner-1 .spinner {

width: 100px;

height: 100px;

background-color: #28aadc;

border-radius: 100%; }

Or refer this example

http://tobiasahlin.com/spinkit/

click on source to see the code!

[Swati_S_Intel1 · Accepted solution]

@Nino, you would not be able to change the style of the buttons at javascript/css level. These properties are changed in the native part of the plugins. Your approach to change that in the .m file is correct, however, it depends where you are changing. If you are changing in the local copy of the plugin that change will not reflect into the build as the build system fetches the plugins directly from the web. For your purpose, I suggest you pull that plugin from git and make a local copy and modify as per your need and then add into XDK as local third party plugin.

Build Settings > Third-party plugins > Import local plugin

Hope this helps.

[Nino_D_]

@SWATI S. (Intel)

tnx for your help. We have tried that as well (in our desperation) but that didn't work either.

We'll try again. 

Just to clarify - we should:

1. download cordova-plugin-inappbrowser-master.zip from https://github.com/apache/cordova-plugin-inappbrowser

2. extract and paste in folder within app (e.g.) .../www/cordova-plugin-inappbrowser-custom/

3. edit CDVInAppBrowser.m file (my settings)

Toolbar:
self.toolbar.barStyle = UIBarStyleBlackOpaque;
change it to:
self.toolbar.barStyle = UIBarStyleBlack;

Button:
self.closeButton.tintColor = [UIColor colorWithRed:60.0 / 255.0 green:136.0 / 255.0 blue:230.0 / 255.0 alpha:1];
change it to:
self.closeButton.tintColor = [UIColor whiteColor];

add:
self.forwardButton.tintColor = [UIColor whiteColor];
self.backButton.tintColor = [UIColor whiteColor];

Spinner:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
change it to:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

self.spinner.frame = CGRectMake(454.0, 231.0, 20.0, 20.0);
change it to:
self.spinner.frame = CGRectMake(self.view.frame.size.width / 2 - 10, self.view.frame.size.height/ 2 - 10, 20, 20);

4. import as local plugin
name: cordova-plugin-inappbrowser
plugin ID: cordova-plugin-inappbrowser
import from: /cordova-plugin-inappbrowser-custom/

5. uncheck @ standard plugins: InAppBrowser

6. build app (fingers crossed)

[Nino_D_]

... and it works. Finnaly. 

Thank you SWATI S. (Intel)

[Swati_S_Intel1]

@Nino, The steps you mentioned seem correct, though you may want to change the name of the plugin and pluginID to avoid confusion between the standard plugin and your custom plugin.

details of step 3 is outside the scope of XDK, but I looked at the code anyways, it seems that the closebutton style is derived from the UIBarButtonSystemItemDone, so not sure if changing the tint will work

For forward and back arrows you can change the Unicode in this line.  Again I'm not an expert in that so don't know for sure.

NSString* backArrowString = NSLocalizedString(@"◄", nil); // create arrow from Unicode char

[Swati_S_Intel1]

Oh good to know, it worked for you!

[Nino_D_]

@SWATI S. (Intel)

It works. :) Your direction was all we needed. Tnx.

I haven't change plugin name/id from original, because they should be the same as name/ID in plugin.xml (that I didn't want to edit). The less is changed - better.