How to create toast in phonegap?

Question

How to create toast in android application using phonegap / cordova?

Thanx!

Answer 1

First create a ToastPlugin.java

package com.company.plugins;

import org.apache.cordova.api.CallbackContext;
import org.apache.cordova.api.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

import android.util.Log;
import android.widget.Toast;

public class ToastPlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args,
            CallbackContext callbackContext) throws JSONException {

        String message = args.getString(0);

        // used to log the text and can be seen in LogCat
        Log.d("Toast Plugin", "Calling the Toast...");
        Log.d("Toast Plugin", message);

        if (action.equals("shortToast")) {          
            this.shortToast(message, callbackContext);
            return true;
        } else if (action.equals("longToast")) {
            this.longToast(message, callbackContext);
            return true;
        }
        return false;
    }

    private void shortToast(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            Toast.makeText(cordova.getActivity().getApplicationContext(),
                    message, Toast.LENGTH_SHORT).show();
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }

    private void longToast(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            Toast.makeText(cordova.getActivity().getApplicationContext(),
                    message, Toast.LENGTH_LONG).show();
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

Then create a toastPlugin.js

//Plugin file should be always after cordova.js
//There is always better way to create, but this also works

window.shortToast = function(str, callback) {   
    cordova.exec(callback, function(err) {
        callback('Nothing to echo.');
    }, "ToastPlugin", "shortToast", [ str ]);
};

window.longToast = function(str, callback) {
    cordova.exec(callback, function(err) {
        callback('Nothing to echo.');
    }, "ToastPlugin", "longToast", [ str ]);
};

Link these files in your project, now you can call in JavaScript as :

• shortToast("Short Toast Message Here...");
• longToast("Long Toast Message Here...");