How can I create a notification bubble, similar to the notification badge on iPhones' menus, using JavaFX?

Question

I am new to JavaFX and I'm trying to create a notification badge similar to the image below.

It is to be used as a notification count and I was hoping to place it over the corner of a JavaFX button. My problem is that I cannot find a native solution that supports this. Can anyone recommend an approach?

Thanks

Answer 1

Something like this? Maybe not so pretty (I'm not an artist), but I think it may cover the solution.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.paint.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="${button.prefHeight}" prefWidth="${button.prefWidth}" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button fx:id="button" layoutY="8.0" mnemonicParsing="false" text="Click " AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
      <StackPane layoutX="57.0" layoutY="-13.0" AnchorPane.rightAnchor="-10" AnchorPane.topAnchor="-10">
         <children>
            <Circle radius="10.0" stroke="BLACK" strokeType="INSIDE">
               <fill>
                  <RadialGradient centerX="0.5" centerY="0.5" radius="0.8164556962025317">
                     <stops>
                        <Stop color="#ff361beb" />
                        <Stop color="WHITE" offset="1.0" />
                     </stops>
                  </RadialGradient>
               </fill>
            </Circle>
            <Label text="5" />
         </children>
      </StackPane>
   </children>
</AnchorPane>