-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Ham Button
Add ham buttons with with a title, subtitle and image inside for each to BMB.
Add BMB in .xml file.
<com.nightonke.boommenu.BoomMenuButton
android:id="@+id/bmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:bmb_buttonEnum="ham"
app:bmb_piecePlaceEnum="piecePlace_ham_4"
app:bmb_buttonPlaceEnum="buttonPlace_ham_4"
/>
You can set button-enum, piece-place-enum and button-place-enum in .xml file with attributes or in .java file with setters. For more information and pictures about piece-place-enum and button-place-enum, check the tables below.
The builder of ham button has lots of methods to customize the boom-buttons. Needn't to set every attributes for boom-buttons, just customize what you want. For example:
for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
HamButton.Builder builder = new HamButton.Builder()
.normalImageRes(R.drawable.butterfly)
.normalTextRes("Butter Doesn't fly!")
.subNormalTextRes("Little butter Doesn't fly, either!");
bmb.addBuilder(builder);
}
But if you wanna customize more attributes:
for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
HamButton.Builder builder = new HamButton.Builder()
.listener(new OnBMClickListener() {
@Override
public void onBoomButtonClick(int index) {
// When the boom-button corresponding this builder is clicked.
Toast.makeText(HamButtonActivity.this, "Clicked " + index, Toast.LENGTH_SHORT).show();
}
})
// Whether the image-view should rotate.
.rotateImage(false)
// Whether the ham-button contains a sub text-view.
.containsSubText(true)
// Whether the boom-button should have a shadow effect.
.shadowEffect(true)
// Set the horizontal shadow-offset of the boom-button.
.shadowOffsetX(20)
// Set the vertical shadow-offset of the boom-button.
.shadowOffsetY(0)
// Set the radius of shadow of the boom-button.
.shadowRadius(Util.dp2px(20))
// Set the corner-radius of the shadow.
.shadowCornerRadius(Util.dp2px(5))
// Set the color of the shadow of boom-button.
.shadowColor(Color.parseColor("#ee000000"))
// Set the image resource when boom-button is at normal-state.
.normalImageRes(R.drawable.jellyfish)
// Set the image drawable when boom-button is at normal-state.
.normalImageDrawable(getResources().getDrawable(R.drawable.jellyfish, null))
// Set the image resource when boom-button is at highlighted-state.
.highlightedImageRes(R.drawable.bat)
// Set the image drawable when boom-button is at highlighted-state.
.highlightedImageDrawable(getResources().getDrawable(R.drawable.bat, null))
// Set the image resource when boom-button is at unable-state.
.unableImageRes(R.drawable.butterfly)
// Set the image drawable when boom-button is at unable-state.
.unableImageDrawable(getResources().getDrawable(R.drawable.butterfly, null))
// Set the rect of image.
// By this method, you can set the position and size of the image-view in boom-button.
// For example, builder.imageRect(new Rect(0, 50, 100, 100)) will make the
// image-view's size to be 100 * 50 and margin-top to be 50 pixel.
.imageRect(new Rect(0, 0, Util.dp2px(60), Util.dp2px(60)))
// Set the padding of image.
// By this method, you can control the padding in the image-view.
// For instance, builder.imagePadding(new Rect(10, 10, 10, 10)) will make the
// image-view content 10-pixel padding to itself.
.imagePadding(new Rect(0, 0, 0, 0))
// Set the text resource when boom-button is at normal-state.
.normalTextRes(R.string.text_ham_button_text_normal)
// Set the text resource when boom-button is at highlighted-state.
.highlightedTextRes(R.string.text_ham_button_text_highlighted)
// Set the text resource when boom-button is at unable-state.
.unableTextRes(R.string.text_ham_button_text_unable)
// Set the text when boom-button is at normal-state.
.normalText("Put your normal text here")
// Set the text when boom-button is at highlighted-state.
.highlightedText("Put your highlighted text here")
// Set the text when boom-button is at unable-state.
.unableText("Unable!")
// Set the color of text when boom-button is at normal-state.
.normalTextColor(Color.BLACK)
// Set the resource of color of text when boom-button is at normal-state.
.normalTextColorRes(R.color.black)
// Set the color of text when boom-button is at highlighted-state.
.highlightedTextColor(Color.BLUE)
// Set the resource of color of text when boom-button is at highlighted-state.
.highlightedTextColorRes(R.color.blue)
// Set the color of text when boom-button is at unable-state.
.unableTextColor(Color.RED)
// Set the resource of color of text when boom-button is at unable-state.
.unableTextColorRes(R.color.red)
// Set the rect of text.
// By this method, you can set the position and size of the text-view in boom-button.
// For example, builder.textRect(new Rect(0, 50, 100, 100)) will make the
// text-view's size to be 100 * 50 and margin-top to be 50 pixel.
.textRect(new Rect(Util.dp2px(70), Util.dp2px(10), Util.dp2px(280), Util.dp2px(40)))
// Set the padding of text.
// By this method, you can control the padding in the text-view.
// For instance, builder.textPadding(new Rect(10, 10, 10, 10)) will make the
// text-view content 10-pixel padding to itself.
.textPadding(new Rect(0, 0, 0, 0))
// Set the typeface of the text.
.typeface(Typeface.DEFAULT_BOLD)
// Set the maximum of the lines of text-view.
.maxLines(2)
// Set the gravity of text-view.
.textGravity(Gravity.CENTER)
// Set the ellipsize of the text-view.
.ellipsize(TextUtils.TruncateAt.MIDDLE)
// Set the text size of the text-view.
.textSize(10)
// Set the sub-text resource when boom-button is at normal-state.
.subNormalTextRes(R.string.text_ham_button_sub_text_normal)
// Set the sub-text resource when boom-button is at highlighted-state.
.subHighlightedTextRes(R.string.text_ham_button_sub_text_highlighted)
// Set the sub-text resource when boom-button is at unable-state.
.subUnableTextRes(R.string.text_ham_button_sub_text_unable)
// Set the sub-text when boom-button is at normal-state.
.subNormalText("Put your normal sub-text here")
// Set the sub-text when boom-button is at highlighted-state.
.subHighlightedText("Put your highlighted sub-text here")
// Set the sub-text when boom-button is at unable-state.
.subUnableText("Sub unable!")
// Set the color of sub-text when boom-button is at normal-state.
.subNormalTextColor(Color.BLACK)
// Set the resource of color of sub-text when boom-button is at normal-state.
.subNormalTextColorRes(R.color.black)
// Set the color of sub-text when boom-button is at highlighted-state.
.subHighlightedTextColor(Color.BLUE)
// Set the resource of color of sub-text when boom-button is at highlighted-state.
.subHighlightedTextColorRes(R.color.blue)
// Set the color of sub-text when boom-button is at unable-state.
.subUnableTextColor(Color.RED)
// Set the resource of color of sub-text when boom-button is at unable-state.
.subUnableTextColorRes(R.color.red)
// Set the rect of sub-text.
// By this method, you can set the position and size of the sub-text-view in boom-button.
// For example, builder.textRect(new Rect(0, 50, 100, 100)) will make the
// sub-text-view's size to be 100 * 50 and margin-top to be 50 pixel.
.subTextRect(new Rect(Util.dp2px(70), Util.dp2px(35), Util.dp2px(280), Util.dp2px(55)))
// Set the padding of sub-text.
// By this method, you can control the padding in the sub-text-view.
// For instance, builder.textPadding(new Rect(10, 10, 10, 10)) will make the
// sub-text-view content 10-pixel padding to itself.
.subTextPadding(new Rect(0, 0, 0, 0))
// Set the typeface of the sub-text.
.subTypeface(Typeface.SERIF)
// Set the maximum of the lines of sub-text-view.
.subMaxLines(1)
// Set the gravity of sub-text-view.
.subTextGravity(Gravity.RIGHT)
// Set the ellipsize of the sub-text-view.
.subEllipsize(TextUtils.TruncateAt.END)
// Set the text size of the sub-text-view.
.subTextSize(10)
// Whether the boom-button should have a ripple effect.
.rippleEffect(true)
// The color of boom-button when it is at normal-state.
.normalColor(Color.RED)
// The resource of color of boom-button when it is at normal-state.
.normalColorRes(R.color.red)
// The color of boom-button when it is at highlighted-state.
.highlightedColor(Color.BLUE)
// The resource of color of boom-button when it is at highlighted-state.
.highlightedColorRes(R.color.blue)
// The color of boom-button when it is at unable-state.
.unableColor(Color.BLACK)
// The resource of color of boom-button when it is at unable-state.
.unableColorRes(R.color.black)
// The color of boom-button when it is just a piece.
.pieceColor(Color.WHITE)
// The resource of color of boom-button when it is just a piece.
.pieceColorRes(R.color.white)
// Whether the boom-button is unable, default value is false.
.unable(false)
// Set the width of boom-button, in pixel.
.buttonWidth(Util.dp2px(300))
// Set the height of boom-button, in pixel.
.buttonHeight(Util.dp2px(60));
bmb.addBuilder(builder);
}
After adding builders to BMB, it is ready for a boom.
All piece-place-enum and button-place-enum can be found in demo.
- PiecePlaceEnum.HAM_1(in .java) or bmb_piecePlace_ham_1(in .xml)
- PiecePlaceEnum.HAM_2(in .java) or bmb_piecePlace_ham_2(in .xml)
- PiecePlaceEnum.HAM_3(in .java) or bmb_piecePlace_ham_3(in .xml)
- PiecePlaceEnum.HAM_4(in .java) or bmb_piecePlace_ham_4(in .xml)
- PiecePlaceEnum.HAM_5(in .java) or bmb_piecePlace_ham_5(in .xml)
- PiecePlaceEnum.HAM_6(in .java) or bmb_piecePlace_ham_6(in .xml)
All piece-place-enum and button-place-enum can be found in demo.
- ButtonPlaceEnum.HAM_1(in .java) or bmb_buttonPlace_ham_1(in .xml)
- ButtonPlaceEnum.HAM_2(in .java) or bmb_buttonPlace_ham_2(in .xml)
- ButtonPlaceEnum.HAM_3(in .java) or bmb_buttonPlace_ham_3(in .xml)
- ButtonPlaceEnum.HAM_4(in .java) or bmb_buttonPlace_ham_4(in .xml)
- ButtonPlaceEnum.HAM_5(in .java) or bmb_buttonPlace_ham_5(in .xml)
- ButtonPlaceEnum.HAM_6(in .java) or bmb_buttonPlace_ham_6(in .xml)
- ButtonPlaceEnum.Horizontal(in .java) or bmb_buttonPlace_horizontal(in .xml)
ButtonPlaceEnum.Horizontal puts boom-buttons in a horizontal line, notice thatButtonPlaceEnum.Horizontal.buttonNumber()
returnsInteger.MAX_VALUE
.
- ButtonPlaceEnum.Vertical(in .java) or bmb_buttonPlace_vertical(in .xml)
ButtonPlaceEnum.Vertical puts boom-buttons in a vertical line, notice thatButtonPlaceEnum.Vertical.buttonNumber()
returnsInteger.MAX_VALUE
.
Sometimes we need to add a boom-button with "Cancel" on the last boom-button(the bottom one). And maybe the last one should have a larger top-margin with its above one. Then you can set this special attribute by:
bmb.setBottomHamButtonTopMargin(Util.dp2px(50));
Or in .xml:
app:bmb_bottomHamButtonTopMargin="50dp"
- Basic Usage
- Simple Circle Button
- Text Inside Circle Button
- Text Outside Circle Button
- Ham Button
- Share Style
- Custom Position
- Button Place Alignments
- Different Ways to Boom
- Ease Animations for Buttons
- Different Order for Buttons
- Other Animations Attributes for Buttons
- Click Event and Listener
- Control BMB
- Use BMB in Action Bar
- Use BMB in Tool Bar
- Use BMB in List
- Use BMB in Fragment
- Attributes for BMB or Pieces on BMB
- Cache Optimization & Boom Area
- Change Boom Buttons Dynamically
- Fade Views
- Version History
- Structure for BMB