Skip to content
GitLab

Ham Button · Changes

Page history
Updated Ham Button (markdown) authored by Weiping Huang's avatar Weiping Huang
Hide whitespace changes
Inline Side-by-side
Ham-Button.md
View page @ 7c21d9f4
![Ham Button](https://github.com/Nightonke/BoomMenu/blob/master/Pictures/BoomButton/HamButton.png)
Add ham buttons with with a title, subtitle and image inside for each to BMB. Add ham buttons with with a title, subtitle 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="ham"
app:bmb_piecePlaceEnum="piecePlace_ham_4"
app:bmb_buttonPlaceEnum="buttonPlace_ham_4"
/>
```
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/Ham-Button#piece-place-enum-for-ham-button) and [button-place-enum](https://github.com/Nightonke/BoomMenu/wiki/Ham-Button#button-place-enum-for-ham-button), check the tables below.
###Add Builders
The builder of ham 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++) {
HamButton.Builder builder = new HamButton.Builder()
.normalImageRes(R.drawable.butterfly)
.normalTextRes("Butter Doesn't fly!")
.subNormalTextRes("Little butter Doesn't fly, either!");
bmb.addBuilder(builder);
}
```
But if you wanna customize more attributes:
```
for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) {
HamButton.Builder builder = new HamButton.Builder()
.listener(new OnBMClickListener() {
@Override
public void onBoomButtonClick(int index) {
// When the boom-button corresponding this builder is clicked.
Toast.makeText(HamButtonActivity.this, "Clicked " + index, Toast.LENGTH_SHORT).show();
}
})
// Whether the image-view should rotate.
.rotateImage(false)
// Whether the ham-button contains a sub text-view.
.containsSubText(true)
// 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(5))
// 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(0, 0, Util.dp2px(60), Util.dp2px(60)))
// 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_ham_button_text_normal)
// Set the text resource when boom-button is at highlighted-state.
.highlightedTextRes(R.string.text_ham_button_text_highlighted)
// Set the text resource when boom-button is at unable-state.
.unableTextRes(R.string.text_ham_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(70), Util.dp2px(10), Util.dp2px(280), Util.dp2px(40)))
// 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)
// Set the sub-text resource when boom-button is at normal-state.
.subNormalTextRes(R.string.text_ham_button_sub_text_normal)
// Set the sub-text resource when boom-button is at highlighted-state.
.subHighlightedTextRes(R.string.text_ham_button_sub_text_highlighted)
// Set the sub-text resource when boom-button is at unable-state.
.subUnableTextRes(R.string.text_ham_button_sub_text_unable)
// Set the sub-text when boom-button is at normal-state.
.subNormalText("Put your normal sub-text here")
// Set the sub-text when boom-button is at highlighted-state.
.subHighlightedText("Put your highlighted sub-text here")
// Set the sub-text when boom-button is at unable-state.
.subUnableText("Sub unable!")
// Set the color of sub-text when boom-button is at normal-state.
.subNormalTextColor(Color.BLACK)
// Set the color of sub-text when boom-button is at highlighted-state.
.subHighlightedTextColor(Color.WHITE)
// Set the color of sub-text when boom-button is at unable-state.
.subUnableTextColor(Color.YELLOW)
// Set the rect of sub-text.
// By this method, you can set the position and size of the sub-text-view in boom-button.
// For example, builder.textRect(new Rect(0, 50, 100, 100)) will make the
// sub-text-view's size to be 100 * 50 and margin-top to be 50 pixel.
.subTextRect(new Rect(Util.dp2px(70), Util.dp2px(35), Util.dp2px(280), Util.dp2px(55)))
// Set the padding of sub-text.
// By this method, you can control the padding in the sub-text-view.
// For instance, builder.textPadding(new Rect(10, 10, 10, 10)) will make the
// sub-text-view content 10-pixel padding to itself.
.subTextPadding(new Rect(0, 0, 0, 0))
// Set the typeface of the sub-text.
.subTypeface(Typeface.SERIF)
// Set the maximum of the lines of sub-text-view.
.subMaxLines(1)
// Set the gravity of sub-text-view.
.subTextGravity(Gravity.RIGHT)
// Set the ellipsize of the sub-text-view.
.subEllipsize(TextUtils.TruncateAt.END)
// Set the text size of the sub-text-view.
.subTextSize(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(false)
// Set the width of boom-button, in pixel.
.buttonWidth(Util.dp2px(300))
// Set the height of boom-button, in pixel.
.buttonHeight(Util.dp2px(60));
bmb.addBuilder(builder);
}
```
After adding builders to BMB, it is ready for a boom.
### Piece Place Enum for Ham 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/HamButtonActivity.java).
1. PiecePlaceEnum.HAM_1(in .java) or bmb_piecePlace_ham_1(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-ham-1.png" width="100">
2. PiecePlaceEnum.HAM_2(in .java) or bmb_piecePlace_ham_2(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-ham-2.png" width="100">
3. PiecePlaceEnum.HAM_3(in .java) or bmb_piecePlace_ham_3(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-ham-3.png" width="100">
4. PiecePlaceEnum.HAM_4(in .java) or bmb_piecePlace_ham_4(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-ham-4.png" width="100">
5. PiecePlaceEnum.HAM_5(in .java) or bmb_piecePlace_ham_5(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-ham-5.png" width="100">
6. PiecePlaceEnum.HAM_6(in .java) or bmb_piecePlace_ham_6(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/piece-place-enum/piece-place-enum-ham-6.png" width="100">
### Button Place Enum for Ham 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/HamButtonActivity.java).
1. ButtonPlaceEnum.HAM_1(in .java) or bmb_buttonPlace_ham_1(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/ham-button/button-place-enum-ham-1.png" width="100">
2. ButtonPlaceEnum.HAM_2(in .java) or bmb_buttonPlace_ham_2(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/ham-button/button-place-enum-ham-2.png" width="100">
3. ButtonPlaceEnum.HAM_3(in .java) or bmb_buttonPlace_ham_3(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/ham-button/button-place-enum-ham-3.png" width="100">
4. ButtonPlaceEnum.HAM_4(in .java) or bmb_buttonPlace_ham_4(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/ham-button/button-place-enum-ham-4.png" width="100">
5. ButtonPlaceEnum.HAM_5(in .java) or bmb_buttonPlace_ham_5(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/ham-button/button-place-enum-ham-5.png" width="100">
6. ButtonPlaceEnum.HAM_6(in .java) or bmb_buttonPlace_ham_6(in .xml)
<img src="https://github.com/Nightonke/BoomMenu/blob/master/Pictures/button-place-enum/ham-button/button-place-enum-ham-6.png" width="100">
7. 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/ham-button/horizontal.png">
8. 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/ham-button/vertical.png">