Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nightonke/boommenu

A menu which can ... BOOM! - Android
https://github.com/nightonke/boommenu

animation boom menu

Last synced: 26 days ago
JSON representation

A menu which can ... BOOM! - Android

Awesome Lists containing this project

README

        

# BoomMenu
[![WoWoViewPager](https://github.com/Nightonke/WoWoViewPager/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/WoWoViewPager)
[![BoomMenu](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/BoomMenu)
[![CoCoin](https://github.com/Nightonke/CoCoin/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/CoCoin)
[![BlurLockView](https://github.com/Nightonke/BlurLockView/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/BlurLockView)
[![LeeCo](https://github.com/Nightonke/LeeCo/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/LeeCo)
[![GithubWidget](https://github.com/Nightonke/GithubWidget/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/GithubWidget)
[![JellyToggleButton](https://github.com/Nightonke/JellyToggleButton/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/JellyToggleButton)
[![FaceOffToggleButton](https://github.com/Nightonke/FaceOffToggleButton/blob/master/app/src/main/res/mipmap-hdpi/ic_launcher.png?raw=true)](https://github.com/Nightonke/FaceOffToggleButton)

###This README is only for version 1.0.9 or below. Strongly suggest to use [new version](https://github.com/Nightonke/BoomMenu/wiki)

Tired of these menu buttons?

![Old Menu Buttons](https://github.com/Nightonke/BoomMenu/raw/master/Pictures/old_action_bar_menu.png)

Why not try these:

![Circle](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/show_circle.gif?raw=true)
![Ham](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/show_ham.gif?raw=true)

![List](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/show_list.gif?raw=true)
![Share](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/show_share.gif?raw=true)

Yes, this library is about a menu which can ... BOOM!
Looking for iOS version? Check [here](https://github.com/Nightonke/VHBoomMenuButton)

# Guide

[中文文档](https://github.com/Nightonke/BoomMenu/blob/master/README-ZH.md)
[Gradle & Maven](https://github.com/Nightonke/BoomMenu#gradle-and-maven)
[Note](https://github.com/Nightonke/BoomMenu#note)
[Demo](https://github.com/Nightonke/BoomMenu#demo)

###Usage

1. [Easy to Use in 3 Steps](https://github.com/Nightonke/BoomMenu#easy-to-use-in-3-steps)
2. [Use in Action Bar](https://github.com/Nightonke/BoomMenu#use-in-action-bar)
3. [Use in Floating Action Button](https://github.com/Nightonke/BoomMenu#use-in-floating-action-button)
4. [Use in List](https://github.com/Nightonke/BoomMenu#use-in-list)
5. [Use in Share Style](https://github.com/Nightonke/BoomMenu#use-in-share-style)
6. [Use with Builder](https://github.com/Nightonke/BoomMenu#use-with-builder)
4. [Hamburger Button and Circle Button](https://github.com/Nightonke/BoomMenu#hamburger-button-and-circle-button)
5. [Number of Sub Buttons](https://github.com/Nightonke/BoomMenu#number-of-sub-buttons)
6. [Boom Types](https://github.com/Nightonke/BoomMenu#boom-types)
7. [Place Types](https://github.com/Nightonke/BoomMenu#place-types)
8. [Ease Types](https://github.com/Nightonke/BoomMenu#ease-types)
9. [Boom Animation Duration](https://github.com/Nightonke/BoomMenu#boom-animation-duration)
10. [Animation Start Delay](https://github.com/Nightonke/BoomMenu#animation-start-delay)
11. [Rotation Degree](https://github.com/Nightonke/BoomMenu#rotation-degree)
12. [Auto Dismiss](https://github.com/Nightonke/BoomMenu#auto-dismiss)
13. [Cancelable](https://github.com/Nightonke/BoomMenu#cancelable)
14. [Show Order and Hide Order](https://github.com/Nightonke/BoomMenu#show-order-and-hide-order)
15. [Sub Buttons Click Listener](https://github.com/Nightonke/BoomMenu#sub-buttons-click-listener)
16. [Animation Listener](https://github.com/Nightonke/BoomMenu#animation-listener)
17. [Click Effects](https://github.com/Nightonke/BoomMenu#click-effects)
18. [Sub Button Texts Color](https://github.com/Nightonke/BoomMenu#sub-button-texts-color)
19. [Dim Types](https://github.com/Nightonke/BoomMenu#dim-types)
20. [Shadow of Sub Buttons and Boom Button](https://github.com/Nightonke/BoomMenu#shadow-of-sub-buttons-and-boom-button)
21. [Get States and Dismiss](https://github.com/Nightonke/BoomMenu#get-states-and-dismiss)
22. [Get Sub Views of Sub Button](https://github.com/Nightonke/BoomMenu#get-sub-views-of-sub-button)

[Versions](https://github.com/Nightonke/BoomMenu#versions)
[Todo](https://github.com/Nightonke/BoomMenu#todo)
[License](https://github.com/Nightonke/BoomMenu#license)

# Gradle and Maven
Just add the "compile 'com.nightonke:BoomMenu:1.0.9'" in your build.gradle of your module.
```
dependencies {
...
compile 'com.nightonke:boommenu:1.0.9'
...
}
```
Or maven:
```maven

com.nightonke
boommenu
1.0.9
pom

```

# Note
1. I use the ShadowLayout from [dmytrodanylyk-ShadowLayout](https://github.com/dmytrodanylyk/shadow-layout) to create the shadow effect of the buttons.
2. Boom menu button can be used in list since version 1.0.4.

# Demo
You can check most of the options that you can set when using boom menu button in this demo. When you read the code of the demo, don't be afraid of the length of the code in MainActivity.class. Most of codes are for the logic of the RadioGroups.
![Boom V1.0.9](https://github.com/Nightonke/BoomMenu/blob/master/Apk/BoomMenu%20V1.0.9.png)
Or by link:
[Boom V1.0.9 in Github](https://github.com/Nightonke/BoomMenu/blob/master/Apk/BoomMenu%20V1.0.9.apk?raw=true)
[Boom V1.0.9 in Fir](http://fir.im/tv85)

# Usage

### Easy to Use in 3 Steps
Check the code in [EaseUseActivity](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/EasyUseActivity.java) and you will found out all to do are 3 steps:

**1**.Add BoomMenuButton in xml file:
```xml

```

**2.**Get the view in xml in onCreate() method:
```java
boomMenuButton = (BoomMenuButton)findViewById(R.id.boom);
```

**3.**Initialize the boom menu button in the onWindowFocusChanged() method in activity:
```java
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);

boomMenuButton.init(
subButtonDrawables, // The drawables of images of sub buttons. Can not be null.
subButtonTexts, // The texts of sub buttons, ok to be null.
subButtonColors, // The colors of sub buttons, including pressed-state and normal-state.
ButtonType.HAM, // The button type.
BoomType.PARABOLA, // The boom type.
PlaceType.HAM_3_1, // The place type.
null, // Ease type to move the sub buttons when showing.
null, // Ease type to scale the sub buttons when showing.
null, // Ease type to rotate the sub buttons when showing.
null, // Ease type to move the sub buttons when dismissing.
null, // Ease type to scale the sub buttons when dismissing.
null, // Ease type to rotate the sub buttons when dismissing.
null // Rotation degree.
);
}
```

### Use in Action Bar

To add boom menu button in action bar just:

**1**.Create your own action bar layout, custom_actionbar.xml:
```xml

```
**2**.Custom the default action bar in onCreate() method:
```java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ActionBar mActionBar = getSupportActionBar();
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
LayoutInflater mInflater = LayoutInflater.from(this);

mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
TextView mTitleTextView = (TextView) mCustomView.findViewById(R.id.title_text);
mTitleTextView.setText(R.string.app_name);

boomMenuButtonInActionBar = (BoomMenuButton) mCustomView.findViewById(R.id.boom);
boomMenuButtonInActionBar.setOnSubButtonClickListener(this);
boomMenuButtonInActionBar.setAnimatorListener(this);

mActionBar.setCustomView(mCustomView);
mActionBar.setDisplayShowCustomEnabled(true);

((Toolbar) mCustomView.getParent()).setContentInsetsAbsolute(0,0);
}
```
**3**.Initialize the boom menu button in the onWindowFocusChanged() method in activity. Just like what we do in the step3 in [Easy to Use in 3 Steps](https://github.com/Nightonke/BoomMenu#easy-to-use-in-3-steps)

###Use in Floating Action Button

Similar with above. But just add some params in xml:
```xml

```

| Param | Type | What It Does |
| ------------- |-------------| -----|
| app:boom_inActionBar | boolean | true for boom menu button in action bar |
| app:boom_inList | boolean | true for boom menu button in list |
| app:boom_button_color | color | the color of the boom menu button, only work in floating action button |
| app:boom_button_pressed_color | color | the color when pressing the boom menu button, only work when the ClickEffect is normal |

### Use in List

To add boom menu button in list just:

**1**.Create your list-item layout, notice that the app:boom_inList value should be true:
```xml

```
**2**.Init the boom menu button with delays in adapter:
```java
@Override
public View getView(int position, View convertView, final ViewGroup parent) {

...

viewHolder.circleBoomMenuButton.postDelayed(new Runnable() {
@Override
public void run() {
viewHolder.circleBoomMenuButton.init(
circleSubButtonDrawables, // The drawables of images of sub buttons. Can not be null.
circleSubButtonTexts, // The texts of sub buttons, ok to be null.
subButtonColors, // The colors of sub buttons, including pressed-state and normal-state.
ButtonType.CIRCLE, // The button type.
BoomType.PARABOLA, // The boom type.
PlaceType.CIRCLE_3_1, // The place type.
null, // Ease type to move the sub buttons when showing.
null, // Ease type to scale the sub buttons when showing.
null, // Ease type to rotate the sub buttons when showing.
null, // Ease type to move the sub buttons when dismissing.
null, // Ease type to scale the sub buttons when dismissing.
null, // Ease type to rotate the sub buttons when dismissing.
null // Rotation degree.
);
viewHolder.hamBoomMenuButton.setSubButtonShadowOffset(
Util.getInstance().dp2px(2), Util.getInstance().dp2px(2));
viewHolder.circleBoomMenuButton.setSubButtonShadowOffset(
Util.getInstance().dp2px(2), Util.getInstance().dp2px(2));
}
}, 1);

...

}
```
For more information, please check [ListViewActivity.class](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/ListViewActivity.java)

### Use in Share Style

Share style is the new place type of BMB in version 1.0.6. You can see the effect in the gifs. To use this, just change the place type as ```PlaceType.SHARE_X_X```. Just try it in the demo.

You can set the width of lines in share icon with ```setShareLineWidth(float width)``` and change the lines colors with ```setShareLine1Color(int color)``` and ```setShareLine2Color(int color)```.

For more information, please check [ShareActivity.class](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/ShareActivity.java)

### Use with Builder

Thanks @demolot to remind me of using Builder. Now you can use Builder to initialize the BMB more convenient.
```
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);

// this is an example to show how to use the builder
new BoomMenuButton.Builder()
// set all sub buttons with subButtons method
//.subButtons(subButtonDrawables, subButtonColors, subButtonTexts)
// or add each sub button with addSubButton method
.addSubButton(this, R.drawable.boom, subButtonColors[0], "BoomMenuButton")
.addSubButton(this, R.drawable.java, subButtonColors[1], "View source code")
.addSubButton(this, R.drawable.github, subButtonColors[2], "Follow me")
.frames(80)
.duration(800)
.delay(100)
.showOrder(OrderType.RANDOM)
.hideOrder(OrderType.RANDOM)
.button(ButtonType.HAM)
.boom(BoomType.PARABOLA_2)
.place(PlaceType.HAM_3_1)
.showMoveEase(EaseType.EaseOutBack)
.hideMoveEase(EaseType.EaseOutCirc)
.showScaleEase(EaseType.EaseOutBack)
.hideScaleType(EaseType.EaseOutCirc)
.rotateDegree(720)
.showRotateEase(EaseType.EaseOutBack)
.hideRotateType(EaseType.Linear)
.autoDismiss(true)
.cancelable(true)
.dim(DimType.DIM_6)
.clickEffect(ClickEffectType.RIPPLE)
.boomButtonShadow(Util.getInstance().dp2px(2), Util.getInstance().dp2px(2))
.subButtonsShadow(Util.getInstance().dp2px(2), Util.getInstance().dp2px(2))
.subButtonTextColor(Color.BLACK)
.onBoomButtonBlick(null)
.animator(null)
.onSubButtonClick(null)
// this only work when the place type is SHARE_X_X
.shareStyle(0, 0, 0)
.init(boomMenuButton);
}
```

For more information, please check [BuilderActivity.class](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/BuilderActivity.java)

### Hamburger Button and Circle Button
There are 2 types of sub buttons in BMB(boom menu button). Hamburger and circle. You can use ```ButtonType.HAM``` and ```ButtonType.CIRCLE``` to initialize the BMB.

### Number of Sub Buttons
For hamberger type, there are [1, 4] sub buttons. For circle type, there are [1, 9] sub buttons.

### Boom Types
There are 5 boom types provided in this version. They are ```BoomType.LINE```, ```BoomType.PARABOLA_2``` , ```BoomType.HORIZONTAL_THROW```, ```BoomType.PARABOLA_2``` and ```BoomType.HORIZONTAL_THROW_2```. Just try them for fun in the demo. You can choose your favorite BoomType when initializing the BMB, or set it:
```java
setBoomType(newBoomType);
```

### Place Types
There are 32 types for placing the sub buttons in BMB or in the screen. You can use ```PlaceType.CIRCLE_X_X``` and ```PlaceType.HAM_X_X``` (the former X is the number of sub buttons and the latter X is type number) to initialize BMB.
![PlayType 1~8](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/place_type_1.png)
![PlayType 9~16](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/place_type_2.png)
![PlayType 17~24](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/place_type_3.png)
![PlayType 25~32](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/place_type_4.png)
For more information for Place type, please check [PlaceType.class](https://github.com/Nightonke/BoomMenu/blob/master/boommenu/src/main/java/com/nightonke/boommenu/Types/PlaceType.java)

### Ease Types
You can set 30 ease types for 6 part of animations when the BMB is showing or hiding. You can set the moving, scaling and rotating or showing and hiding animation when initializing the BMB, or set them to null to use the default ease types. And also, you can set 6 types by the setters:
```java
setShowMoveEaseType(showMoveEaseType);

setShowScaleEaseType(showScaleEaseType);

setShowRotateEaseType(showRotateEaseType);

setHideMoveEaseType(hideMoveEaseType);

setHideScaleEaseType(hideScaleEaseType);

setHideRotateEaseType(hideRotateEaseType);
```
For more ease types, you can check [Ease Type Package](https://github.com/Nightonke/BoomMenu/tree/master/boommenu/src/main/java/com/nightonke/boommenu/Eases). Or check the [library](https://github.com/Nightonke/WoWoViewPager#ease) that I made(This part is the same).

### Boom Animation Duration
Set the duration of the boom animation by ```setDuration(duration)``` (in ms). The default duration is 800ms.

### Animation Start Delay
Use ```setDelay(delay)``` to set the delay between each 2 sub buttons(in ms). For instance, if the delay is 0, then all the sub buttons will boom out at the same time. The default delay is 100ms.

### Rotation Degree
You can set the degree to rotate the sub button. But only for circle types, I forbade applying rotation animation to hamburger types button because the shadow or a rolling rectangle is hard to display. The default rotation degree is 720. Set the degree when initializing BMB or use ```setRotateDegree(rotateDegree);```

### Auto Dismiss
When you click a sub button, the BMB will automatically hide all the sub buttons. If you want to stop this, just use ```setAutoDismiss(autoDismiss)``` to set autoDismiss to false.

### Cancelable
When click other place except the sub buttons, the BMB will hide all the sub buttons. You can use ```setCancelable(cancelable)``` to set the value to false. But remember to set one button to perform the cancelable job, otherwise the BMB will be uncancelable.

### Show Order and Hide Order
Set the order of showing or hiding sub buttons with ```OrderType.DEFAULT```, ```OrderType.REVERSE``` and ```OrderType.RANDOM```. Use ```setShowOrderType(showOrderType)``` and ```setHideOrderType(hideOrderType)``` to set these values.

### Sub Buttons Click Listener
```java
boomMenuButton.setOnSubButtonClickListener(new BoomMenuButton.OnSubButtonClickListener() {
@Override
public void onClick(int buttonIndex) {
// return the index of the sub button clicked
}
});
```

### Animation Listener
```java
boomInfo.setAnimatorListener(new BoomMenuButton.AnimatorListener() {
@Override
public void toShow() {
// the moment when the BMB is clicked and the showing animation is about to start
}

@Override
public void showing(float fraction) {
// the showing animation is playing, the fraction is the process of animation
}

@Override
public void showed() {
// the showing animation is just played
}

@Override
public void toHide() {
// the BMB is about to play the hiding animation
}

@Override
public void hiding(float fraction) {
// the hiding animation is playing
}

@Override
public void hided() {
// the hiding animation is just played
}
});
```

### Click Effects
Use ```setClickEffectType(clickEffectType)``` set click effect of all the buttons of BMB(including itself). Use ```ClickEffectType.RIPPLE``` to set the ripple effect(only work at or after Android 5.0) or ```ClickEffectType.NORMAL``` to set the normal effect of buttons.

### Sub Button Texts Color
Use ```setTextViewColor(int color)``` to set the color of all the textviews of sub buttons. Or use ```setTextViewColor(int[] colors)``` to set different color of textviews of sub buttons.

### Dim Types
You can use DimType to control the dim degree when showing the sub buttons. You may notice that in the demo, when you click the floating action button, the background would not be dim. But, when you click the BMB in the action bar, the background would be dim. There are 10 values of dim degree:
```java
public enum DimType {
DIM_0(Color.parseColor("#00000000")),
DIM_1(Color.parseColor("#11000000")),
DIM_2(Color.parseColor("#22000000")),
DIM_3(Color.parseColor("#33000000")),
DIM_4(Color.parseColor("#44000000")),
DIM_5(Color.parseColor("#55000000")),
DIM_6(Color.parseColor("#66000000")),
DIM_7(Color.parseColor("#77000000")),
DIM_8(Color.parseColor("#88000000")),
DIM_9(Color.parseColor("#99000000"));

public int value;

DimType(int value) {
this.value = value;
}
}
```
Use ```setDimType(DimType dimType)``` to set the dim degree of BMB. For instance, you can use ```boomMenuButton.setDimType(DimType.DIM_0);``` to keep the background light when showing sub buttons.

### Shadow of Sub Buttons and Boom Button
You can set the offset of the shadow of sub buttons and the BMB. Use ```setSubButtonShadowOffset(float xOffset, float yOffset)``` (in pixel)to set the offset of sub buttons and ```setBoomButtonShadowOffset(float xOffset, float yOffset)``` to the BMB's.

### Get States and Dismiss
You can get the current state of BMB with:
```java
boolean isClosed();

boolean isClosing();

boolean isOpen();

boolean isOpening();
```

And use ```boolean dismiss()``` to force the BMB to play hiding animation. Returns true if the BMB is going to hide, returns false if the BMB cannot hide right now(because it is showing, hiding or hided).

### Get Sub Views of Sub Button
If you wanna modify the sub views in the sub button. There are several methods to do that:
```java
ImageView[] getImageViews();

TextView[] getTextViews();
```

# Versions
### 1.0.1
First version.
### 1.0.2
Fix a bug that now BMB should be able to used in version below lollipop.
### 1.0.3
Fix the bug that's in Android 4.0, the image of the circle button is black.
### 1.0.4
Now the BMB can be used in list.
### 1.0.5
Share style.
### 1.0.6
Setters for share style.
### 1.0.7
Thanks @hisham2007 to remind me of the RTL bug. Now BMB is able to support RTL mode.
Thanks @demolot to remind me use the Builder to init the BMB. For more information, please check [Use with BMB](https://github.com/Nightonke/BoomMenu#use-with-builder).
### 1.0.8
Try to fix the memory optimization issue, but I'm not sure whether it works.
### 1.0.9
Try to fix the null-pointer exception.

# Todo
1. Particle effects are coming soon.
2. ~~Make BMB ready for using in listview~~.
3. Blur background.

# License

Copyright 2016 Nightonke

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.