-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Text Inside Circle Button
Weiping Huang edited this page Dec 10, 2016
·
12 revisions
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.getButtonPlaceEnum().buttonNumber(); 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);
}
Don't need to set every attributes for boom-buttons, just customize what you want. For example:
for (int i = 0; i < bmb.getButtonPlaceEnum().buttonNumber(); 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.
All piece-place-enum and button-place-enum can be found in demo.
- PiecePlaceEnum.DOT_1(in .java) or bmb_piecePlace_dot_1(in .xml)



































All piece-place-enum and button-place-enum can be found in demo.
- ButtonPlaceEnum.SC_1(in .java) or bmb_buttonPlace_sc_1(in .xml)



































- 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