Make Icon Notification javafx - notifications

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 ^^

Answer 1

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

Answer 2

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;
}