Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SimformSolutionsPvtLtd/SSJetPackComposeProgressButton
SSJetPackComposeProgressButton is an elegant button with a different loading animations. 🚀
https://github.com/SimformSolutionsPvtLtd/SSJetPackComposeProgressButton
android animation animationbutton button declarative-ui jetpack-components jetpack-compose jetpack-compose-animation kotlin loadingbutton morphing morphing-button progress progress-bar progressbutton
Last synced: 2 days ago
JSON representation
SSJetPackComposeProgressButton is an elegant button with a different loading animations. 🚀
- Host: GitHub
- URL: https://github.com/SimformSolutionsPvtLtd/SSJetPackComposeProgressButton
- Owner: SimformSolutionsPvtLtd
- License: apache-2.0
- Created: 2021-05-13T04:12:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-20T06:06:13.000Z (6 months ago)
- Last Synced: 2024-03-20T07:25:28.120Z (6 months ago)
- Topics: android, animation, animationbutton, button, declarative-ui, jetpack-components, jetpack-compose, jetpack-compose-animation, kotlin, loadingbutton, morphing, morphing-button, progress, progress-bar, progressbutton
- Language: Kotlin
- Homepage:
- Size: 52.3 MB
- Stars: 258
- Watchers: 8
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- jetpack-compose-awesome - ProgressButton - SSJetPackComposeProgressButton is an elegant button with a different loading animations which makes your app attractive. (Libraries / UI)
- jetpack-compose-awesome - ProgressButton - SSJetPackComposeProgressButton is an elegant button with a different loading animations which makes your app attractive. (Libraries / UI)
README
# SSJetPackComposeProgressButton
### _SSJetPackComposeProgressButton is an elegant button with a different loading animations which makes your app attractive._
[](https://travis-ci.org/SimformSolutionsPvtLtd/SSJetPackComposeProgressButton) [](https://jitpack.io/#SimformSolutionsPvtLtd/SSJetPackComposeProgressButton) [](https://kotlinlang.org) [](https://www.android.com/) [](https://android-arsenal.com/api?level=21) []( https://android-arsenal.com/details/1/8302 )
# Jetpack Compose
Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
## How to get started
Please get **Android Studio Arctic Fox 2020.3.1** or above [from here](https://developer.android.com/studio) and use **JDK 11** to build this project.
## Features
- Android’s modern toolkit - Jetpack Compose support.
- Newly designed loading animation make your app attractive.
- Blinking icon button for your hot-feature.
- Button with text, right and left icon.
- Different types of state makes it easy to manage button. (Idle, Loading, Success, Failure)
- Fully customized button (Corner radius, background, colors, animation speed etc.)
- Customize button loading animation with your logo and special animation effect.
# 🎬 Preview
| On Success | On Failure |
|--|--|
|  |  |
# 🎬 Customized loading animation
| On Success | On Failure |
|--|--|
|  |  |
## Installation
1. Add it in your root build.gradle at the end of repositories:
```groovy
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
```
* Add the dependency in your app's build.gradle file
```groovy
dependencies {
implementation 'com.github.SimformSolutionsPvtLtd:SSJetPackComposeProgressButton:1.0.8'
}
```
## Usage
* Just use SSJetPackComposeProgressButton where you want button.
```kotlin
var submitButtonState by remember { mutableStateOf(SSButtonState.IDLE) }
SSJetPackComposeProgressButton(
type = SSButtonType.CLOCK,
width = 300.dp,
height = 50.dp,
onClick = {
//Perform action on click of button and make it's state to LOADING
submitButtonState = SSButtonState.LOADING
},
assetColor = Color.Red,
buttonState = submitButtonState
)
```
```kotlin
// On Success change submitButtonState to success state
submitButtonState = SSButtonState.SUCCESS
```
```kotlin
// On Failure change submitButtonState to failure state
submitButtonState = SSButtonState.FAILIURE
```
## Customization
* You can customize loading icon and animation effect according to your requirement.You can apply multiple animation effect from rotation, zoom-in-out and color changer too.
```kotlin
var submitButtonState by remember { mutableStateOf(SSButtonState.IDLE) }
SSJetPackComposeProgressButton(
type = SSButtonType.CUSTOM,
width = 300.dp,
height = 50.dp,
onClick = {
//Perform action on click of button and make it's state to LOADING
submitButtonState = SSButtonState.LOADING
},
assetColor = Color.Red,
buttonState = submitButtonState,
successIconPainter = painterResource(id = R.drawable.custom_success),
failureIconPainter = painterResource(id = R.drawable.custom_fail),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
padding = PaddingValues(six.dp),
text = stringResource(id = R.string.simform),
textModifier = Modifier.padding(ten.dp),
fontWeight = FontWeight.Bold,
leftImagePainter = painterResource(id = R.drawable.simform_logo),
buttonBorderStroke = BorderStroke(two.dp, colorResource(id = R.color.pink)),
customLoadingIconPainter = painterResource(id = R.drawable.simform_logo),
customLoadingEffect = SSCustomLoadingEffect(
rotation = false,
zoomInOut = true,
colorChanger = false
)
)
```
```kotlin
// On Success change submitButtonState to success state
submitButtonState = SSButtonState.SUCCESS
```
```kotlin
// On Failure change submitButtonState to failure state
submitButtonState = SSButtonState.FAILIURE
```
### All Attributes
------------------------
| Attribute | Description | Default |
| --- | --- | --- |
| `type` | Choose type of animation from:[CIRCLE, WHEEL, ZOOM_IN_OUT_CIRCLE, CLOCK, SPIRAL, CUSTOM] | None |
| `width` | Width to be applied to the button. | None |
| `height` | Height to be applied to the button. | None |
| `onClick` | Will be called when the user clicks the button. | None |
| `assetColor` | Color to be applied to icon and text inside button. | None |
| `buttonState` | Represent the state of button from IDLE, LOADING, SUCCESS, FAILIURE from SSButtonState. | None |
| `buttonBorderStroke` | Border to draw around the button. | None |
| `blinkingIcon` | Icon will be blink with size and color. | `false` |
| `cornerRadius` | Corner radius to be applied to the button. | `20` |
| `speedMillis` | Speed of the animation while changing the state. | `1000` |
| `enabled` | Controls the enabled state of the button. | `true` |
| `elevation` | It is used to resolve the elevation for this button in different. | `ButtonDefaults.elevation()` |
| `colors` | Colors that will be used to resolve the background and content color for this button in different states | `ButtonDefaults.buttonColors()` |
| `padding` | The spacing values to apply internally between the container and the content. | `PaddingValues(0.dp)` |
| `alphaValue` | The alpha of the drawn area. | `1f` |
| `leftImagePainter` | Painter to draw inside this left Icon. | `null` |
| `rightImagePainter` | Painter to draw inside this right Icon. | `null` |
| `successIconPainter` | Painter to draw inside this success state Icon. | `rememberVectorPainter(image = Icons.Default.Done)` |
| `failureIconPainter` | Painter to draw inside this failiure state Icon. | `rememberVectorPainter(image = Icons.Outlined.Info)` |
| `successIconColor` | Color to be applied to success icon. | assetColor |
| `failureIconColor` | Color to be applied to failure icon. | assetColor |
| `text` | The text to be displayed. | `null` |
| `textModifier` | To apply to this text layout node. | `Modifier` |
| `fontSize` | The size of glyphs to use when painting the text. | `TextUnit.Unspecified` |
| `fontStyle` | The typeface variant to use when drawing the letters (e.g., italic). | `null` |
| `fontFamily` | The font family to be used when rendering the text. | `null` |
| `fontWeight` | The typeface thickness to use when painting the text (e.g., [FontWeight.Bold]). | `null` |
| `hourHandColor` | Color will be apply to hour hand in clock type animation only. | `Color.Black` |
| `customLoadingIconPainter` | painter [Painter] to draw your custom loading icon. | `painterResource(id = R.drawable.simform_logo)` |
| `customLoadingEffect` | Custom loading animation type like roation, zoom in out etc. | `SSCustomLoadingEffect( rotation = false, zoomInOut = false, colorChanger = false)` |
| `customLoadingPadding` | Spacing between button border and loading icon. | `0` |
| `shouldAutoMoveToIdleState` | In case of success/failure state after defined time it move back to idle state. | `true` |
## Our JetPackCompose Sample
[SSComposeCookBook](https://github.com/SimformSolutionsPvtLtd/SSComposeCookBook) : A Collection of major Jetpack compose UI components which are commonly used.
## Find this library useful? ❤️
Support it by joining __[stargazers]__ for this repository.⭐
## How to Contribute🤝
Whether you're helping us fix bugs, improve the docs, or a feature request, we'd love to have you! 💪
Check out our __[Contributing Guide]__ for ideas on contributing.
## Bugs and Feedback
For bugs, feature requests, and discussion please use __[GitHub Issues]__.
## Medium Blog
For more info go to __[Progress Button using JetPack Compose : SSJetPackComposeProgressButton](https://medium.com/simform-engineering/progress-button-using-jetpack-compose-ssjetpackcomposeprogressbutton-fbc187d1370e)__
## Awesome Mobile Libraries
- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)
## License
```
Copyright 2022 Simform Solutions
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.
```
[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)
[git-repo-url]:
[stargazers]:
[Contributing Guide]:
[GitHub Issues]: