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

rsweny / segmentedbutton Goto Github PK