ChadCSong/ShineButton

ShineButton

A lightweight, customizable Android UI library that adds a "shining" effect to buttons, similar to Twitter's heart animation.

Features

• Customizable Shapes: Use any PNG mask as a button shape.
• Vibrant Effects: Adjust shine color, size, count, and distance.
• Interactive: Smooth animations for both clicking and shining.
• Random Colors: Option to enable random colors for the shine effect.
• Dialog Support: Works seamlessly inside Dialogs.
• Lightweight: Minimal dependencies and easy to integrate.

Installation

JitPack (Recommended for latest version)

1. Add the JitPack repository to your root build.gradle file:

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

2. Add the dependency to your app/build.gradle file:

dependencies {
    implementation 'com.github.ChadCSong:ShineButton:v2.0.0'
}

Gradle (Maven Central)

Add the dependency to your app/build.gradle file:

dependencies {
    implementation 'com.sackcentury:shinebutton:2.0.0'
}

Maven

<dependency>
  <groupId>com.sackcentury</groupId>
  <artifactId>shinebutton</artifactId>
  <version>2.0.0</version>
  <type>aar</type>
</dependency>

Usage

XML Layout

The simplest way to use ShineButton is in your XML layout:

<com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/shine_button"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_centerInParent="true"
    android:src="@android:color/darker_gray"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="#FF6666"
    app:allow_random_color="false"
    app:siShape="@raw/like" />

Java Implementation

ShineButton shineButton = (ShineButton) findViewById(R.id.shine_button);
shineButton.init(activity);

Jetpack Compose Implementation

ShineButton now supports Jetpack Compose natively!

var isChecked by remember { mutableStateOf(false) }

ShineButtonCompose(
    isChecked = isChecked,
    onCheckedChange = { isChecked = it },
    shape = Icons.Default.Favorite, // Use any ImageVector
    btnColor = Color.LightGray,
    btnFillColor = Color.Red,
    shineColor = Color.Red,
    shineSize = 50.dp,
    allowRandomColor = true
)

Or create it dynamically:

ShineButton shineButtonJava = new ShineButton(this);
shineButtonJava.setBtnColor(Color.GRAY);
shineButtonJava.setBtnFillColor(Color.RED);
shineButtonJava.setShapeResource(R.raw.heart);
shineButtonJava.setAllowRandomColor(true);

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(100, 100);
shineButtonJava.setLayoutParams(layoutParams);
linearLayout.addView(shineButtonJava);

Dialog Support

If you are using ShineButton inside a Dialog, call setFixDialog(dialog) to ensure it renders correctly:

shineButton.setFixDialog(dialog);

Attributes

Preview

Roadmap

We are continuously working to improve ShineButton. Here is what we have planned:

• Kotlin Migration: Fully convert the library to Kotlin for better safety and modern features.
• Jetpack Compose: Provide a native Composable version of ShineButton.
• Vector Support: Allow using VectorDrawable as shape masks.
• Custom Animators: Support for custom easing and path-based animations.
• Material 3: Update the demo app with Material 3 design and dynamic colors.
• Performance: Further optimize canvas operations and memory allocation.

Requirements

• Android API Level 14+ (Android 4.0+)

Credits

• Inspired by fave-button for iOS.
• Uses EasingInterpolator for smooth animations.
• Concepts from android-shape-imageview.

Third Party Bindings

React Native

You may now use this library with React Native via the module here

NativeScript

You may also use this library with NativeScript via the plugin here

License

MIT License. See LICENSE for details.