ceryle / Segmentedbutton
Licence: apache-2.0
Segmented Control with animation for Android API 12+
Stars: ✭ 352
Programming Languages
java
68154 projects - #9 most used programming language
Projects that are alternatives of or similar to Segmentedbutton
Tristatetogglebutton
Customizable tri-state toggle button (with three states, three state toggle) for Android
Stars: ✭ 198 (-43.75%)
Mutual labels: button, radio-buttons
AMChoice
Radio Button and check box for iOS
Stars: ✭ 45 (-87.22%)
Mutual labels: button, radio-buttons
Radiorealbutton
A custom radio button for Android API 12+
Stars: ✭ 250 (-28.98%)
Mutual labels: button, radio-buttons
Examples Win32
Shows how to use Win32 controls by programming code (c++17).
Stars: ✭ 22 (-93.75%)
Mutual labels: button, radio-buttons
react-native-radio-buttons-group
Simple, best and easy to use radio buttons for react native apps.
Stars: ✭ 145 (-58.81%)
Mutual labels: button, radio-buttons
Fab
🛍️ A Floating Action Button for macOS. Inspired by Material Design, and written in Swift.
Stars: ✭ 24 (-93.18%)
Mutual labels: button
react-bootstrap-button-loader
React ButtonLoader with Bootstrap flavor
Stars: ✭ 25 (-92.9%)
Mutual labels: button
awesome-web-styling
Awesome Web Styling with CSS Animation Effects ⭐️
Stars: ✭ 109 (-69.03%)
Mutual labels: button
Flexiblebutton
灵活的按键处理库(Flexible Button)| 按键驱动 | 支持单击、双击、连击、长按、自动消抖 | 灵活适配中断和低功耗 | 按需实现组合按键
Stars: ✭ 322 (-8.52%)
Mutual labels: button
neumorphic-style
🎛 Simple SwiftUI ‘neumorphic’ button style
Stars: ✭ 54 (-84.66%)
Mutual labels: button
Dragfloatingactionbutton
一个可以随处拖曳FloatingActionButton,边缘自动吸附,可设置按钮悬浮透明度,拖曳避免阻挡界面视图无法查看。
Stars: ✭ 258 (-26.7%)
Mutual labels: button
Lthradiobutton
A radio button with a pretty animation
Stars: ✭ 303 (-13.92%)
Mutual labels: radio-buttons
TextButton
⏹️ An easy to use `TextButton` when you need a TextView-like button, with handy touch feedback effects.
Stars: ✭ 19 (-94.6%)
Mutual labels: button
Jc button
Arduino library to debounce button switches, detect presses, releases, and long presses
Stars: ✭ 289 (-17.9%)
Mutual labels: button
homebridge-switcheroo
Simple on/off or multiswitch radio buttons for http reqs. Useful for lights, A/V systems, home automation, whatever
Stars: ✭ 38 (-89.2%)
Mutual labels: radio-buttons
Examples Gtkmm
Shows how to use Gtkmm controls by programming code (c++17).
Stars: ✭ 23 (-93.47%)
Mutual labels: radio-buttons
MGS.Electronics
Unity plugin for make button switch, knob switch and rocker element in scene.
Stars: ✭ 12 (-96.59%)
Mutual labels: button
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].