Native spinner

[Rémi Couturier]

Hi, is there a way to trigger a native "spinner" in Cordova ?

I'm referring to the ProgressBar class ("The indeterminate progress bar can be either a spinning wheel or a horizontal bar.") In Android.
And to the UIActivityIndicatorView class in iOS.

I've found and tested severals plugins which seem to do that, but visually their "spinner" / "spinning wheel" doesn't look the same as the one you get natively in Android Lollipop or iOS 8:

• https://github.com/Paldom/SpinnerDialog
  
• https://github.com/Initsogar/cordova-activityindicator
  
• https://github.com/sidneys/cordova-plugin-progressview (visually the closest to what I'm trying to achieve, but don't seems to work in Cordova 5.0.0)

[jcesarmobile]

The first one uses the UIActivityIndicatorView for ios and the ProgressBar for android

[Kerri Shotts]

It might help if we knew what kind of appearance you were aiming for.

[Rémi Couturier]

I'd like to find something as close as possible to the OS respective's default spinner (Android & iOS).

Something like the ones provided by ionic would be great (see the android and ios examples in the following link): http://ionicframework.com/docs/api/directive/ionSpinner/

[Steve Sobol - Lobos Studios]

The obvious follow-up question is, why not just use Ionic? I do; it's awesome.

Rémi Couturier wrote:

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Lobos Studios - Website and Mobile App Design & Development; IT Support; Computer Maintenance
Toll Free  877.919.4WEB - Apple Valley 760.684.8859 - Los Angeles 310.945.2410 - Cleveland 216.242.4010
www.LobosStudios.com * www.facebook.com/LobosStudios * @LobosStudios

[Rémi Couturier]

Yes but visually speaking I'd prefer something like the ones provided by ionic (closest to the default native spinner): http://ionicframework.com/docs/api/directive/ionSpinner/

[Kerri Shotts]

And how are the other plugins you mentioned missing the mark in your eyes? Visuals would help, obviously.

Of course there's no reason that you have to throw something like that up using native code -- Use Ionic's versions or any of the other numerous spinner implementations on the web. You can detect the device platform easily enough to decide which one you want to show.

On Thursday, May 14, 2015 at 4:19:23 PM UTC-5, Steve Sobol wrote:

The obvious follow-up question is, why not just use Ionic? I do; it's awesome.

Rémi Couturier wrote:

I'd like to find something as close as possible to the OS respective's default spinner (Android & iOS).

Something like the ones provided by ionic would be great (see the android and ios examples in the following link): http://ionicframework.com/docs/api/directive/ionSpinner/

On Thursday, May 14, 2015 at 10:08:56 PM UTC+2, Kerri Shotts wrote:

It might help if we knew what kind of appearance you were aiming for.

On Thursday, May 14, 2015 at 5:24:10 AM UTC-5, Rémi Couturier wrote:

Hi, is there a way to trigger a native "spinner" in Cordova ?

I'm referring to the ProgressBar class ("The indeterminate progress bar can be either a spinning wheel or a horizontal bar.") In Android.
And to the UIActivityIndicatorView class in iOS.

I've found and tested severals plugins which seem to do that, but visually their "spinner" / "spinning wheel" doesn't look the same as the one you get natively in Android Lollipop or iOS 8:

• https://github.com/Paldom/SpinnerDialog
  
• https://github.com/Initsogar/cordova-activityindicator
  
• https://github.com/sidneys/cordova-plugin-progressview (visually the closest to what I'm trying to achieve, but don't seems to work in Cordova 5.0.0)

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to

phonegap+unsubscribe@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.

To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Rémi Couturier]

No doubt ionic is awesome. However, I started the app I'm currently working on, long before ionic was around.

The other main raison for which I don't use ionic, is that it's tightly coupled to Angular. And my app isn't build with it.
I don't want to throw Angular in the app just to show/hide some spinner. I get that ionic as a lot in store, but I simply don't need it.

Something I would find very cool, is that some ionic's components (ex: ion-spinner) be available as standalone cordova's plugin, not coupled to the ionic's framework or Angular.

[Kerri Shotts]

 What is it, specifically, that you don't like about the ones you've tried? Because that first plugin you list is pretty much as native as can get (since it uses the native ProgressDialog / UIActivityIndicatorView classes). I can't read your mind regarding what you find problematic with any of the ones you've listed.

You don't have to use ionic -- there are plenty of other spinners out there that you can use and/or build from. PG is web-based, so there's a huge amount of resources out there:

* http://evil-icons.io

* https://codepen.io/Keyamoon/pen/aHxuq

* https://github.com/tobiasahlin/SpinKit

* http://loading.io/#

* http://jxnblk.com/loading/

* http://samherbert.net/svg-loaders/

* http://projects.lukehaas.me/css-loaders/

* http://codepen.io/aurer/pen/jEGbA

Do note that apps take a lot of liberties with their spinners, so there's no requirement that your spinner be pixel-perfect native. A lot of apps design their spinner to add that little extra flair, so I doubt users are going to care if you're using the native spinner or not. 

[Rémi Couturier]

The fact is that I already have "spinners" in place in my app.
But I want/need the application to feel even more "native". This implies that I replace them with ones that are closer to Android and iOS.
Visually, yes, the ionic's android and ios one are perfect, but as I've stated in another response in this post, I don't use ionic for building my app.
The other plugins I've mentioned and tested are missing the mark because their respective rendered "spinner" are not looking like the default one in Android and iOS.

Of course there's no reason that you have to throw something like that up using native code

Cordova enables you to speak and use native components. So why do without it ?

To my eyes, along with some others UI components, "spinners" are details that make your app feels more native, and users more at home, if you stick to the native's defaults styles.

On Thursday, May 14, 2015 at 11:39:14 PM UTC+2, Kerri Shotts wrote:

And how are the other plugins you mentioned missing the mark in your eyes? Visuals would help, obviously.

Of course there's no reason that you have to throw something like that up using native code -- Use Ionic's versions or any of the other numerous spinner implementations on the web. You can detect the device platform easily enough to decide which one you want to show.

On Thursday, May 14, 2015 at 4:19:23 PM UTC-5, Steve Sobol wrote:

The obvious follow-up question is, why not just use Ionic? I do; it's awesome.

Rémi Couturier wrote:

I'd like to find something as close as possible to the OS respective's default spinner (Android & iOS).

Something like the ones provided by ionic would be great (see the android and ios examples in the following link): http://ionicframework.com/docs/api/directive/ionSpinner/

On Thursday, May 14, 2015 at 10:08:56 PM UTC+2, Kerri Shotts wrote:

It might help if we knew what kind of appearance you were aiming for.

On Thursday, May 14, 2015 at 5:24:10 AM UTC-5, Rémi Couturier wrote:

Hi, is there a way to trigger a native "spinner" in Cordova ?

I'm referring to the ProgressBar class ("The indeterminate progress bar can be either a spinning wheel or a horizontal bar.") In Android.
And to the UIActivityIndicatorView class in iOS.

I've found and tested severals plugins which seem to do that, but visually their "spinner" / "spinning wheel" doesn't look the same as the one you get natively in Android Lollipop or iOS 8:

• https://github.com/Paldom/SpinnerDialog
  
• https://github.com/Initsogar/cordova-activityindicator
  
• https://github.com/sidneys/cordova-plugin-progressview (visually the closest to what I'm trying to achieve, but don't seems to work in Cordova 5.0.0)

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to

phonegap+u...@googlegroups.com

For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.

To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Rémi Couturier]

Because that first plugin you list is pretty much as native as can get (since it uses the native ProgressDialog / UIActivityIndicatorView classes).

Yes, and yet I can't find why visually the rendered spinner is not looking like the default one in android (or iOS).

Web-based ones are of course solutions that I have envisaged, in fact the spinner in place in my app right know is built with SVG.
I can't afford right know to have a custom spinner that give the app more personality, so for that time being i'd prefer to stick to the android and ios defaults.

So I just wanted to know if there was a plugin that would output "spinners", visually identical to the ionic's ones. Which if that plugin existed, would be the simplest solution in term of implementation.

Now I understand, and I agree with you, in the end, users are not going to care much about the spinners styles.

Anyway, thanks for your help :)

[Kerri Shotts]

What I've asked (repeatedly) is what about those plugins do you have an issue with? A screenshot here is going to be worth 1000 words here, and an animation even more. Is it the text? The fade? the spin animation itself? The size? I can't read your mind as to what it is you don't like. 

"Visually identical to the ionic's ones" is going to require using Ionic's code, obviously. Look closely enough, and I'll bet you'd find differences there between them and the native spinners, too.

Of course, since Ionic is MIT, you can also see their code and adapt it as needed. It should be reasonably trivial to abstract it out:

https://github.com/driftyco/ionic/blob/master/js/angular/controller/spinnerController.js

https://github.com/driftyco/ionic/blob/master/js/angular/directive/spinner.js

https://github.com/driftyco/ionic/blob/master/scss/_spinner.scss

[jcesarmobile]

The fist one uses the native components you want, so you must be wrong about how the look like and you aren't looking for the real native ones.
As Kerri told you, provide an example (image) with the native look you want

[Rémi Couturier]

Here is a screenshot from the https://github.com/Paldom/SpinnerDialog plugin's spinner. Ok maybe it's a native one, but matching a previous version of Android maybe?

The actual spinner in Android Lollipop is visually more like to the following examples:
- see the Android (and in iOS) one: http://ionicframework.com/docs/api/directive/ionSpinner/

- another example of android native's spinner from polymer: https://www.polymer-project.org/0.5/components/paper-spinner/demo.html

[Kerri Shotts]

What SDK level are you targeting?

[Rémi Couturier]

Here is what I have in the AndroidManifest.xml file: <uses-sdk android:minSdkVersion="17" android:targetSdkVersion="22" />

[Kerri Shotts]

Ok.

Throw up an alert -- can you post what that looks like?

Also, based on the other screenshot, I'm assuming you've got a bare-bones project -- care to share? 

[Rémi Couturier]

I threw an alert, here is the result:

Also, based on the other screenshot, I'm assuming you've got a bare-bones project -- care to share? 

Yes, what do you want me to share, the .apk?
I've attached it to this reply. 

[Jesse Monroy]

I think Kerri meant to source code.

Admittedly, I am curious too. I detest large frameworks, so I do my best to make modules that I can share. FWIW, I have growls (aka pop-down or scroll-down notifications) working, but have yet to post the code. Timing in this case is fixed, I think you may want to control the behaviour. (Please state if I have made an incorrect assumption.)

Jesse

[Rémi Couturier]

The source code for my test is pretty basic. It's a bare-bone cordova app, with the https://github.com/Paldom/SpinnerDialog plugin.
The only code I've added are those two lines of JavaScript in /www/js/index.js (in the existing receivedEvent method):

    window.plugins.spinnerDialog.show();
    alert('hello!');

Also, what do you mean by:

Timing in this case is fixed, I think you may want to control the behaviour.

Are you talking about your growls' module? What does this have to do with the spinner?

Thanks!

[Kerri Shotts]

Rémi,

Ah!

The alert is also using the old theme -- which is because of what's specified in AndroidManifest.xml on line 8 (at least the default AndroidManifest.xml). Take a look at the "android:theme" attribute. It's probably set to "@android:style/Theme.Black.NoTitleBar" or some such. And *poof*, Cordova apps will use the old Android theme when something native pops up.

If you change this to "@android:style/Theme.Material.Light", you'll get the material theme. Of course, that doesn't work on <5.x devices, so this isn't a solution, but just part of the journey.

But that's why the progress spinner doesn't look right -- if you use the Material theme, it does. (-ish... the spinner is right, but there's a white dialog around it that doesn't look quite right..., at least on my emulator)

[Kerri Shotts]

Yeah, I meant source, but the APK has it built in, so that worked too. :-)

[Rémi Couturier]

Ah! I understand now. Following your explanation, I set the android:theme attribute to "@android:style/Theme.Material.Light" and it worked!
Thanks for your help, I learned something :)

[Jesse Monroy]

On Sunday, May 17, 2015 at 4:28:39 PM UTC-7, Rémi Couturier wrote:

The source code for my test is pretty basic. It's a bare-bone cordova app, with the https://github.com/Paldom/SpinnerDialog plugin.
The only code I've added are those two lines of JavaScript in /www/js/index.js (in the existing receivedEvent method):

    window.plugins.spinnerDialog.show();
    alert('hello!');

Also, what do you mean by:

Timing in this case is fixed, I think you may want to control the behaviour.

Are you talking about your growls' module? What does this have to do with the spinner?

Thanks!

@Rémi,
spinners are generally meant to distract the end-user. Generally the serve no useful purpose,
other than to distract the user. FWIW: most spinners are nothing more than animated GIFs.
In your case, my suggestion appears to have no worth.

Have a good day.
Jesse