{"id":13639741,"url":"https://github.com/ceryle/SegmentedButton","last_synced_at":"2025-04-19T22:33:47.685Z","repository":{"id":147029631,"uuid":"69864140","full_name":"ceryle/SegmentedButton","owner":"ceryle","description":"Segmented Control with animation for Android API 12+","archived":true,"fork":false,"pushed_at":"2022-03-27T13:34:48.000Z","size":1207,"stargazers_count":365,"open_issues_count":36,"forks_count":97,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-08-03T01:15:16.068Z","etag":null,"topics":["android","animation","button","buttongroup","java","radio-buttons","segmented-controls"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ceryle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-03T11:20:34.000Z","updated_at":"2024-07-24T11:28:58.000Z","dependencies_parsed_at":"2023-11-10T23:30:46.726Z","dependency_job_id":null,"html_url":"https://github.com/ceryle/SegmentedButton","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ceryle%2FSegmentedButton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ceryle%2FSegmentedButton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ceryle%2FSegmentedButton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ceryle%2FSegmentedButton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ceryle","download_url":"https://codeload.github.com/ceryle/SegmentedButton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223810685,"owners_count":17206813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","animation","button","buttongroup","java","radio-buttons","segmented-controls"],"created_at":"2024-08-02T01:01:04.192Z","updated_at":"2024-11-09T09:31:35.415Z","avatar_url":"https://github.com/ceryle.png","language":"Java","readme":"[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-SegmentedButton-green.svg?style=true)](https://android-arsenal.com/details/1/4445) [![](https://jitpack.io/v/ceryle/segmentedbutton.svg)](https://jitpack.io/#ceryle/segmentedbutton)\n\n## Archived\nI 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.\n\nhttps://github.com/addisonElliott/SegmentedButton\n\n\n# SegmentedButton\n\n![poster](https://cloud.githubusercontent.com/assets/20969019/19036424/75a0b61c-8978-11e6-873d-e316f77fd740.png)\n\n\nSegmented Button is a IOS-like \"Segmented Control\" with animation.\u003cbr/\u003e\nFor more Android-like segmented control, check [Radio Real Button](https://github.com/ceryle/RadioRealButton).\n\n## Preview\n![1](https://cloud.githubusercontent.com/assets/20969019/21565956/9fec9300-cea6-11e6-981f-c5c2a70a2e57.gif)\n\u003cbr /\u003e\n![2](https://cloud.githubusercontent.com/assets/20969019/21565963/bdda9aba-cea6-11e6-91ba-6e6b0230a512.gif)\n\u003cbr /\u003e\n![3](https://cloud.githubusercontent.com/assets/20969019/21565967/c3dd51d2-cea6-11e6-91c4-1d3fa0ee6884.gif)\n\u003cbr /\u003e\n![6](https://cloud.githubusercontent.com/assets/20969019/21565976/df8a7fc2-cea6-11e6-8740-debb45d1aff7.gif)\n\u003cbr /\u003e\n![4](https://cloud.githubusercontent.com/assets/20969019/21565969/ce06efa6-cea6-11e6-8878-6260054bb3be.gif)\n![5](https://cloud.githubusercontent.com/assets/20969019/21565972/d6df69d2-cea6-11e6-8391-27b1d45b945b.gif)\n\u003cbr /\u003e\n###### You can also apply your custom drawable on button group\n![7](https://cloud.githubusercontent.com/assets/20969019/21565978/ec2fb698-cea6-11e6-8ae9-54326e3ebdf4.gif)\n\u003cbr /\u003e\n###### It is now possible to drag selector\n![8](https://cloud.githubusercontent.com/assets/20969019/24909871/6b0a8b10-1ece-11e7-8686-df8276f1ae15.gif)\n\n\n## Installation\n\n#### Gradle\n\nAdd it to your build.gradle with:\n```gradle\nallprojects {\n    repositories {\n        maven { url \"https://jitpack.io\" }\n    }\n}\n```\nand:\n\n```gradle\ndependencies {\n    compile 'com.github.ceryle:SegmentedButton:v2.0.2'\n}\n```\n\n## Customization\n\n### Some Attributes\n\n#### Segmented Button\n| Option Name              | Format  | Description                              |\n| ------------------------ | ------- | ---------------------------------------- |\n| app:sb_imageTint         | `color` | Set tint onto button's image             |\n| app:sb_imageScale        | `float` | Scale button's image                     |\n| app:sb_selectedImageTint | `color` | Set tint onto button's image if selector on it |\n| app:sb_selectedTextColor | `color` | Set color onto button's text if selector on it |\n| app:sb_rippleColor       | `color` | Set ripple color of button               |\n\n#### Segmented Button Group\n| Option Name                     | Format      | Description                              |\n| ------------------------------- | ----------- | ---------------------------------------- |\n| app:sbg_ripple                  | `boolean`   | Set ripple color for every button        |\n| app:sbg_rippleColor             | `color`     | Set ripple color for every button with custom color |\n| app:sbg_selectorImageTint       | `color`     | If selector on it, set tint onto image for every button |\n| app:sbg_selectorTextColor       | `color`     | If selector on it, set text color for every button |\n| app:sbg_selectorColor           | `color`     | Set selector color                       |\n| app:sbg_dividerSize             | `dimension` | Set divider size                         |\n| app:sbg_dividerPadding          | `dimension` | Set divider padding for top and bottom   |\n| app:sbg_dividerColor            | `color`     | Change divider color                     |\n| app:sbg_dividerRadius           | `dimension` | Round divider                            |\n| app:sbg_shadow                  | `boolean`   | Shadow for container layout (api21+)     |\n| app:sbg_shadowElevation         | `dimension` | Shadow for container layout (api21+)     |\n| app:sbg_shadowMargin            | `dimension` | Set margin to make shadow visible (api21+) |\n| app:sbg_position                | `integer`   | Set selected button position             |\n| app:sbg_radius                  | `dimension` | Make layout rounder                      |\n| app:sbg_backgroundColor         | `color`     | Set background color of container (except transparent color) |\n| app:sbg_animateSelectorDuration | `integer`   | Set how long selector travels to selected position |\n| app:sbg_animateSelector         | `integer`   | Set selector animation (ex. bounce animation) |\n| app:sbg_borderSize              | `dimension` | Add border by giving dimension           |\n| app:sbg_borderColor             | `color`     | Change border color (Default: Grey)      |\n\n### Animations Available\n\n- fastOutSlowIn\n- bounce\n- linear\n- decelerate\n- cycle\n- anticipate\n- accelerateDecelerate\n- accelerate\n- anticipateOvershoot\n- fastOutLinearIn\n- linearOutSlowIn\n- overshoot\n\nThese 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.\n\n#### Examples\n\n##### In Xml Layout\n\n```xml\n    \u003cco.ceryle.segmentedbutton.SegmentedButtonGroup\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_margin=\"10dp\"\n        app:sbg_animateSelector=\"bounce\"\n        app:sbg_animateSelectorDuration=\"1000\"\n        app:sbg_backgroundColor=\"@color/white\"\n        app:sbg_dividerColor=\"@color/grey_500\"\n        app:sbg_dividerPadding=\"10dp\"\n        app:sbg_dividerRadius=\"10dp\"\n        app:sbg_dividerSize=\"1dp\"\n        app:sbg_position=\"1\"\n        app:sbg_radius=\"2dp\"\n        app:sbg_ripple=\"true\"\n        app:sbg_rippleColor=\"@color/grey_500\"\n        app:sbg_selectorColor=\"@color/grey_500\"\n        app:sbg_selectorTextColor=\"@color/white\"\n        app:sbg_shadow=\"true\"\n        app:sbg_shadowElevation=\"3dp\"\n        app:sbg_shadowMargin=\"4dp\"\u003e\n\n        \u003cButton\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:minHeight=\"10dp\"\n            android:text=\"Button 1\"\n            android:textAllCaps=\"false\" /\u003e\n\n        \u003cButton\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:minHeight=\"10dp\"\n            android:text=\"Button 2\"\n            android:textAllCaps=\"false\" /\u003e\n\n        \u003cButton\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:minHeight=\"10dp\"\n            android:text=\"Button 3\"\n            android:textAllCaps=\"false\" /\u003e\n\n    \u003c/co.ceryle.segmentedbutton.SegmentedButtonGroup\u003e\n```\n\n##### Listener Example\n```java\nSegmentedButtonGroup segmentedButtonGroup = (SegmentedButtonGroup) findViewById(R.id.segmentedButtonGroup);\nsegmentedButtonGroup.setOnClickedButtonPosition(new SegmentedButtonGroup.OnClickedButtonPosition() {\n    @Override\n    public void onClickedButtonPosition(int position) {\n        Toast.makeText(MainActivity.this, \"Clicked: \" + position, Toast.LENGTH_SHORT).show();\n    }\n});\nsegmentedButtonGroup.setPosition(2, 0);\n```\n\n## License\n\nThis project is licensed under the Apache License Version 2.0 - see the [LICENSE.md](LICENSE.md) file for details\n\n","funding_links":[],"categories":["按钮"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceryle%2FSegmentedButton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceryle%2FSegmentedButton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceryle%2FSegmentedButton/lists"}