Convert Figma logo to code with AI

Nightonke logoBoomMenu

A menu which can ... BOOM! - Android

5,807
1,157
5,807
120

Top Related Projects

You can easily add awesome animated context menu to your app.

Android Floating Action Button based on Material Design specification

Tap Bar Menu

The idea of ResideMenu is from Dribbble 1 and 2. It has come true and run in iOS devices. iOS ResideMenu This project is the RefsideMenu Android version. The visual effect is partly referred to iOS version of ResideMenu. And thanks to the authors for the above idea and contribution.

Quick Overview

BoomMenu is an Android library that provides an animated, customizable menu button with multiple sub-buttons. It offers various animation styles and configurations, allowing developers to create visually appealing and interactive menu buttons for their Android applications.

Pros

  • Highly customizable with numerous animation styles and configurations
  • Smooth and visually appealing animations
  • Easy to integrate into existing Android projects
  • Supports both Java and Kotlin

Cons

  • Limited to Android platform only
  • May require additional performance optimization for complex configurations
  • Learning curve for advanced customizations
  • Potential compatibility issues with older Android versions

Code Examples

  1. Basic BoomMenu setup:
val bmb = findViewById<BoomMenuButton>(R.id.bmb)
bmb.addBuilder(SimpleCircleButton.Builder())
bmb.addBuilder(SimpleCircleButton.Builder())
bmb.addBuilder(SimpleCircleButton.Builder())

This code sets up a basic BoomMenu with three simple circular buttons.

  1. Customizing button appearance:
val builder = SimpleCircleButton.Builder()
    .normalImageRes(R.drawable.icon)
    .normalText("Button")
    .normalColor(Color.RED)
bmb.addBuilder(builder)

This example demonstrates how to customize a button's appearance with an icon, text, and color.

  1. Adding click listeners:
bmb.setOnBoomListener(object : OnBoomListener {
    override fun onClicked(index: Int, builder: BoomButton) {
        Toast.makeText(this@MainActivity, "Clicked button $index", Toast.LENGTH_SHORT).show()
    }

    override fun onBackgroundClick() {
        // Handle background click
    }

    override fun onBoomWillHide() {
        // Called before the menu hides
    }

    override fun onBoomDidHide() {
        // Called after the menu hides
    }

    override fun onBoomWillShow() {
        // Called before the menu shows
    }

    override fun onBoomDidShow() {
        // Called after the menu shows
    }
})

This code adds click listeners to handle various events related to the BoomMenu.

Getting Started

  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.nightonke:boommenu:2.1.1'
}
  1. Add a BoomMenuButton to your layout XML:
<com.nightonke.boommenu.BoomMenuButton
    android:id="@+id/bmb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:bmb_buttonEnum="simpleCircle"
    app:bmb_piecePlaceEnum="piecePlace_dot_3_1"
    app:bmb_buttonPlaceEnum="buttonPlace_sc_3_3"/>
  1. Initialize and customize the BoomMenuButton in your Activity or Fragment:
val bmb = findViewById<BoomMenuButton>(R.id.bmb)
for (i in 0 until bmb.piecePlaceEnum.pieceNumber()) {
    bmb.addBuilder(SimpleCircleButton.Builder()
        .normalImageRes(getImageResource(i))
        .normalText(getButtonText(i))
        .listener { index -> onButtonClick(index) })
}

This sets up a basic BoomMenu with customized buttons and click listeners.

Competitor Comparisons

You can easily add awesome animated context menu to your app.

Pros of Context-Menu.Android

  • Simpler implementation for basic circular context menus
  • Smoother animations and transitions
  • Easier to customize menu item appearance

Cons of Context-Menu.Android

  • Limited menu item options compared to BoomMenu
  • Less flexible in terms of menu layout and positioning
  • Fewer animation styles and effects available

Code Comparison

Context-Menu.Android:

MenuAdapter<String> menuAdapter = new MenuAdapter<>(this, actionsText);
MenuParams menuParams = new MenuParams();
menuParams.setActionBarSize((int) getResources().getDimension(R.dimen.tool_bar_height));
menuParams.setMenuObjects(getMenuObjects());
menuParams.setClosableOutside(false);
mMenuDialogFragment = ContextMenuDialogFragment.newInstance(menuParams);

BoomMenu:

BoomMenuButton bmb = (BoomMenuButton) findViewById(R.id.bmb);
bmb.addBuilder(new HamButton.Builder()
        .normalImageRes(R.drawable.icon)
        .normalText("Text")
        .listener(new OnBMClickListener() {
            @Override
            public void onBoomButtonClick(int index) {
                // Handle click
            }
        }));

Both libraries offer circular menu implementations for Android, but BoomMenu provides more extensive customization options and menu styles. Context-Menu.Android focuses on simplicity and smooth animations, making it easier to implement basic circular menus. BoomMenu offers greater flexibility in menu layout, positioning, and animation effects, but may require more complex setup. Choose based on your specific requirements and desired level of customization.

Android Floating Action Button based on Material Design specification

Pros of FloatingActionButton

  • Simpler implementation for basic floating action button functionality
  • Lightweight and focused on core FAB features
  • Easier to integrate into existing projects with minimal customization

Cons of FloatingActionButton

  • Limited animation options compared to BoomMenu's extensive animations
  • Fewer customization options for button appearance and behavior
  • Lacks the ability to create complex menu structures with multiple buttons

Code Comparison

BoomMenu:

BoomMenuButton bmb = (BoomMenuButton) findViewById(R.id.bmb);
bmb.addBuilder(new HamButton.Builder()
    .normalImageRes(R.drawable.icon)
    .normalText("Text")
    .listener(new OnBMClickListener() {
        @Override
        public void onBoomButtonClick(int index) {
            // Handle click
        }
    }));

FloatingActionButton:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle click
    }
});

The code comparison shows that BoomMenu requires more setup for creating complex menu structures, while FloatingActionButton offers a simpler implementation for basic FAB functionality. BoomMenu provides more customization options and animation capabilities, whereas FloatingActionButton focuses on core FAB features with less complexity.

Tap Bar Menu

Pros of TapBarMenu

  • Simpler and more lightweight implementation
  • Easier to customize and integrate into existing projects
  • Smoother animations and transitions

Cons of TapBarMenu

  • Limited menu item options compared to BoomMenu
  • Less flexibility in terms of button layouts and designs
  • Fewer customization options for individual menu items

Code Comparison

TapBarMenu:

tapBarMenu.setOnClickListener {
    tapBarMenu.toggle()
}

BoomMenu:

BoomMenuButton bmb = findViewById(R.id.bmb);
bmb.addBuilder(new HamButton.Builder()
    .normalImageRes(R.drawable.icon)
    .normalText("Text"));

Summary

TapBarMenu offers a simpler, more lightweight solution for creating animated menu buttons in Android applications. It provides smooth animations and is easier to integrate into existing projects. However, it lacks the extensive customization options and flexibility offered by BoomMenu.

BoomMenu, on the other hand, provides a wide range of button types, layouts, and customization options. It allows for more complex menu designs but may require more setup and configuration.

The choice between the two libraries depends on the specific requirements of your project. If you need a simple, animated menu button with basic functionality, TapBarMenu might be the better choice. For more complex menu designs with multiple button types and extensive customization, BoomMenu would be more suitable.

The idea of ResideMenu is from Dribbble 1 and 2. It has come true and run in iOS devices. iOS ResideMenu This project is the RefsideMenu Android version. The visual effect is partly referred to iOS version of ResideMenu. And thanks to the authors for the above idea and contribution.

Pros of AndroidResideMenu

  • Simpler implementation for a slide-out menu
  • Lightweight and focused on a single menu style
  • Easier to customize for basic slide-out menu needs

Cons of AndroidResideMenu

  • Limited animation options compared to BoomMenu
  • Less flexibility in menu item layout and design
  • Fewer customization options for advanced use cases

Code Comparison

AndroidResideMenu:

ResideMenu resideMenu = new ResideMenu(this);
resideMenu.setBackground(R.drawable.menu_background);
resideMenu.attachToActivity(this);
resideMenu.addMenuItem(menuItem, ResideMenu.DIRECTION_LEFT);

BoomMenu:

BoomMenuButton bmb = (BoomMenuButton) findViewById(R.id.bmb);
bmb.addBuilder(new HamButton.Builder()
        .normalImageRes(R.drawable.icon)
        .normalText("Text")
        .listener(new OnBMClickListener() {
            @Override
            public void onBoomButtonClick(int index) {
                // Handle click
            }
        }));

AndroidResideMenu offers a straightforward approach for implementing a slide-out menu, making it easier to set up for basic use cases. However, BoomMenu provides more advanced animation options and greater flexibility in menu item design. BoomMenu's code is more verbose but allows for more detailed customization of individual menu items, including their appearance and behavior.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

BoomMenu

Developer Demo Download Lisense

2.0.0 Comes Finally

Approximately 8 months ago, I got an inspiration to creating something that can boom and show menu, which I named it Boom-Menu-Button, BMB. But at that time, I just a fresh-man in Android, knowing little about designing. The codes I wrote serveral months ago are ugly and performed low-efficient.

Between months, I always think about BMB and try to write a better design pattern for implements of BMB. My first try is BMB-iOS, which contains more family characteristics, for instance, buttons-alignment, text-inside/outside-button.

And now the BMB-Android 2.0.0 comes.

Gradle & Maven

compile 'com.nightonke:boommenu:2.1.1'
<dependency>
  <groupId>com.nightonke</groupId>
  <artifactId>boommenu</artifactId>
  <version>2.1.1</version>
  <type>pom</type>
</dependency>

Demo

Or by link:

Boom V2.1.1 in Github

Boom V2.1.1 in Fir

Wiki

Check the wiki to use BMB.

Documentation Chapters

  1. Basic Usage
    How to use BMB in just several lines of code?
  2. Simple Circle Button
    Add simple circle buttons with just an image for each to BMB.
  3. Text Inside Circle Button
    Add text inside circle buttons with a text and image inside for each to BMB.
  4. Text Outside Circle Button
    Add text outside circle buttons with a text and image outside for each to BMB.
  5. Ham Button
    Add ham buttons with with a title, subtitle and image inside for each to BMB.
  6. Share Style
    Make a share-style BMB.
  7. Custom Position
    Customize the number and positions of pieces and boom-buttons.
  8. Button Place Alignments
    Place all the buttons to anywhere on screen.
  9. Different Ways to Boom
    Different animations when the buttons boom or re-boom.
  10. Ease Animations for Buttons
    Use different and cute ease-animations for buttons.
  11. Different Order for Buttons
    Different order enum for boom-buttons.
  12. Other Animations Attributes for Buttons
    Delay, duration, rotate-degrees, frames...
  13. Click Event and Listener
    Listener for clicking each button or animation-states.
  14. Control BMB
    Boom or re-boom BMB programmatically.
  15. Use BMB in Action Bar
    How to put BMB in action bar?
  16. Use BMB in Tool Bar
    How to put BMB in tool bar?
  17. Use BMB in List
    Matters need attention when you need a BMB in list-view or recycler-view.
  18. Use BMB in Fragment
    Example for use BMB in fragment.
  19. Attributes for BMB or Pieces on BMB
    How to change the size or margins of dots on BMB?
  20. Cache Optimization & Boom Area
    What if I want BMB to boom in just its parent-view?
  21. Change Boom Buttons Dynamically
    Change Boom Buttons Dynamically.
  22. Fade Views
    Add faded views on BMB.
  23. Version History
    What's more for every version?
  24. Structure for BMB
    Structure for BMB when I designed it, for sharing and communicating.

Issues & Feedbacks

Try to tell me the bugs or enhancements about BMB, or contact me with Nightonke@outlook.com / 2584541288@qq.com. Before doing that, having a careful read on readme, wiki and issues is really helpful.

ReadMe for Version 1.0.9 or Below

If you still wanna use version 1.0.9 or below, you can find the README below:

English README 中文文档

But I strongly suggest you to use the newest version.

What I'm Doing