MultiChoicesCircleButton

A multiple-choice button with 3D parallax effect.

Inspired by Nicola Felasquez Felaco's Pubbblish and refer to JustinFincher/JZMultiChoicesCircleButton .

gif1

Include MultiChoicesCircleButton to Your Project

With gradle:

dependencies {
   compile 'com.gjiazhe:MultiChoicesCircleButton:1.0'
}
Groovy

Use MultiChoicesCircleButton in Layout File

<com.gjiazhe.multichoicescirclebutton.MultiChoicesCircleButton
    android:id="@+id/multiChoicesCircleButton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:mccb_collapseRadius="40dp"
    app:mccb_expandRadius="120dp"
    app:mccb_icon="@drawable/plus"
    app:mccb_text="Choose"
    app:mccb_buttonColor="@color/colorAccent"
    app:layout_behavior="@string/multi_choices_circle_button_behavior"/>
XML

All attributes:

Attributes Format Default Description
mccb_icon drawable null The icon of the button.
mccb_enableParallax boolean true Enable 3D parallax effect or not.
mccb_collapseRadius dimension 40dp The radius of the button when it is collapsed.
mccb_expandRadius dimension 120dp The radius of the button when it is expanded.
mccb_text string null The tittle of the button.
mccb_textSize string 35sp The text size of the button.
mccb_textColor color white The text color of the button.
mccb_buttonColor color #FC516A The color of the button.
mccb_duration integer 200ms Animation duration.
mccb_itemRadius dimension 20dp The radius of items.
mccb_itemDistanceToCentre dimension expandRadius * 2 / 3 The distance from items' centre to button's centre.
mccb_itemBackgroundColor color white The background color of items.
mccb_showBackgroundShadow boolean true Whether show shadow when hold the button.
mccb_backgroundShadowColor color #bb757575 The shadow's color when hold the button.

Set Items

Construct the item with its title, icon and angle.

MultiChoicesCircleButton.Item item1 = new MultiChoicesCircleButton.Item("Like", getResources().getDrawable(R.drawable.icon1), 30);

MultiChoicesCircleButton.Item item2 = new MultiChoicesCircleButton.Item("Message", getResources().getDrawable(R.drawable.icon2), 90);

MultiChoicesCircleButton.Item item3 = new MultiChoicesCircleButton.Item("Tag", getResources().getDrawable(R.drawable.icon3), 150);

List<MultiChoicesCircleButton.Item> buttonItems = new ArrayList<>();
buttonItems.add(item1);
buttonItems.add(item2);
buttonItems.add(item3);

MultiChoicesCircleButton multiChoicesCircleButton = (MultiChoicesCircleButton) findViewById(R.id.multiChoicesCircleButton);
multiChoicesCircleButton.setButtonItems(buttonItems);
Java

Set OnSelectedItemListener and OnHoverItemListener

multiChoicesCircleButton.setOnSelectedItemListener(new MultiChoicesCircleButton.OnSelectedItemListener() {
    @Override
    public void onSelected(MultiChoicesCircleButton.Item item, int index) {
        // Do something
    }
});

multiChoicesCircleButton.setOnHoverItemListener(new MultiChoicesCircleButton.OnHoverItemListener(){
    @Override
    public void onHovered(MultiChoicesCircleButton.Item item, int index) {
        // Do something
    }
});
Java

Wrok with CoordinatorLayout to enable auto hide/show when scrolling

<com.gjiazhe.multichoicescirclebutton.MultiChoicesCircleButton
    ....
    app:layout_behavior="@string/multi_choices_circle_button_behavior"/>
XML

GitHub