Unity Native Toast - Technoob Technology

Unity engine is an awesome game engine but it doesn't contain a toast system within its API. In this article, you gonna learn how to create a toast system like the native Android toast system in Unity Engine. To accomplish this we need a tween engine and for this tutorial, we are using LeanTween which is available in the Unity asset store for free. You can change this to whatever tween engine you would like to use. Let's get started. 

This module contains only a single script and pretty easy to understand. Let's call the class as 'Toast' to give a taste of what this is for.

First, we need to create canvas prefab with a rounded rectangle and a text element.

Then We create the script called Toast and this should be a singleton in order to keep this toast canvas in every scene without destroying. The singleton pattern is simple and what it does is check if there is another toast canvas and if there is another one destroys the current one and doesn't destroy the game object when switching scenes. Then we add this script to the canvas element.

public static Toast instance;

private void Awake()
    {
        if (instance == null)
        {
            instance = this;
        }
        else if (instance != this)
        {
            Destroy(gameObject);
        }

        DontDestroyOnLoad(gameObject);
    }

We need references to the text elements Rect-transform and to the image elements Rect-transform in order to tween using LeanTween, and we need the reference to the text element to change the text through the script. You can get these using get components in the awake method. But for now, let's keep this as it is. You need to reduce the alpha of both image and text elements to hide them. Don't forget to turn off raycast target as this might block your user interface later if you don't do this.

public RectTransform basicStyleTextRect;
public Text basicStyleText;
public RectTransform basicStyleImageRect;

Now it's time to write the script. The method should be a static method in order to be able to call from other scripts. The code is very simple. A boolean value is needed to check if we are toasting when the method is called.

public static void MakeNativeToast(string _text)
{
        if (!instance.isNativeToasting)
        {
            instance.isNativeToasting = true;
            instance.basicStyleText.text = _text;
            LeanTween.alpha(instance.basicStyleTextRect, 1f, 0.8f).setIgnoreTimeScale(true).setOnComplete(() =>
            {
                LeanTween.delayedCall(0.8f, () => { LeanTween.alpha(instance.basicStyleTextRect, 0, 0.8f); }).setIgnoreTimeScale(true);
            }).setIgnoreTimeScale(true);
            LeanTween.alpha(instance.basicStyleImageRect, 0.75f, 0.8f).setIgnoreTimeScale(true).setOnComplete(() =>
            {
                LeanTween.delayedCall(0.8f, () => { LeanTween.alpha(instance.basicStyleImageRect, 0f, 0.8f).setIgnoreTimeScale(true); });
            }).setIgnoreTimeScale(true);;
            LeanTween.delayedCall(2.6f, () =>
            {
                instance.isNativeToasting = false;
                instance.ContinueNativeQueue();
            }).setIgnoreTimeScale(true);;
        }
}

What we do here is set the text elements text to the argument passed into the method and then increase the alpha value using Leantween and decreasing it according to the given time.


Now the native toast is working perfectly. The only problem in this script is if the method is called while it is toasting we gonna miss the second toast. We can use a Queue to avoid this issue. What we simply do is checking the isToasting bool and if true add the string argument to the queue to toast later.

We need a queue type of string and a simple method to continue the toasting process.

Queue<string> nativeQueue = new Queue<string>();

void ContinueNativeQueue()
    {
        if (nativeQueue.Count > 0)
        {
            string s = nativeQueue.Dequeue();
            MakeNativeToast(s);
        }
    }

The final code should look like this.

public static Toast instance;

public RectTransform basicStyleTextRect;

public Text basicStyleText;

public RectTransform basicStyleImageRect;

Queue<string> nativeQueue = new Queue<string>();

private void Awake()
    {
        if (instance == null)
        {
            instance = this;
        }
        else if (instance != this)
        {
            Destroy(gameObject);
        }

        DontDestroyOnLoad(gameObject);
    }

public static void MakeNativeToast(string _text)
    {
        if (instance.isNativeToasting)
        {
            instance.nativeQueue.Enqueue(_text);
        }
        else
        {
            instance.isNativeToasting = true;
            instance.basicStyleText.text = _text;
            LeanTween.alpha(instance.basicStyleTextRect, 1f, 0.8f).setIgnoreTimeScale(true).setOnComplete(() =>
            {
                LeanTween.delayedCall(0.8f, () => { LeanTween.alpha(instance.basicStyleTextRect, 0, 0.8f); }).setIgnoreTimeScale(true);
            }).setIgnoreTimeScale(true);
            LeanTween.alpha(instance.basicStyleImageRect, 0.75f, 0.8f).setIgnoreTimeScale(true).setOnComplete(() =>
            {
                LeanTween.delayedCall(0.8f, () => { LeanTween.alpha(instance.basicStyleImageRect, 0f, 0.8f).setIgnoreTimeScale(true); });
            }).setIgnoreTimeScale(true);;
            LeanTween.delayedCall(2.6f, () =>
            {
                instance.isNativeToasting = false;
                instance.ContinueNativeQueue();
            }).setIgnoreTimeScale(true);;
        }
    }


    void ContinueNativeQueue()
    {
        if (nativeQueue.Count > 0)
        {
            string s = nativeQueue.Dequeue();
            MakeNativeToast(s);
        }
    }

Related Articles,

• Object Pooling
• How to create an event manager
• How to create an advanced audio manager

Stay connected with our facebook page Technoob to get notified when new articles are published.