Animation Button like Whatsapp in Android

In some of the popular chat applications like whatsapp or hangouts, there is a button which can be transformed into a record button and also when you enter some text it will transform into a send button.

AnimButton is a custom ImageButton which is imitating the whatsapp’s send button behavior. Basically, it will change the image source when you enter some text on the edittext and it will go back when you clear the edittext

In this post I will try to mimic this behavior in my AnimButton project. Also, the full source code of the project can be found on the Github.

I want to introduce the AnimButton.java class to you:

	package com.gunhansancar.android.animbutton;

	import android.animation.ValueAnimator;
	import android.content.Context;
	import android.content.res.Resources;
	import android.content.res.TypedArray;
	import android.graphics.drawable.Drawable;
	import android.graphics.drawable.InsetDrawable;
	import android.graphics.drawable.LayerDrawable;
	import android.util.AttributeSet;
	import android.view.animation.AccelerateDecelerateInterpolator;
	import android.view.animation.Interpolator;
	import android.widget.ImageButton;

	/**
	* Created by Günhan on 17.08.2015.
	*/
	public class AnimButton extends ImageButton {
	private static final Interpolator interpolator = new AccelerateDecelerateInterpolator();

	public static final int FIRST_STATE = 1;
	public static final int SECOND_STATE = 2;

	private Drawable firstDrawable;
	private Drawable secondDrawable;

	private int state = FIRST_STATE;
	private int total = 100;
	private int duration = 200;
	private boolean init = false;

	public AnimButton(Context context) {
	super(context);
	}

	public AnimButton(Context context, AttributeSet attrs) {
	super(context, attrs);
	init(context, attrs);
	}

	public AnimButton(Context context, AttributeSet attrs, int defStyleAttr) {
	super(context, attrs, defStyleAttr);
	init(context, attrs);
	}

	private void init(Context context, AttributeSet attrs) {
	TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.AnimButton, 0, 0);

	int first = array.getResourceId(R.styleable.AnimButton_first, -1);
	int second = array.getResourceId(R.styleable.AnimButton_second, -1);
	duration = array.getInteger(R.styleable.AnimButton_duration, duration);

	if (array != null) {
	array.recycle();
	}

	if (first > 0 && second > 0) {
	init = true;

	Resources resources = context.getResources();
	firstDrawable = resources.getDrawable(first);
	secondDrawable = resources.getDrawable(second);

	setImageDrawable(firstDrawable);
	}
	}

	public void goToState(int state) {
	if (!init \|\| this.state == state) return;

	switch (state) {
	case FIRST_STATE:
	animate(firstDrawable, secondDrawable);
	break;
	case SECOND_STATE:
	animate(secondDrawable, firstDrawable);
	break;
	}

	this.state = state;
	}

	private Drawable makeInsetDrawable(Drawable drawable, int inset) {
	return new InsetDrawable(drawable, inset, inset, inset, inset);
	}

	private void animate(final Drawable from, final Drawable to) {
	ValueAnimator animator = ValueAnimator.ofInt(0, total);
	animator.setDuration(duration);
	animator.setInterpolator(interpolator);

	animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
	public void onAnimationUpdate(ValueAnimator animation) {
	Integer value = (Integer) animation.getAnimatedValue();
	int left = total – value;

	Drawable firstInset = makeInsetDrawable(from, left);
	Drawable secondInset = makeInsetDrawable(to, value);

	LayerDrawable layer = new LayerDrawable(new Drawable[]{firstInset, secondInset});
	setImageDrawable(layer);
	}
	});

	animator.start();
	}
	}

view raw

AnimButton.java

hosted with ❤ by GitHub

To use the anim button in your layout you simple set the custom attributes of first and second drawables like so:

<com.gunhansancar.android.animbutton.AnimButton
            android:id="@+id/animButton"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:first="@drawable/ic_mic"
            app:second="@drawable/ic_send" />

And here you can see the AnimButton in action:

Anim Button – Inspired by Whatsapp

Related posts

Comments

Leave a Reply Cancel reply

Anim Button – Inspired by Whatsapp

Share this:

Related posts

Comments

Leave a Reply Cancel reply