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