ceryle/SegmentedButton

Segmented Control with animation for Android API 12+

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.ceryle:segmentedbutton:v2.0.2'
	}
	dependencies {
		implementation("com.github.ceryle:segmentedbutton:v2.0.2")
	}
	<dependency>
	    <groupId>com.github.ceryle</groupId>
	    <artifactId>segmentedbutton</artifactId>
	    <version>v2.0.2</version>
	</dependency>

                            
    libraryDependencies += "com.github.ceryle" % "segmentedbutton" % "v2.0.2"
        
        

                            
    :dependencies [[com.github.ceryle/segmentedbutton "v2.0.2"]]

Readme

Android Arsenal

Archived

I stopped developing this library for a long time ago. I thought about revising it recently but there is already someone keeping it up. I recommend you to use it instead. Thank you all for your support.

https://github.com/addisonElliott/SegmentedButton

SegmentedButton

poster

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

Preview

1 <br /> 2 <br /> 3 <br /> 6 <br /> 4 5 <br />

You can also apply your custom drawable on button group

7 <br />

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