SegmentedButton
Segmented Button is a IOS-like "Segmented Control" with animation.
For more Android-like segmented control, check Radio Real Button.
##Preview
Installation
Gradle
Add it to your build.gradle with:
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}and:
dependencies {
compile 'com.github.ceryle:SegmentedButton:v1.0'
}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 |
| app:sbg_animateSelectorDuration | integer |
Set how long selector travels to selected position |
| app:sbg_animateSelector | integer |
Set selector animation (ex. bounce animation) |
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent