Skip to content

Text Outside Circle Button

Jump to bottom
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`.

Developer Demo Download Lisense

Chapters
  1. Basic Usage
  2. Simple Circle Button
  3. Text Inside Circle Button
  4. Text Outside Circle Button
  5. Ham Button
  6. Share Style
  7. Custom Position
  8. Button Place Alignments
  9. Different Ways to Boom
  10. Ease Animations for Buttons
  11. Different Order for Buttons
  12. Other Animations Attributes for Buttons
  13. Click Event and Listener
  14. Control BMB
  15. Use BMB in Action Bar
  16. Use BMB in Tool Bar
  17. Use BMB in List
  18. Use BMB in Fragment
  19. Attributes for BMB or Pieces on BMB
  20. Cache Optimization & Boom Area
  21. Change Boom Buttons Dynamically
  22. Fade Views
  23. Version History
  24. Structure for BMB
Clone this wiki locally