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
Segmented Button is a IOS-like "Segmented Control" with animation.
For more Android-like segmented control, check Radio Real Button.
Add it to your build.gradle with:
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}and:
dependencies {
compile 'com.github.ceryle:SegmentedButton:v2.0.2'
}| 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 |
| 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) |
- 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.
<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>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);This project is licensed under the Apache License Version 2.0 - see the LICENSE.md file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent