Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

SSJetPackComposeProgressButton is an elegant button with a different loading animations. 🚀

License

NotificationsYou must be signed in to change notification settings

SimformSolutionsPvtLtd/SSJetPackComposeProgressButton

alt text

SSJetPackComposeProgressButton

SSJetPackComposeProgressButton is an elegant button with a different loading animations which makes your app attractive.

CI StatusKotlin VersionPlatformAPIAndroid Arsenal

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.
  • Supports displaying GIFs via URL or local file in the button's loading state.
  • Supports swipe to animate buttons.

🎬 Preview

On SuccessOn Failure

🎬 Swipeable Buttons

On SuccessOn Failure

🎬 Customized loading animation

On SuccessOn Failure

Installation

  1. Add it in your root build.gradle at the end of repositories:

    allprojects {repositories {...maven { url'https://jitpack.io' }}}
  • Add the dependency in your app's build.gradle file

     dependencies {         implementation'com.github.SimformSolutionsPvtLtd:SSJetPackComposeProgressButton:<LATEST_TAG>' }

Usage

  • Just use SSJetPackComposeProgressButton where you want button.

    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 )
    // On Success change submitButtonState to success state submitButtonState=SSButtonState.SUCCESS
    // On Failure change submitButtonState to failure state submitButtonState=SSButtonState.FAILIURE

Migration guide from releasev1.0.9

  • Added support displaying GIFs via URL or local file in the button's loading state.
  • AddedblinkingIconColor to animate with your custom color.
  • You can now apply different tints by using these updated variables:leftImageIconTintColorrightImageTintColorsuccessIconTintColorfailureIconTintColorThese variables allow you to customize tints as per your specific requirements, while defaulting tonull if not specified.
  • Changed defaultcornerRadius value to0 from20.
  • RenamedblinkingIcon toisBlinkingIcon inSSJetPackComposeProgressButton.
  • RenamedcolorChanger infadeInOut inSSCustomLoadingEffect.
  • RemovedbuttonBorderStroke and instead usebuttonBorderWidth,buttonBorderColor andanimatedButtonBorderColor to offer more control over button borders.
  • Removed default values forsuccessIconPainter andfailureIconPainter and set tonull to offermore control over what is displayed when animation is completed.
  • Removed default value forcustomLoadingIconPainter and set tonull to offermore control over what is displayed when animation is in progress.

Customization

  • You can customize loading icon and animation effect according to your requirement.You can applymultiple animation effect from rotation, zoom-in-out and fade-in-out too.

    var submitButtonState by remember { mutableStateOf(SSButtonState.IDLE) }SSJetPackComposeProgressButton(                 type=SSButtonType.CUSTOM,                 width=480.dp,                 height=60.dp,                 onClick= {//Perform action on click of button and make it's state to LOADING                     submitButtonState=SSButtonState.LOADINGCoroutineScope(Dispatchers.Default).launch {// Do your heavy work once completed show success or failure                         delay(2000)                          submitButtonState=SSButtonState.SUCCESS                     }                 },                 cornerRadius=20,                 assetColor=Color.Red,                 buttonState= submitButtonState,                 successIconPainter= rememberVectorPainter(image=Icons.Default.Done),                 successIconTintColor=LIGHT_PINK,                 failureIconPainter= rememberVectorPainter(image=Icons.Outlined.Info),                 failureIconTintColor=LIGHT_PINK,                 colors=ButtonDefaults.buttonColors(                     containerColor=Color.White,                     disabledContainerColor=Color.White                 ),                 padding=PaddingValues(12.dp),                 text= stringResource(id=R.string.app_name),                 textModifier=Modifier.padding(10.dp),                 fontWeight=FontWeight.Bold,                 leftImagePainter= painterResource(id=R.drawable.baby_pink_android),                 isBlinkingIcon=true,                 blinkingIconColor=Color.White,                 buttonBorderWidth=3.dp,                 animatedButtonBorderColor=LIGHT_PINK,                 buttonBorderColor=LIGHT_PINK,                 customLoadingIconPainter= painterResource(id=R.drawable.baby_pink_android),                 customLoadingEffect=SSCustomLoadingEffect(                     zoomInOut=true,                 )             )
    // On Success change submitButtonState to success state submitButtonState=SSButtonState.SUCCESS
    // On Failure change submitButtonState to failure state submitButtonState=SSButtonState.FAILIURE

All Attributes


AttributeDescriptionDefault
typeChoose type of animation from:[CIRCLE, WHEEL, ZOOM_IN_OUT_CIRCLE, CLOCK, SPIRAL, CUSTOM]None
widthWidth to be applied to the button.None
heightHeight to be applied to the button.None
onClickWill be called when the user clicks the button.None
assetColorColor to be applied to icon and text inside button.None
buttonStateRepresent the state of button from IDLE, LOADING, SUCCESS, FAILIURE from SSButtonState.None
buttonBorderWidthBorder width to draw around the button.0.dp
buttonBorderColorBorder color to be applied around the button.0.dp
animatedButtonBorderColorBorder color to be applied around the button when button is in LOADING state.0.dp
isBlinkingIconIcon will be blink with size and color.false
blinkingIconColorColor which will be used with Icon tintColor whenisBlinkingIcon is enabled.null
cornerRadiusCorner radius to be applied to the button.20
speedMillisSpeed of the animation while changing the state.1000
enabledControls the enabled state of the button.true
elevationIt is used to resolve the elevation for this button in different.ButtonDefaults.elevatedButtonElevation()
colorsColors that will be used to resolve the background and content color for this button in different statesButtonDefaults.buttonColors()
paddingThe spacing values to apply internally between the container and the content.PaddingValues(0.dp)
alphaValueThe alpha of the drawn area.1f
leftImagePainterPainter to draw inside this left Icon.null
leftImageTintColorColor to be applied to left image.null
rightImagePainterPainter to draw inside this right Icon.null
rightImageTintColorColor to be applied to right image.null
successIconPainterPainter to draw inside this success state Icon.null
successIconTintColorColor to be applied to success icon.null
failureIconPainterPainter to draw inside this failure state Icon.null
failureIconTintColorColor to be applied to failure icon.null
textThe text to be displayed.null
textModifierTo apply to this text layout node.Modifier
fontSizeThe size of glyphs to use when painting the text.TextUnit.Unspecified
fontStyleThe typeface variant to use when drawing the letters (e.g., italic).null
fontFamilyThe font family to be used when rendering the text.null
fontWeightThe typeface thickness to use when painting the text (e.g., [FontWeight.Bold]).null
hourHandColorColor will be apply to hour hand in clock type animation only.Color.Black
customLoadingIconPainterpainter [Painter] to draw your custom loading icon.painterResource(id = R.drawable.simform_logo)
customLoadingEffectCustom loading animation type like roation, zoom in out etc.SSCustomLoadingEffect( rotation = false, zoomInOut = false, colorChanger = false)
customLoadingPaddingSpacing between button border and loading icon.0.dp
shouldAutoMoveToIdleStateIn case of success/failure state after defined time it move back to idle state.true
swipeAbleButtonPaddingSpacing for swipeAble button icon.true
swipeAbleButtonThresholdThreshold for swipe button, once this threshold will reach it will consider button as loading state based onshouldAutomateSwipeToAnimate.0.5f
shouldAutomateSwipeToAnimateBased on this it will determine if button should move to loading state onceswipeAbleButtonThreshold has been reached or should wait for user to stop swipe.false
onSwipeAbleButtonDragPercentageUpdateThis will give callback of the progress update when the swipe is in progress.None
onSwipedThis will give callback once swipe is reached at threshold and button moves to loading state.None

Our JetPackCompose Sample

SSComposeCookBook : A Collection of major Jetpack compose UI components which are commonly used.

Find this library useful? ❤️

Support it by joiningstargazers 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 ourContributing Guide for ideas on contributing.

Bugs and Feedback

For bugs, feature requests, and discussion please useGitHub Issues.

Medium Blog

For more info go toProgress Button using JetPack Compose : SSJetPackComposeProgressButton

Awesome Mobile Libraries

License

Distributed under the MIT License. SeeLICENSE for details.


[8]ページ先頭

©2009-2025 Movatter.jp