Make Icon Notification javafx

Question

I would like to ask how is it possible to make a notification icon over an existing Node ! Here is a link I'm using as inspiration ! http://www.red-team-design.com/notification-bubble-css3-keyframe-animation It would really save me if anyone could give me a help ^^

But you should to show us your effort first. Show testing demo code, at least code of css and/or animation. — Uluk Biy
– Uluk Biy, Commented Nov 17, 2013 at 21:50
I've tried using the tooltip but it turns out not good, that is why I'm asking in the first place man ^^ — minedun6
– minedun6, Commented Nov 17, 2013 at 21:57

amarildo.xyz · Accepted Answer · 2019-05-26 19:33:52Z

2

You can find an example here:
https://www.billmann.de/post/2012/08/05/javafx-miniiconanimationbutton/

edited May 26, 2019 at 19:33

amarildo.xyz

1,0021 gold badge15 silver badges23 bronze badges

answered Nov 19, 2013 at 9:24

Hendrik Ebbers

2,61021 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zouhair Sassi · Accepted Answer · 2019-08-05 15:33:47Z

I just solved The problem. I've used the animation created by billman but not extending the StackPane this time, but by extending the Button Node, and I've set the Notification icon to be extending from the StackPane and it worked out perfectly !!

Here the way to do so:

AnimatedButton.java

    import javafx.animation.Interpolator;
    import javafx.animation.KeyFrame;
    import javafx.animation.KeyValue;
    import javafx.animation.Timeline;
    import javafx.animation.TranslateTransition;
    import javafx.scene.Node;
    import javafx.scene.control.MenuItem;
    import javafx.util.Duration;


    public class Icons extends MenuItem {

    private final Node icon;

    private AnimationType type;

    public Icons(String text, Node icon, AnimationType type) {
        setText(text);
        setGraphic(icon);
        this.icon = icon;
        this.type = type;
        addAnimation();
    }

    private void addBlinkAnimation() {
        final Timeline timeline = new Timeline();
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.setAutoReverse(true);
        final KeyValue kv = new KeyValue(icon.opacityProperty(), 0.0);
        final KeyFrame kf = new KeyFrame(Duration.millis(700), kv);
        timeline.getKeyFrames().add(kf);
        timeline.play();
    }

    private void addJumpAnimation() {
        final TranslateTransition translateTransition = new TranslateTransition(Duration.millis(200), icon);
        final double start = 0.0;
        final double end = start - 4.0;
        translateTransition.setFromY(start);
        translateTransition.setToY(end);
        translateTransition.setCycleCount(-1);
        translateTransition.setAutoReverse(true);
        translateTransition.setInterpolator(Interpolator.EASE_BOTH);
        translateTransition.play();
    }

    public enum AnimationType {

        BLINK, JUMP, NONE;
    };

    private void addAnimation() {
        switch (type) {
            case BLINK:
                addBlinkAnimation();
                break;
            case JUMP:
                addJumpAnimation();
                break;
            case NONE:
                break;
            default:
                break;
        }
    }
}

here's the main.java

    import javafx.application.Application;
    import javafx.scene.Node;
    import javafx.scene.Scene;
    import javafx.scene.control.Label;
    import javafx.scene.control.MenuButton;
    import javafx.scene.image.Image;
    import javafx.scene.image.ImageView;
    import javafx.scene.layout.StackPane;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Circle;
    import javafx.stage.Stage;


    public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        MenuButton menu = new MenuButton("Bienvenue, Yassine", new ImageView(new Image("http://cdn1.iconfinder.com/data/icons/fs-icons-ubuntu-by-franksouza-/32/google-chrome.png", 20, 20, true, true)));
        menu.setCenterShape(true);
        Icons btn = new Icons("Notification", createNotification("5"), Icons.AnimationType.JUMP);
        Icons btn2 = new Icons("Mails", createNotification("4"), Icons.AnimationType.JUMP);
        Icons btn3 = new Icons("Private Messages", createNotification("10"), Icons.AnimationType.JUMP);
        menu.getItems().addAll(btn, btn2, btn3);
        StackPane root = new StackPane();
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("notification_icon.css").toExternalForm());
        root.getChildren().add(menu);
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

    private Node createNotification(String number) {
        StackPane p = new StackPane();
        Label lab = new Label(number);
        lab.setStyle("-fx-text-fill:white");
        Circle cercle = new Circle(10, Color.rgb(200, 0, 0, .9));
        cercle.setStrokeWidth(2.0);
        cercle.setStyle("-fx-background-insets: 0 0 -1 0, 0, 1, 2;");
        cercle.setSmooth(true);
        p.getChildren().addAll(cercle, lab);
        return p;
    }

}

and the css

    .label{
    -fx-font-size: 12;
    -fx-font-weight: bold;
    -fx-text-fill: black;
    -fx-padding:5;
}

Collectives™ on Stack Overflow

Make Icon Notification javafx

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest