How to show Android like toast messages in JavaFX (JFoenix)?

Question

I saw that it was possible to make material design toast messages in JavaFX when I ran JFoenix demo. How can I implement that in my own app? (I'm a JavaFX beginner)

Answer 1

Here is a small minimal example to get you started: Image sample

import javafx.animation.*;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

    public class Toast extends Label {
        private float displayTime = 0.90f;
        private float initialPositon =0;
        private float downBias = 10f;// the distance the label should sit below before appearing

        Interpolator interpolator = new Interpolator() {
            @Override
            protected double curve(double v) {
                //quadratic curve for upward motion
                return -4 * ( v - 0.5 ) * ( v - 0.5 ) +1;
            }
        };
        public Toast(String msg){
            super();
            this.setText(msg);
            this.setOpacity(0);// starting it with zero because we dont want it to show up upoun adding it to the root
            this.setBackground(new Background(new BackgroundFill(Color.WHEAT, CornerRadii.EMPTY, Insets.EMPTY)));// some background cosmetics
            this.setAlignment(Pos.CENTER);
        }
        public void appear(){
            this.setEffect(new DropShadow(20, Color.BLACK));// Shadow
            //creating animation in the Y axis
            Timeline timeline = new Timeline(
                    new KeyFrame(Duration.seconds(this.displayTime), new KeyValue(this.translateYProperty(),this.initialPositon-this.getMinHeight()-20, interpolator))
            );
            FadeTransition fd  = new FadeTransition(Duration.seconds(this.displayTime),this);
            fd.setCycleCount(1);
            fd.setFromValue(0);
            fd.setToValue(1.0);
            fd.setInterpolator(interpolator);
            fd.play();
            timeline.play();
        }
        public  void  setInitialPositon(float positon){
            this.initialPositon = positon+downBias;
            this.setTranslateY(positon+downBias);
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception{
        float sceneHeight = 230f;
        float sceneWidth =230f;
        Toast toast = new Toast("Hello World");
        toast.setMinWidth(sceneWidth-40);
        toast.setMinHeight(30);

        toast.setInitialPositon(sceneHeight);

        toast.setTranslateX(sceneWidth/2-toast.getMinWidth()/2);
        Button showToast = new Button("show toast");
        showToast.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent) {
                toast.appear();
            }
        });
        Pane root = new Pane();
        root.getChildren().addAll(toast,showToast);
        Scene myscene =new Scene(root, sceneWidth, sceneWidth);
        primaryStage.setScene(myscene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Don't forget to refactor the toast class to allow for more flexibility in-terms interpolators and other cosmetic features.