JavaFX Material Design Hamburgers and Transitions

Using Hamburgers from JFoenix material design library

Hamburgers are a great replacement for menu icons. In material design, hamburgers can be used to trigger various navigation components. In this post, i will show how to add hamburgers to your JavaFX application. I have made a thorough tutorial for JFXHamburger transition.

JFoenix library provides (Read about setting up material design library for JavaFX) JFXHamburger class for implementing Hamburger. It can be dragged and dropped  using Scene Builder, as demonstrated by the above video.

JFXHamburger without transition support is merely 3 parallel lines. But when you associate it with some cool transition, it will become wonderful. So let’s have a look in to the transitions.

HamburgerBackArrowBasicTransition
1. HamburgerBackArrowBasicTransition

This transition creates a back arrow from the 3 parrallel lines (Hamburger). This can be created by passing the created Hamburger object as parameter to the HamburgerBackArrowBasicTransition class.

HamburgerBackArrowBasicTransition transition = new HamburgerBackArrowBasicTransition(hamburger);
The animation can be started using play() method. The state of the transition ( either arrow or hamburger) is set through setRate() method. The animation is controlled by changing the rate between -1 and 1.
transition.setRate(-1);
hamburger.addEventHandler(MouseEvent.MOUSE_PRESSED,(e)->{
        transition.setRate(transition.getRate()*-1);
        transition.play();
});
As you can see, at first, the transition rate should be set to -1 which is the hamburger. After the user clicks on the hamburger, it can be updated by multiplying with -1, i.e. to 1. Now the Hamburger will turn into a arrow. For further clicks on the hamburger, it will iterate  between -1 and 1.

HamburgerBasicCloseTransition
2. HamburgerBasicCloseTransition

This transition converts the hamburger to a cross form. Usage of this one is very similar to the above except the class used.

HamburgerBasicCloseTransition transition = new HamburgerBasicCloseTransition(hamburger);

 

3. HamburgerSlideCloseTransitionHamburgerBasicCloseTransition

This transition converts the hamburger to a close form like before, with a cool transition.

HamburgerSlideCloseTransition transition = new HamburgerSlideCloseTransition(hamburger);

 

HamburgerBasicCloseTransition

4.HamburgerNextArrowBasicTransition

This transition converts the hamburger to a forward arrow.

HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);

 

Watch this tutorial in action from Genuine coder YouTube channel

Muhammed Afsal Villan
Muhammed Afsal Villan
https://afsalv.com
Muhammed Afsal Villan is an experienced full-stack developer, specialized in desktop and mobile application development. He also regularly publishes quality tutorials on his YouTube channel named 'Genuine Coder'. He likes to contribute to open-source projects and is always enthusiastic about new technologies.
Facebook Instagram Linkedin Mail Youtube

RELATED ARTICLESMORE FROM AUTHOR

48 COMMENTS