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 @ 7d081a24
......@@ -2,7 +2,7 @@
Add text outside circle buttons with a text and image outside for each to BMB.
###Create BMB
### Create BMB
Add BMB in .xml file.
......@@ -18,7 +18,7 @@ Add BMB in .xml file.
```
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
### 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++) {
......@@ -58,6 +58,9 @@ for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
// 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"))
......@@ -180,17 +183,38 @@ for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
.unable(true)
// The radius of boom-button, in pixel.
.buttonRadius(Util.dp2px(40));
.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](https://github.com/Nightonke/BoomMenu/blob/master/app/src/main/java/com/nightonke/boommenusample/SquareAndPieceCornerRadiusActivity.java)):
```
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);
```
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/pieceCornerRadius.png" width=300/>
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/square.png" width=300/>
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](https://github.com/Nightonke/BoomMenu/wiki/Attributes-for-BMB-or-Pieces-on-BMB#for-pieces-on-bmb) 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](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">
<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)
......@@ -213,7 +237,7 @@ src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum
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">
<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)
......