Android CircularFloatingActionMenu Introduction

February 13, 2018 Oclemy Android Menu 4 minutes, 16 seconds

Android CircularFloatingActionMenu is a custom menu that represents it's menu items in a circular manner.

Android CircularFloatingActionMenu

This menu was written by O─čuz Bilgener back in the year 2014 and is available in github.

A downloadable sample is included here.

First a floating action button is shown at the right bottom of the screen or seven other positions within the screen. Here are the positions this button can be shown:

No. POSITION
1. Top Left
2. Top Center
3. Top Right
4. Right Center
5. Left Center
6. Bottom Left
7. Bottom Center
8. Bottom Right

If the user clicks this button circular menu items' icons popup with nice animations.

The user can then click the menu items and navigate to a different page.

Advantages of CircularFloatingActionMenu

  1. It's easy to use and customize.

  2. It confines items in a small space. Only a small circular floating action button gets displayed at first. Then on clicking this button, it's when the menu items' icons get displayed in a popup that gets dismissed oncliking an item. This means that CircularFloatingActionMenu can get used in the smallest of spaces.

  3. It's modern and has awesome animations.

  4. It's free and open source.

Definition of CircularFloatingActionMenu

This library comprises of two main parts:

No. Part Description
1. FloatingActionButton The floating action button that gets clicked to display menu items.
2. FloatingActionMenu The menu that contains the menu items and get's displayed in an animated popup
3. SubActionButton The individual menu items

It also have two classes that define the animations used:

No. Class
1. DefaultAnimationHandler
2. MenuAnimationHandler

1. FloatinActionButton

The FloatinActionButton is a class that resides in the package com.oguzdev.circularfloatingactionmenu.library:

package com.oguzdev.circularfloatingactionmenu.library;

It derives from FrameLayout:

public class FloatingActionButton extends FrameLayout {}

It defines public constants that determine it's placement position within the screen viewport:

    public static final int POSITION_TOP_CENTER = 1;
    public static final int POSITION_TOP_RIGHT = 2;
    public static final int POSITION_RIGHT_CENTER = 3;
    public static final int POSITION_BOTTOM_RIGHT = 4;
    public static final int POSITION_BOTTOM_CENTER = 5;
    public static final int POSITION_BOTTOM_LEFT = 6;
    public static final int POSITION_LEFT_CENTER = 7;
    public static final int POSITION_TOP_LEFT = 8;

These constants will be changing the gravity of the FAB.

FAB Positions

Creating FloatingActionButton

The FloatingActionButton provides a public constructor with the following parameters:

public FloatingActionButton(Context context, ViewGroup.LayoutParams layoutParams, int theme,
                                Drawable backgroundDrawable, int position, View contentView,
                                FrameLayout.LayoutParams contentParams,
                                boolean systemOverlay) {}

However, it provides a Java Builder class for easy creation using a fluent interface. The builder class will be returning a new instance of the FloatingActionButton on calling the build( method.

 public static class Builder {}

Using FloatingActionButton

FloatingActionButtons are easy to use. The Builder class we mentioned makes this easy to use as we don't have to instantiate the FloatingActionButton directly.

FloatingActionButton fab = new FloatingActionButton.Builder(this)
                                        .setContentView(myIcon)
                                        .build();

Common Methods

Let's look at some public methods that can be used with FloatingActionButton for various purposes:

No. Method Description
1. setPosition(int position, ViewGroup.LayoutParams layoutParams) This method will set the position of the FAB on the screen by calculating its gravity from the passed position parameter.The parameter is one of the 8 specified constants.
2. setContentView(View contentView, FrameLayout.LayoutParams contentParams) This method will specify the view to be displayed inside this FloatingActionButton
3. getActivityContentView() This method returns the main Content view from the activity context.

2. FloatingActionMenu

This will be shown in an animated popup when the FloatingActionButton is clicked.

This menu will contain menu items

Definition of FloatingActionMenu

FloatingActionMenu is a class and belongs to com.oguzdev.circularfloatingactionmenu.library package.

package com.oguzdev.circularfloatingactionmenu.library;

This class doesn't inherit from any class:

public class FloatingActionMenu {}

Creating FlaotingActionMenu

FloatingActionMenu has one public constructor with several parameters:

public FloatingActionMenu(final View mainActionView,
                              int startAngle,
                              int endAngle,
                              int radius,
                              List<Item> subActionItems,
                              MenuAnimationHandler animationHandler,
                              boolean animated,
                              MenuStateChangeListener stateChangeListener,
                              final boolean systemOverlay) {}

However, we don't have to use this constructor directly instead this class defines us an inner static builder class to create our menu in a fluent manner.

public static class Builder {}

Using FloatingActionMenu

It's easy to create and use FloatingActionMenu using the builder pattern:

FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)
                                    .addSubActionView(button1)
                                    .addSubActionView(button2)
                                    // ...
                                    .attachTo(actionButton)
                                    .build();

3. SubActionButton

This is basically small button implementation with the look and feel of FloatingActionButton.

Several of these buttons get used as the menu items displayed in the FloatinActionMenu popup.

Definition of SubActionButton

This class like the others is defined in the package com.oguzdev.circularfloatingactionmenu.library.

package com.oguzdev.circularfloatingactionmenu.library;

Like the FloatingActionButton, it derives from the android.widget.FrameLayout:

public class SubActionButton extends FrameLayout {}

Creating SubActionButton

This class has one public constructor for its creation.

  public SubActionButton(Context context, FrameLayout.LayoutParams layoutParams, int theme, Drawable backgroundDrawable, View contentView, FrameLayout.LayoutParams contentParams) {}

However, like the other previous two classes, we would typically want to use the fluent Builder pattern.

public static class Builder {}

Usage of SubActionButtons

Here's a usage example.

SubActionButton.Builder itemBuilder = new SubActionButton.Builder(this);
// repeat many times:
ImageView itemIcon = new ImageView(this);
itemIcon.setImageDrawable( ... ); 
SubActionButton button1 = itemBuilder.setContentView(itemIcon).build();

4. Installation of Android CircularFloatingActionMenu.

Requirements.

This library does require API levle 15 and above

  • API >= 15

You then fetch the Android Archive from Maven Central:

dependencies {
    compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2'
}

Comments