Enhancement: Possibility to style the toast about toast-phonegap-plugin HOT 23 CLOSED

It's only possible on iOS, so I didn't provide a hook for it in the JS API. I may add it in the future for iOS.

from toast-phonegap-plugin.

I guess it could be done for Android as well using a custom toast view.
Ref. http://developer.android.com/guide/topics/ui/notifiers/toasts.html#CustomToastView

from toast-phonegap-plugin.

+1

from toast-phonegap-plugin.

+1

from toast-phonegap-plugin.

👍

from toast-phonegap-plugin.

👍 for iOS styling.

from toast-phonegap-plugin.

Would love to see this feature... And maybe the option without rounded corners..

from toast-phonegap-plugin.

+1

from toast-phonegap-plugin.

would be nice to be able to set some sizes -- toast looks small on iPad.

from toast-phonegap-plugin.

It's quite easy to do it for both platform...

from toast-phonegap-plugin.

@OlivierCo Your comment isn't helpful.

How is it easy to do for both platforms? Do you have an example?

from toast-phonegap-plugin.

Are there any updates over this?

from toast-phonegap-plugin.

I want to show a red background colored toast message, how can I do that? any update ?

from toast-phonegap-plugin.

Let me give this a try now..

from toast-phonegap-plugin.

Got this working on Android (not released yet, so just FYI).
Not passing in the styling object will fall back to what you're used to:

  window.plugins.toast.showWithOptions({
    message: 'Toooooast',
    duration: 'long',
    position: 'bottom',
    styling: {
      backgroundColor: '#FF0000', // red
      borderRadius: 30, // a bit less than default, 0 means a square Toast
      alpha: 180, // 0-255, 0 being fully transparent
      padding: {
        top: 20,
        right: 30,
        bottom: 20,
        left: 30
     }
  }

I will need to look at iOS to make sure these property names make sense.

from toast-phonegap-plugin.

You are just awesome, I'm waiting iOS version too, now. Thank you for fast response.

from toast-phonegap-plugin.

iOS implementation is ready to go locally but I need to do a little rework to update the Android API as this is what I've now settled for:

  styling: {
    backgroundColor: '#FF0000',
    cornerRadius: 16,
    opacity: 0.75, // 0.0 to 1.0 just like CSS
    horizontalPadding: 16, // iOS uses the same values for left and right and it makes sense to keep it simple like this
    verticalPadding: 12 // ditto
  }

Of course you can pass in the same values for styling on iOS and Android, but if you want to use different values you can easily do:

  styling: {
    cornerRadius: iOS ? 16 : 20,
  }

Where iOS is a variable you can f.i. get from the device plugin.

i hope this makes sense and I'll try to wrap this up tomorrow.

from toast-phonegap-plugin.

Thank you so much for your effort beforehand. Waiting your commit impatiently.

from toast-phonegap-plugin.

To whom it may concern :)
For more advanced needs (on an Angular project) one can use https://github.com/Foxandxss/angular-toastr instead of this plugin.

from toast-phonegap-plugin.

The big difference between a native and an angular solution is, that this plugin is always on the highest view - even above inappbrowser. If most-top isn't important for you, grab angular, if not, this plugin is the best shot (less Dom nodes, smoother animation, background threads / non blocking.

from toast-phonegap-plugin.

Hey guys, thanks for the assistance and discussions in this issue.

I've now released 2.4.0 to npm which allows styles like these (iOS screenshots):

Check out the readme for details!

🍻
Eddy

from toast-phonegap-plugin.

Fantastic, Thanks @EddyVerbruggen :)

from toast-phonegap-plugin.

You are just God damn perfect ! Thank you @EddyVerbruggen

from toast-phonegap-plugin.