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 (not available for the last released version, but you can download the project to achieve that.)

Installation

Gradle

Add it to your build.gradle with:

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

and:

dependencies {
    compile 'com.github.ceryle:SegmentedButton:v1.2.2'
}

Customization

Transparent Background

Sorry, you cannot set group's background transparent. Reason is, in group there are three layers on top of the other. One layer is for selection and two are for background and foreground. If you change one of them, you will see that segmented button will look abnormal, something will be missing. Not recommended.

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