Skip to content
GitLab

Text Outside Circle Button · Changes

Page history
Updated Text Outside Circle Button (markdown) authored by Weiping Huang's avatar Weiping Huang
Hide whitespace changes
Inline Side-by-side
Text-Outside-Circle-Button.md
View page @ d454e7b3
![Text Outside Circle Button](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/BoomButton/TextOutsideCircleButton.png)
Add text outside circle buttons with a text and image outside 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](https://github.com/Nightonke/BoomMenu/wiki/Text-Outside-Circle-Button#piece-place-enum-for-text-outside-circle-button) and [button-place-enum](https://github.com/Nightonke/BoomMenu/wiki/Text-Outside-Circle-Button#button-place-enum-for-text-outside-circle-button), check the tables below.
###Add Builders
The builder of text outside circle button has lots of methods to customize the boom-buttons.
```
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)
// 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_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 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 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)
// 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.getPiecePlaceEnum().pieceNumber(); i++) {
TextOutsideCircleButton.Builder builder = new TextOutsideCircleButton.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 Outside Circle Button
All piece-place-enum and button-place-enum can be found in [demo](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/TextOutsideCircleButtonActivity.java).
1. PiecePlaceEnum.DOT_1(in .java) or bmb_piecePlace_dot_1(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-1.png" width="100">
2. PiecePlaceEnum.DOT_2_M(in .java) or bmb_piecePlace_dot_2_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-2-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-2-2.png" width="100">
3. PiecePlaceEnum.DOT_3_M(in .java) or bmb_piecePlace_dot_3_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-3-1.png" width="100"><img
src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-3-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-3-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-3-4.png" width="100">
4. PiecePlaceEnum.DOT_4_M(in .java) or bmb_piecePlace_dot_4_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-4-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-4-2.png" width="100">
5. PiecePlaceEnum.DOT_5_M(in .java) or bmb_piecePlace_dot_5_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-5-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-5-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-5-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-5-4.png" width="100">
6. PiecePlaceEnum.DOT_6_M(in .java) or bmb_piecePlace_dot_6_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-6-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-6-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-6-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-6-4.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-6-5.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-6-6.png" width="100">
7. PiecePlaceEnum.DOT_7_M(in .java) or bmb_piecePlace_dot_7_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-7-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-7-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-7-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-7-4.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-7-5.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-7-6.png" width="100">
8. PiecePlaceEnum.DOT_8_M(in .java) or bmb_piecePlace_dot_8_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-4.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-5.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-6.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-8-7.png" width="100">
9. PiecePlaceEnum.DOT_9_M(in .java) or bmb_piecePlace_dot_9_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-9-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-9-2.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-dot-9-3.png" width="100">
### Button Place Enum for Text Outside Circle Button
All piece-place-enum and button-place-enum can be found in [demo](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/TextOutsideCircleButtonActivity.java).
1. ButtonPlaceEnum.SC_1(in .java) or bmb_buttonPlace_sc_1(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-1.png" width="100">
2. ButtonPlaceEnum.SC_2_M(in .java) or bmb_buttonPlace_sc_2_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-2-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-2-2.png" width="100">
3. ButtonPlaceEnum.SC_3_M(in .java) or bmb_buttonPlace_sc_3_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-3-1.png" width="100"><img
src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-3-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-3-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-3-4.png" width="100">
4. ButtonPlaceEnum.SC_4_M(in .java) or bmb_buttonPlace_sc_4_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-4-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-4-2.png" width="100">
5. ButtonPlaceEnum.SC_5_M(in .java) or bmb_buttonPlace_sc_5_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-5-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-5-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-5-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-5-4.png" width="100">
6. ButtonPlaceEnum.SC_6_M(in .java) or bmb_buttonPlace_sc_6_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-6-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-6-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-6-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-6-4.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-6-5.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-6-6.png" width="100">
7. ButtonPlaceEnum.SC_7_M(in .java) or bmb_buttonPlace_sc_7_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-7-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-7-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-7-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-7-4.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-7-5.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-7-6.png" width="100">
8. ButtonPlaceEnum.SC_8_M(in .java) or bmb_buttonPlace_sc_8_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-2.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-3.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-4.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-5.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-6.png" width="100"> <img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-8-7.png" width="100">
9. ButtonPlaceEnum.SC_9_M(in .java) or bmb_buttonPlace_sc_9_M(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-9-1.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-9-2.png" width="100"><img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/button-place-enum-sc-9-3.png" width="100">
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`.
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/horizontal.png">
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`.
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/text-outside-circle-button/vertical.png">