Convert Figma logo to code with AI

varunest logoSparkButton

Android library to create buttons with Twitter's heart like animation.

1,268
153
1,268
4

Top Related Projects

Android like button with delightful star animation inspired by Twitter's heart. See blog post for description.

Twitter's heart animation for Android

This is a UI lib for Android. Effects like shining.

1,573

:heart: Floating Action Button for iOS

Circle button widget for Android

一个可以用代码设置selector背景(按下去背景颜色更改,样式变化等等)的button, 再也不用写selector了

Quick Overview

SparkButton is an Android library that provides an animated button with a sparkling effect. It allows developers to easily add an eye-catching, interactive button to their Android applications, enhancing user engagement and visual appeal.

Pros

  • Easy to implement and customize
  • Smooth and visually appealing animations
  • Supports both XML and programmatic implementations
  • Lightweight and efficient

Cons

  • Limited to a specific animation style (sparkling effect)
  • May not fit all design aesthetics
  • Requires additional setup for custom drawables
  • Limited documentation for advanced customization

Code Examples

  1. Basic implementation in XML:
<com.varunest.sparkbutton.SparkButton
    android:id="@+id/spark_button"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:sparkbutton_activeImage="@drawable/ic_star_on"
    app:sparkbutton_inActiveImage="@drawable/ic_star_off"
    app:sparkbutton_iconSize="30dp"
    app:sparkbutton_primaryColor="@color/primary_color"
    app:sparkbutton_secondaryColor="@color/secondary_color" />
  1. Programmatic implementation:
val sparkButton = SparkButton(context)
sparkButton.imageSize = 30
sparkButton.setActiveImage(R.drawable.ic_star_on)
sparkButton.setInactiveImage(R.drawable.ic_star_off)
sparkButton.primaryColor = ContextCompat.getColor(context, R.color.primary_color)
sparkButton.secondaryColor = ContextCompat.getColor(context, R.color.secondary_color)
  1. Listening for button state changes:
sparkButton.setEventListener(object : SparkEventListener {
    override fun onEvent(button: SparkButton, buttonState: Boolean) {
        if (buttonState) {
            // Button is active
        } else {
            // Button is inactive
        }
    }
})

Getting Started

  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.varunest:sparkbutton:1.0.6'
}
  1. Add the SparkButton to your layout XML or create it programmatically:
<com.varunest.sparkbutton.SparkButton
    android:id="@+id/spark_button"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:sparkbutton_activeImage="@drawable/ic_star_on"
    app:sparkbutton_inActiveImage="@drawable/ic_star_off"
    app:sparkbutton_iconSize="30dp"
    app:sparkbutton_primaryColor="@color/primary_color"
    app:sparkbutton_secondaryColor="@color/secondary_color" />
  1. Customize the button properties and add event listeners as needed in your Activity or Fragment.

Competitor Comparisons

Android like button with delightful star animation inspired by Twitter's heart. See blog post for description.

Pros of LikeAnimation

  • More customizable animation options
  • Smoother animation transitions
  • Smaller library size, potentially better performance

Cons of LikeAnimation

  • Less comprehensive documentation
  • Fewer pre-built animation styles
  • Limited to "like" animations, less versatile

Code Comparison

SparkButton:

SparkButton sparkButton = findViewById(R.id.spark_button);
sparkButton.setChecked(true);
sparkButton.setAnimationSpeed(1.5f);
sparkButton.playAnimation();

LikeAnimation:

LikeButtonView likeButton = findViewById(R.id.like_button);
likeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        likeButton.animateButton();
    }
});

Both libraries offer simple implementation, but SparkButton provides more built-in customization options directly in the XML layout or through Java code. LikeAnimation requires more manual setup for custom animations but offers greater flexibility for advanced users.

SparkButton includes additional features like particle animations and various button states, making it more suitable for diverse use cases. LikeAnimation focuses specifically on "like" animations, which may be preferable for projects requiring a streamlined, focused solution.

Overall, the choice between these libraries depends on the specific project requirements, desired level of customization, and the developer's preference for either a comprehensive solution (SparkButton) or a lightweight, specialized tool (LikeAnimation).

Twitter's heart animation for Android

Pros of LikeButton

  • Simpler implementation with fewer dependencies
  • Easier to customize and integrate into existing projects
  • Smaller file size and potentially better performance

Cons of LikeButton

  • Less visually appealing animation compared to SparkButton
  • Fewer built-in customization options
  • Limited to a single animation style

Code Comparison

SparkButton:

sparkButton.setActiveImage(R.drawable.ic_star_on)
sparkButton.setInactiveImage(R.drawable.ic_star_off)
sparkButton.setChecked(true)
sparkButton.setAnimationSpeed(1.5f)
sparkButton.playAnimation()

LikeButton:

likeButton.setIcon(IconType.Heart);
likeButton.setIconSizeDp(25);
likeButton.setLikeDrawable(R.drawable.thumb_on);
likeButton.setUnlikeDrawable(R.drawable.thumb_off);
likeButton.setLiked(true);

Both libraries offer similar functionality for creating animated like/favorite buttons in Android applications. SparkButton provides a more visually appealing and customizable animation, while LikeButton offers a simpler implementation with easier integration. SparkButton may be preferred for projects requiring more advanced animations, while LikeButton could be a better choice for simpler use cases or projects with stricter performance requirements.

This is a UI lib for Android. Effects like shining.

Pros of ShineButton

  • More customizable with options for shine color, shine count, and shine turn angle
  • Supports both Java and Kotlin
  • Includes additional button shapes like heart and star

Cons of ShineButton

  • Less actively maintained (last update in 2018)
  • Fewer stars and forks on GitHub, indicating potentially less community support
  • Documentation is not as comprehensive as SparkButton

Code Comparison

SparkButton:

SparkButton sparkButton = findViewById(R.id.spark_button);
sparkButton.setChecked(true);
sparkButton.setAnimationSpeed(1.5f);

ShineButton:

ShineButton shineButton = findViewById(R.id.shine_button);
shineButton.init(activity);
shineButton.setShineCount(8);
shineButton.setAllowRandomColor(true);
shineButton.setShineDistanceMultiple(1.5f);

Both libraries offer similar functionality for creating animated buttons, but ShineButton provides more customization options in its API. SparkButton focuses on a specific spark animation, while ShineButton allows for various shine effects and button shapes. SparkButton has more recent updates and a larger community, potentially indicating better long-term support and maintenance.

1,573

:heart: Floating Action Button for iOS

Pros of Floaty

  • More customizable with options for button image, size, and animations
  • Supports multiple floating action buttons in a single view
  • Actively maintained with recent updates and Swift support

Cons of Floaty

  • Larger codebase and potentially more complex implementation
  • May have a steeper learning curve for beginners
  • Less focused on specific animation effects compared to SparkButton

Code Comparison

SparkButton:

let sparkButton = SparkButton()
sparkButton.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
sparkButton.particleImage = UIImage(named: "spark")
sparkButton.particleScale = 0.05
sparkButton.particleCount = 5

Floaty:

let floaty = Floaty()
floaty.addItem("Hello", icon: UIImage(named: "icon"))
floaty.paddingX = 16
floaty.paddingY = 16
floaty.itemSpace = 14

Both libraries offer easy-to-use implementations for adding interactive buttons to iOS apps. SparkButton focuses on creating eye-catching spark animations, while Floaty provides a more versatile floating action button with multiple customization options. The choice between the two depends on the specific requirements of your project and the desired visual effects.

Circle button widget for Android

Pros of android-circlebutton

  • Simpler implementation focused solely on circular button functionality
  • Lightweight with minimal dependencies
  • Easier to customize and extend for basic circular button needs

Cons of android-circlebutton

  • Limited animation options compared to SparkButton's particle effects
  • Lacks built-in like/unlike functionality
  • Less active development and community support

Code Comparison

SparkButton:

SparkButton sparkButton = findViewById(R.id.spark_button);
sparkButton.setChecked(true);
sparkButton.setAnimationSpeed(1.5f);
sparkButton.setParticleCount(20);
sparkButton.playAnimation();

android-circlebutton:

CircleButton circleButton = findViewById(R.id.circle_button);
circleButton.setColor(Color.BLUE);
circleButton.setImageResource(R.drawable.ic_action);
circleButton.setOnClickListener(new View.OnClickListener() {
    // Handle click event
});

Summary

SparkButton offers more advanced features like particle animations and built-in like/unlike functionality, making it suitable for social media-style applications. android-circlebutton, on the other hand, provides a simpler circular button implementation with basic customization options. SparkButton has more active development and community support, while android-circlebutton is lightweight and easier to integrate for basic circular button needs.

一个可以用代码设置selector背景(按下去背景颜色更改,样式变化等等)的button, 再也不用写selector了

Pros of StateButton

  • Supports multiple states (not just on/off)
  • Customizable appearance for each state
  • Lightweight and simple implementation

Cons of StateButton

  • Less animation options compared to SparkButton
  • Fewer stars and community contributions
  • Limited documentation and examples

Code Comparison

SparkButton:

SparkButton sparkButton = (SparkButton) findViewById(R.id.spark_button);
sparkButton.setChecked(true);
sparkButton.setAnimationSpeed(1.5f);
sparkButton.playAnimation();

StateButton:

StateButton stateButton = (StateButton) findViewById(R.id.state_button);
stateButton.setState(StateButton.STATE_LOADING);
stateButton.setRadius(20);
stateButton.setStateTextColor(Color.WHITE);

Both libraries offer custom button implementations for Android, but they serve different purposes. SparkButton focuses on animated like/favorite buttons with particle effects, while StateButton provides a more versatile multi-state button with customizable appearances. SparkButton has more stars and contributors, indicating a larger community. However, StateButton offers more flexibility in terms of button states and customization options. The choice between the two depends on the specific requirements of your project, such as the need for animations versus multiple states.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

platform API License Android Arsenal Build Status

SparkButton

Highly customizable and lightweight library that allows you to create a button with animation effect similar to Twitter's heart animation.

Library supports OS on API 14 and above.

Showcase Video

Grab the above demo app from here :

Get it on Google Play

Dependency

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

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

and then add dependency

dependencies {
	compile 'com.github.varunest:sparkbutton:1.0.6'
}

Usage

XML

<com.varunest.sparkbutton.SparkButton
            android:id="@+id/spark_button"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:sparkbutton_activeImage="@drawable/active_image"
            app:sparkbutton_inActiveImage="@drawable/inactive_image"
            app:sparkbutton_iconSize="40dp"
            app:sparkbutton_primaryColor="@color/primary_color"
            app:sparkbutton_secondaryColor="@color/secondary_color" />

Java

SparkButton button  = new SparkButtonBuilder(context)
                .setActiveImage(R.drawable.active_image)
                .setInActiveImage(R.drawable.inactive_image)
                .setDisabledImage(R.drawable.disabled_image)
                .setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
                .setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
                .setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
                .build();

Attributes

<attr name="sparkbutton_iconSize" format="dimension|reference" />
<attr name="sparkbutton_activeImage" format="reference" />
<attr name="sparkbutton_disabledImage" format="reference" />
<attr name="sparkbutton_primaryColor" format="reference" />
<attr name="sparkbutton_secondaryColor" format="reference" />
<attr name="sparkbutton_pressOnTouch" format="boolean" />
<attr name="sparkbutton_animationSpeed" format="float" />

Documentation

To use SparkButton simply include XML script or build it using SparkButtonBuilder as stated above.

Various attributes that you can control are following:

Button Image and Colors

You can specify both active and inactive image of the button. If only active image is specified SparkButton will behave as a normal button, otherwise as a switch.

SparkButton takes two colors primary and secondary. (It is recommended that primary color is lighter than secondary for better results).

XML

app:sparkbutton_activeImage="@drawable/active_image"
app:sparkbutton_inActiveImage="@drawable/inactive_image"
app:sparkbutton_primaryColor="@color/primaryColor"
app:sparkbutton_secondaryColor="@color/secondaryColor"

Java

SparkButton button = new SparkButtonBuilder(context)
						.setActiveImage(R.drawable.active_image)
						.setInActiveImage(R.drawable.inactive_image)
						.setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
						.setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
						.build();

Animation Speed

You can specify the fraction by which the animation speed should increase/decrease.

XML

app:sparkbutton_animationSpeed="1.5"

Java

sparkbutton.setAnimationSpeed(1.5f);

Button State

If you are using the SparkButton as a switch, you can check/uncheck the button

sparkButton.setChecked(true);

Event Listener

Simply call setEventListener to listen click events.

sparkButton.setEventListener(new SparkEventListener(){
		@Override
		void onEvent(ImageView button, boolean buttonState) {
			if (buttonState) {
				// Button is active
			} else {
				// Button is inactive
			}
		}
});

Play Animation

If you want to play animation regardless of click event execute following function:

sparkButton.playAnimation();

Advanced

  • There can be a situation when you don't want the button to scale download when pressed or consume touch. You can avoid this by calling the following function :

    sparkButton.pressOnTouch(false);
    
  • If you are using SparkButton between layout hierarchy, it can result in animation getting cropped. To avoid this cropping of the animation, set clipChildren and clipToPadding XML attribute of all the parent views to false.

  • You can view examples of few custom buttons in the sample app.

Inspiration

SparkButton was inspired by : https://github.com/frogermcs/LikeAnimation

Contribution

Any contributions, large or small, features, bug fixes are welcomed and appreciated. Use pull requests, they will be thoroughly reviewed and discussed.

Link Backs

If you are using this library in one of your projects and want it to be mentioned here in this ReadME, drop me a mail with project's url at mailvarunest@gmail.com.

License

Library falls under [Apache 2.0] (LICENSE.md)