Skip to content

Text Outside Circle Button

Weiping Huang edited this page May 13, 2017 · 10 revisions

Text Outside Circle Button

Add text outside circle buttons with a text outside and an 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="textOutsideCircle"
    app:bmb_piecePlaceEnum="piecePlace_dot_9_1"
    app:bmb_buttonPlaceEnum="buttonPlace_sc_9_1"
    />

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 text outside circle 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++) {
    TextOutsideCircleButton.Builder builder = new TextOutsideCircleButton.Builder()
            .normalImageRes(R.drawable.butterfly)
            .normalText("Butter Doesn't fly!");
    bmb.addBuilder(builder);
}

But if you wanna customize more attributes:

for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
    TextOutsideCircleButton.Builder builder = new TextOutsideCircleButton.Builder()
            .listener(new OnBMClickListener() {
                @Override
                public void onBoomButtonClick(int index) {
                    // When the boom-button corresponding this builder is clicked.
                    Toast.makeText(TextOutsideCircleButtonActivity.this, "Clicked " + index, Toast.LENGTH_SHORT).show();
                }
            })
            // Whether the image-view should rotate.
            .rotateImage(false)
            // Whether the text-view should rotate.
            .rotateText(false)

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(20))
            // 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(Util.dp2px(10), Util.dp2px(10), Util.dp2px(70), Util.dp2px(70)))
            // 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_outside_circle_button_text_normal)
            // Set the text resource when boom-button is at highlighted-state.
            .highlightedTextRes(R.string.text_outside_circle_button_text_highlighted)
            // Set the text resource when boom-button is at unable-state.
            .unableTextRes(R.string.text_outside_circle_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 top-margin between text-view and the circle button.
            // Don't need to mind the shadow, BMB will mind this in code.
            .textTopMargin(20)
            // The width of text-view.
            .textWidth(200)
            // The height of text-view
            .textHeight(50)
            // 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)

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(true)
            // The radius of boom-button, in pixel.
            .buttonRadius(Util.dp2px(40))
            // Set the corner-radius of button.
            .buttonCornerRadius(Util.dp2px(20))
            // Whether the button is a circle shape.
            .isRound(false);
    bmb.addBuilder(builder);
}

After adding builders to BMB, it is ready for a boom.

Square Button

From version 2.0.8, BMB supports square buttons base on the circle buttons. To make boom-button square, use the following methods for a builder(Example):

        return new TextOutsideCircleButton.Builder()
                .isRound(false)
                .shadowCornerRadius(Util.dp2px(15))
                .buttonCornerRadius(Util.dp2px(15))
                .normalImageRes(getImageResource())
                .normalTextRes(R.string.text_outside_circle_button_text_normal);

And to make the transformation natural, you may want to make the pieces square, too. Check the setPieceCornerRadius method and app:bmb_pieceCornerRadius attribute here to achieve that effect.

Piece Place Enum for Text Outside Circle Button

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

  1. PiecePlaceEnum.DOT_1(in .java) or bmb_piecePlace_dot_1(in .xml)
  2. PiecePlaceEnum.DOT_2_M(in .java) or bmb_piecePlace_dot_2_M(in .xml)
  3. PiecePlaceEnum.DOT_3_M(in .java) or bmb_piecePlace_dot_3_M(in .xml)
  4. PiecePlaceEnum.DOT_4_M(in .java) or bmb_piecePlace_dot_4_M(in .xml)
  5. PiecePlaceEnum.DOT_5_M(in .java) or bmb_piecePlace_dot_5_M(in .xml)
  6. PiecePlaceEnum.DOT_6_M(in .java) or bmb_piecePlace_dot_6_M(in .xml)
  7. PiecePlaceEnum.DOT_7_M(in .java) or bmb_piecePlace_dot_7_M(in .xml)
  8. PiecePlaceEnum.DOT_8_M(in .java) or bmb_piecePlace_dot_8_M(in .xml)
  9. PiecePlaceEnum.DOT_9_M(in .java) or bmb_piecePlace_dot_9_M(in .xml)

Button Place Enum for Text Outside Circle Button

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

  1. ButtonPlaceEnum.SC_1(in .java) or bmb_buttonPlace_sc_1(in .xml)
  2. ButtonPlaceEnum.SC_2_M(in .java) or bmb_buttonPlace_sc_2_M(in .xml)
  3. ButtonPlaceEnum.SC_3_M(in .java) or bmb_buttonPlace_sc_3_M(in .xml)
  4. ButtonPlaceEnum.SC_4_M(in .java) or bmb_buttonPlace_sc_4_M(in .xml)
  5. ButtonPlaceEnum.SC_5_M(in .java) or bmb_buttonPlace_sc_5_M(in .xml)
  6. ButtonPlaceEnum.SC_6_M(in .java) or bmb_buttonPlace_sc_6_M(in .xml)
  7. ButtonPlaceEnum.SC_7_M(in .java) or bmb_buttonPlace_sc_7_M(in .xml)
  8. ButtonPlaceEnum.SC_8_M(in .java) or bmb_buttonPlace_sc_8_M(in .xml)
  9. ButtonPlaceEnum.SC_9_M(in .java) or bmb_buttonPlace_sc_9_M(in .xml)
  10. 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.
11. 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`.
Clone this wiki locally