Skip to content

Text Inside Circle Button

Weiping Huang edited this page Dec 10, 2016 · 12 revisions

Text Inside Circle Button

Add text inside circle buttons with a text 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="textInsideCircle"
    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 inside circle button has lots of methods to customize the boom-buttons.

for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
    TextInsideCircleButton.Builder builder = new TextInsideCircleButton.Builder()
            .listener(new OnBMClickListener() {
                @Override
                public void onBoomButtonClick(int index) {
                    // When the boom-button corresponding this builder is clicked.
                    Toast.makeText(TextInsideCircleButtonActivity.this, "Clicked " + index, Toast.LENGTH_SHORT).show();
                }
            })

            // Whether the image-view should rotate.
            .rotateImage(false)

            // Whether the text-view should rotate.
            .rotateText(false)

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

            // Set the text resource when boom-button is at normal-state.
            .normalTextRes(R.string.text_inside_circle_button_text_normal)

            // Set the text resource when boom-button is at highlighted-state.
            .highlightedTextRes(R.string.text_inside_circle_button_text_highlighted)

            // Set the text resource when boom-button is at unable-state.
            .unableTextRes(R.string.text_inside_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 color of text when boom-button is at highlighted-state.
            .highlightedTextColor(Color.BLUE)

            // Set the color of text when boom-button is at unable-state.
            .unableTextColor(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(15), Util.dp2px(52), Util.dp2px(65), Util.dp2px(72)))

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

            // 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 color of boom-button when it is at highlighted-state.
            .highlightedColor(Color.BLUE)

            // The color of boom-button when it is at unable-state.
            .unableColor(Color.BLACK)

            // Whether the boom-button is unable, default value is false.
            .unable(true)

            // The radius of boom-button, in pixel.
            .buttonRadius(Util.dp2px(40));
    bmb.addBuilder(builder);
}

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

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

Piece Place Enum for Text Inside 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 Inside 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`.