Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ceryle/SegmentedButton
Segmented Control with animation for Android API 12+
https://github.com/ceryle/SegmentedButton
android animation button buttongroup java radio-buttons segmented-controls
Last synced: about 1 month ago
JSON representation
Segmented Control with animation for Android API 12+
- Host: GitHub
- URL: https://github.com/ceryle/SegmentedButton
- Owner: ceryle
- License: apache-2.0
- Archived: true
- Created: 2016-10-03T11:20:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-27T13:34:48.000Z (over 2 years ago)
- Last Synced: 2024-08-03T01:15:16.068Z (4 months ago)
- Topics: android, animation, button, buttongroup, java, radio-buttons, segmented-controls
- Language: Java
- Homepage:
- Size: 1.15 MB
- Stars: 365
- Watchers: 7
- Forks: 97
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-android-ui - SegmentedButton - 类似IOS的带动画分割按钮 (按钮)
README
[](https://android-arsenal.com/details/1/4445) [](https://jitpack.io/#ceryle/segmentedbutton)
## 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
Segmented Button is a IOS-like "Segmented Control" with animation.
For more Android-like segmented control, check [Radio Real Button](https://github.com/ceryle/RadioRealButton).
## 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:
```gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
```
and:
```gradle
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
```xml
```
##### Listener Example
```java
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](LICENSE.md) file for details