Skip to content

Ham Button

Weiping Huang edited this page Apr 7, 2017 · 8 revisions

Ham Button

Add ham buttons with with a title, subtitle and image inside for each to BMB.

Create 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.

Add Builders

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)

Shadow

            // 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"))

Image

            // 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))

Text

            // 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)

Sub-Text

            // 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)

Button

            // 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.

Piece Place Enum for Ham Button

All piece-place-enum and button-place-enum can be found in demo.

  1. PiecePlaceEnum.HAM_1(in .java) or bmb_piecePlace_ham_1(in .xml)
  2. PiecePlaceEnum.HAM_2(in .java) or bmb_piecePlace_ham_2(in .xml)
  3. PiecePlaceEnum.HAM_3(in .java) or bmb_piecePlace_ham_3(in .xml)
  4. PiecePlaceEnum.HAM_4(in .java) or bmb_piecePlace_ham_4(in .xml)
  5. PiecePlaceEnum.HAM_5(in .java) or bmb_piecePlace_ham_5(in .xml)
  6. PiecePlaceEnum.HAM_6(in .java) or bmb_piecePlace_ham_6(in .xml)

Button Place Enum for Ham Button

All piece-place-enum and button-place-enum can be found in demo.

  1. ButtonPlaceEnum.HAM_1(in .java) or bmb_buttonPlace_ham_1(in .xml)
  2. ButtonPlaceEnum.HAM_2(in .java) or bmb_buttonPlace_ham_2(in .xml)
  3. ButtonPlaceEnum.HAM_3(in .java) or bmb_buttonPlace_ham_3(in .xml)
  4. ButtonPlaceEnum.HAM_4(in .java) or bmb_buttonPlace_ham_4(in .xml)
  5. ButtonPlaceEnum.HAM_5(in .java) or bmb_buttonPlace_ham_5(in .xml)
  6. ButtonPlaceEnum.HAM_6(in .java) or bmb_buttonPlace_ham_6(in .xml)
  7. ButtonPlaceEnum.Horizontal(in .java) or bmb_buttonPlace_horizontal(in .xml)
    ButtonPlaceEnum.Horizontal puts boom-buttons in a horizontal line, notice that ButtonPlaceEnum.Horizontal.buttonNumber() returns Integer.MAX_VALUE.
  8. ButtonPlaceEnum.Vertical(in .java) or bmb_buttonPlace_vertical(in .xml)
    ButtonPlaceEnum.Vertical puts boom-buttons in a vertical line, notice that ButtonPlaceEnum.Vertical.buttonNumber() returns Integer.MAX_VALUE.

The Special Boom-Button

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"