Segmented Button

Additional

Language
Java
Version
v2.0.2 (Oct 21, 2017)
Created
Oct 3, 2016
Updated
Jan 29, 2019
Owner
Ege Aker (ceryle)
Contributors
Toshihiro Yagi (sys1yagi)
Ege Aker (ceryle)
maximeroussy
3
Activity
Badge
Generate
Download
Source code
APK file

Show card

SegmentedButton

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

Preview







You can also apply your custom drawable on button group


It is now possible to drag selector

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