Segmented Control with animation for Android API 12+
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Android Arsenal

SegmentedButton

poster

Segmented Button is a IOS-like "Segmented Control" with animation.
For more Android-like segmented control, check Radio Real Button.

Preview

1
2
3
6
4 5

You can also apply your custom drawable on button group

7

It is now possible to drag selector

8

Installation

Gradle

Add it to your build.gradle with:

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

and:

dependencies {
    compile 'com.github.ceryle:SegmentedButton:v2.0.2'
}

Customization

Some Attributes

Segmented Button

Option Name Format Description
app:sb_imageTint color Set tint onto button's image
app:sb_imageScale float Scale button's image
app:sb_selectedImageTint color Set tint onto button's image if selector on it
app:sb_selectedTextColor color Set color onto button's text if selector on it
app:sb_rippleColor color Set ripple color of button

Segmented Button Group

Option Name Format Description
app:sbg_ripple boolean Set ripple color for every button
app:sbg_rippleColor color Set ripple color for every button with custom color
app:sbg_selectorImageTint color If selector on it, set tint onto image for every button
app:sbg_selectorTextColor color If selector on it, set text color for every button
app:sbg_selectorColor color Set selector color
app:sbg_dividerSize dimension Set divider size
app:sbg_dividerPadding dimension Set divider padding for top and bottom
app:sbg_dividerColor color Change divider color
app:sbg_dividerRadius dimension Round divider
app:sbg_shadow boolean Shadow for container layout (api21+)
app:sbg_shadowElevation dimension Shadow for container layout (api21+)
app:sbg_shadowMargin dimension Set margin to make shadow visible (api21+)
app:sbg_position integer Set selected button position
app:sbg_radius dimension Make layout rounder
app:sbg_backgroundColor color Set background color of container (except transparent color)
app:sbg_animateSelectorDuration integer Set how long selector travels to selected position
app:sbg_animateSelector integer Set selector animation (ex. bounce animation)
app:sbg_borderSize dimension Add border by giving dimension
app:sbg_borderColor color Change border color (Default: Grey)

Animations Available

  • fastOutSlowIn
  • bounce
  • linear
  • decelerate
  • cycle
  • anticipate
  • accelerateDecelerate
  • accelerate
  • anticipateOvershoot
  • fastOutLinearIn
  • linearOutSlowIn
  • overshoot

These animations can be set using the attribute noted above like so: app:sbg_animateSelector="bounce". Also make sure to play with the app:sbg_animateSelectorDuration attribute to get the animation to look exactly how you want it.

Examples

In Xml Layout
    <co.ceryle.segmentedbutton.SegmentedButtonGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:sbg_animateSelector="bounce"
        app:sbg_animateSelectorDuration="1000"
        app:sbg_backgroundColor="@color/white"
        app:sbg_dividerColor="@color/grey_500"
        app:sbg_dividerPadding="10dp"
        app:sbg_dividerRadius="10dp"
        app:sbg_dividerSize="1dp"
        app:sbg_position="1"
        app:sbg_radius="2dp"
        app:sbg_ripple="true"
        app:sbg_rippleColor="@color/grey_500"
        app:sbg_selectorColor="@color/grey_500"
        app:sbg_selectorTextColor="@color/white"
        app:sbg_shadow="true"
        app:sbg_shadowElevation="3dp"
        app:sbg_shadowMargin="4dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="10dp"
            android:text="Button 1"
            android:textAllCaps="false" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="10dp"
            android:text="Button 2"
            android:textAllCaps="false" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="10dp"
            android:text="Button 3"
            android:textAllCaps="false" />

    </co.ceryle.segmentedbutton.SegmentedButtonGroup>
Listener Example
SegmentedButtonGroup segmentedButtonGroup = (SegmentedButtonGroup) findViewById(R.id.segmentedButtonGroup);
segmentedButtonGroup.setOnClickedButtonPosition(new SegmentedButtonGroup.OnClickedButtonPosition() {
    @Override
    public void onClickedButtonPosition(int position) {
        Toast.makeText(MainActivity.this, "Clicked: " + position, Toast.LENGTH_SHORT).show();
    }
});
segmentedButtonGroup.setPosition(2, 0);

License

This project is licensed under the Apache License Version 2.0 - see the LICENSE.md file for details