Giter Club home page Giter Club logo

sparkbutton's Introduction

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 [email protected].

License

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

sparkbutton's People

Contributors

geoffduong avatar lfkdsk avatar ligi avatar magneticflux- avatar nikhilpanju avatar peterivitz avatar rahul-lohra avatar varunest avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sparkbutton's Issues

Primary Color Dot in the middle of icon

If the icon has a transparent center, sometimes when you unselect it a dot of color appears in the middle. The color of the dot appears to be what you set as the spark button's primary color.

normal selected:
selected normal

normal unselected:
unselected normal

unselected with dot:
screen shot 2016-08-03 at 2 59 34 pm

This doesn't happen every time a button is selected and unselected, only sometimes, I have no idea why.

Here is the xml:

<com.varunest.sparkbutton.SparkButton
        android:id="@+id/addButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/white"
        app:sparkbutton_activeImage="@drawable/ic_add_box_active_24dp"
        app:sparkbutton_inActiveImage="@drawable/ic_add_box_inactive_24dp"
        app:sparkbutton_iconSize="25dp"
        app:sparkbutton_primaryColor="#3498db"
        app:sparkbutton_secondaryColor="#f1c40f"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

Here is the java, I didn't do any logic with the button yet:

SparkButton addButton = (SparkButton) view.findViewById(R.id.addButton);
addButton.setChecked(false);

Here is the icon xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="@color/add_inactive"
        android:pathData="M19,3L5,3c-1.11,0 -2,0.9 -2,2v14c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2L21,5c0,-1.1 -0.9,-2 -2,-2zM17,13h-4v4h-2v-4L7,13v-2h4L11,7h2v4h4v2z"/>
</vector>

Fxxk

It's fxxking useless
I WILL NEVER EVER USE IT AGAIN

SparkButton selected by default

Is there any way to make it so that the button is unselected by default other than doing
sparkButton.setChecked(false);
after every instantiation of the SparkButton?

Class 'Anonymous class derived from SparkEventListener' must either be declared abstract or implement abstract method 'onEventAnimationEnd(ImageView, boolean)' in 'SparkEventListener'

sparkButton.setEventListener(new SparkEventListener(){ // <- First Error
@OverRide
void onEvent(ImageView button, boolean buttonState) {// <- Second Error
if (buttonState) {
// Button is active
} else {
// Button is inactive
}
}
});

First Error
Class 'Anonymous class derived from SparkEventListener' must either be declared abstract or implement abstract method 'onEventAnimationEnd(ImageView, boolean)' in 'SparkEventListener'

Second Error
'onEvent(ImageView, boolean)' in 'Anonymous class derived from com.varunest.sparkbutton.SparkEventListener' clashes with 'onEvent(ImageView, boolean)' in 'com.varunest.sparkbutton.SparkEventListener'; attempting to assign weaker access privileges ('package-private'); was 'public'

I don't know what to do.

AAR/JAR build request

Do you have plans for supporting a maven/jitpack build of your library? It would make including your library in other projects easier

I can open a pull request for a jitpack based build

scroll through sparkbutton will

i write code like this:

               view.findViewById(R.id.star_button1).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.i("test", "sparkbutton click");
                        ((SparkButton) v).playAnimation();
                    }
                });

then if I scroll through this sparkbutton(R.id.star_button1) while not click this sparkbutton(R.id.star_button1), then the log will be printed and animation will play. How can I print the log and play the animation only in click situation and not in scroll through situation?

No resource identifier found for attribute 'sparkbutton_inactiveImage'

Somehow, adding the app:sparkbutton_inactiveImage property in XML causes my whole project to break down. I get the above mentioned error. No amount of project cleaning and building changes it. Any known issues?

My Code :

<com.varunest.sparkbutton.SparkButton
android:id="@+id/spark_button"
android:layout_width="40dp"
android:layout_height="40dp"
app:sparkbutton_activeImage="@drawable/ic_info_black_24dp"
app:sparkbutton_inactiveImage="@drawable/ic_info_outline_white_24dp"/>

The drawables are present in my project

Disable Listener on Button

Hi!
Thank you very much for this project, it is amazing :)
I was wondering if there is any possibility to disable the original onClick listener on the button, which initiates the animation. I am trying to use the button, but only toggling it when the user clicks another view, so I do not want the animation to play when the buttonview is clicked.
Are there any way of obtaining this functionality?
I tried wrapping it in a "non clickable" relative Layout, but that did not seem to work.
Best regards

Failed to resolve: com.github.varunest:sparkbutton:1.0.5

I am getting Failed to resolve: com.github.varunest:sparkbutton:1.0.5?

     allprojects {
	    repositories {
                 google()
                 jcenter()
                 maven { url 'https://jitpack.io' }
                 maven { url 'https://maven.fabric.io/public' }
            }
	}
	dependencies {
	        implementation 'com.github.varunest:sparkbutton:1.0.5'
	}

How can use this library for Favorite

Hi, thanks for this awesome library ❤️
But i have a problem, how can i use this in favorite feature?!
I want when click this button and added into favorite list, turn on button for ever for this post. and when delete post from favorite list turn off this button !

How can i it? can you send me code?

How to add click listener?

Hi, thanks for this beautiful library, I have only one question, how to set on a click listener on the SparkButton. I try find it and set on click, however, all the animation are gone after do this. I think I am not using it properly??

Which item is selected on RecyclerView

Hello,
Firstly thank you for this library, i love it and its really simple to implement. I use this on my recyclerview but i have problem to get which sparkButton is selected or not. I'm using a textview and sparkButton in one line so i need to get that textview's text from all selected SparkButtons.

Please help me, thank you :)

Button does not properly respond when a slide occurs

The view is clicked when a touch is slid off of it, rather than simply resetting. The button should instead ignore any event that is not MotionEvent.ACTION_UP so that scrolling, lists, and other cancellations work properly.

How to use the spark button for moving to another layout aka how to resolve sparkButton.setEventListener issue?

I am gonna open & close this issue so that in the future, people can look back at this when they get stuck in the place that I was yesterday.

Fortunately, I've found a workaround so that you can use the button (sparkButton) as a button XD i.e. to move to another layout.

I've found that this same issue was filed by two people in the past, however, their explanation ( and code) was incomplete and neither helped to resolve the issue. I hope mine isn't the same and it helps you solve your problem.

Some declarations:-

  1. The ReadMe file is a tad-bit incomplete in the sense that it doesn't completely walk you through the code and some parts seemed erroneous. Maybe I'll now try to update the ReadMe as well and issue a pull request.

  2. This stuff created by @varunest is awesome and I (we're) all grateful to you man! You're awesome! :) In case you're stuck with it's implementation, just try to read the codebase. It's really readable and well written. [ It comes after I saw a lewd issue that is filed (and still open) on this SparkButton, implicating how shitty this thing is. Trust me, it's not! :) ]

I'm attaching a screenshot of my code where I implement the sparkButton as a simple button that moves to another layout on clicking. I'm also pasting my code down here for y'all lazy people like me. ✌️

I've made a new intent after the animation ends wherein it moves to another layout, and so I've omitted the if-else conditions from onClick() function inside. This is because the animation ending is equivalent to the button being clicked (as I haven't turned on alwaysAnimate as true).

//Code begins

public class MainActivity extends AppCompatActivity {
    //Make sure to import SparkButton classes
    SparkButton sparkButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sparkButton = findViewById(R.id.spark_button);
        sparkButton.setEventListener(new SparkEventListener() {
            @Override
            public void onEvent(ImageView button, boolean buttonState) {
            }
            @Override
            public void onEventAnimationEnd(ImageView button, boolean buttonState) {
                    startActivity(new Intent(MainActivity.this,NextScreen.class));
            }
            @Override
            public void onEventAnimationStart(ImageView button, boolean buttonState) {
            }
        });
    }
}

//Code ends

Snip1
Snip2
Snip3

I hope this helps! Good luck and keep on trying! 👍 :)

Java error

what is context in the java code below.............
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();

Event Listener / Click Listener didn't work

Hello, thanks for this beautiful button.

By the way, i intended to make this button when clicked, it move to another layout.

i tried to use your guidance as:
###Event Listener

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

It didn't work, instead showing error that says:

error: <anonymous com.example.android.myapplication.MainActivity$1> is not abstract and does not override abstract method onEventAnimationStart(ImageView,boolean) in SparkEventListener

error: onEvent(ImageView,boolean) in <anonymous com.example.android.myapplication.MainActivity$1> cannot implement onEvent(ImageView,boolean) in SparkEventListener attempting to assign weaker access privileges; was public

Sparks are not antialiased

I really like this library but the spark animation looks somewhat blurry. After taking a screenshot I noticed that the drawn circles are not antialiased

This is probably solved by adding setAntiAlias(true) to the used Paints.
If you want I can try to provide a pull request.

Zoomed in screenshot of animation in progress.
screenshot_20170806-094952 1

Error inflating class com.varunest.sparkbutton.SparkButton

Binary XML file line #230: Error inflating class com.varunest.sparkbutton.SparkButton

<com.varunest.sparkbutton.SparkButton android:id="@+id/star_button1" android:layout_width="25sp" android:layout_height="25sp" android:layout_marginLeft="5sp" android:layout_marginStart="5sp" app:sparkbutton_activeImage="@drawable/ic_liked" app:sparkbutton_animationSpeed=".85" app:sparkbutton_iconSize="25sp" app:sparkbutton_inActiveImage="@drawable/ic_like" />

Feature request: add shadow

It would be nice to be able to add a shadow effect on the image provided.

This is currently relevant for one of my customers apps where the background varies and thus the button can be hard to see in some cases.

Callback issue

Hello, is it available any callback method to check whether animation already ends or not?

One of Inactive/Active Image Resources are required!!

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

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.