Simple animation for floating action button in android?

Question

I need a very simple explanation of how I can animate this 'add to cart' FloatingActionButton whenever it's clicked. All I want is a smooth 'left-right' or 'down-up' movement animation.

Please look at the code below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="1"
    android:background="@color/cardview_light_background">    

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:layout_gravity="bottom|right"
            android:src="@mipmap/ic_add_shopping_cart_black_24dp"
            android:layout_marginBottom="40dp"
            android:layout_marginRight="30dp"
            app:backgroundTint="@android:color/holo_blue_light" />

    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

Thank you in advance!

Solution 1

Try AndroidViewAnimations library. This library provide easy way to animate you views. There is lot of effects. For example

YoYo.with(Techniques.Tada)
.duration(700)
.playOn(findViewById(R.id.edit_area));

Solution 2

floatingActionButton.animate().xBy(10).yBy(10);

On its onClick! give coordinates as you want!

or

shake.xml > res/anim/shake.xml (no extra library need you can customize this xml)

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="150"
        android:fromXDelta="-10%"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:toXDelta="10%"/>
</set>

..

final FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Animation anim = android.view.animation.AnimationUtils.loadAnimation(floatingActionButton.getContext(),  R.anim.shake);
        anim.setDuration(200L);
        floatingActionButton.startAnimation(anim);
    }
});

Solution 3

Take a look at this:

https://github.com/Scalified/fab

It has a left to right or top to bottom Moving animation

In your gradle:

    dependencies {
    compile 'com.scalified:fab:1.1.3'
}

in layout:

    <RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <com.scalified.fab.ActionButton 
            android:id="@+id/action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" 
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            />
</RelativeLayout>

Now for moving use:

 // And then find it within the content view:
ActionButton actionButton = (ActionButton) findViewById(R.id.action_button);
// Initialize the moving distance
int distance = 100.0f // in density-independent pixels

// Move ActionButton left
actionButton.moveLeft(distance);

// Move ActionButton up
actionButton.moveUp(distance);

// Move ActionButton right
actionButton.moveRight(distance);

// Move ActionButton down
actionButton.moveDown(distance);

Comments

[Muhammad Safi]

Thanks! This seems like a more straightforward solution

[Ruslan altukhov]

@Irtaza Safi it seems to me that you can add your fab into the layout (for example linear layout) and also put them view you want to display there. Then you can set android:layout_gravity="bottom|right" to this layout

[Charuක]

@Irtaza Safi I dont like 2 use libraries for a simple thing like this,but answers with libraries gets accepted quickly :| ,any way my one is simple if you like feel free to use it ^_^ good luck

[Muhammad Safi]

I agree. It's just that when you're a noob in an area the library answers seem more straightforward. Your answer definitely helps me understand how it works in the background.

[Gene Bo]

API looks cool. Using the library to animate, when I reference a View for android.support.design.widget.FloatingActionButton - using data binding YoYo.with(Techniques.Pulse).duration(700).playOn(mBinding.fl‌​oatingActionButton); - the xml settings there (like alpha, scaleX, etc) are being lost. One hack to resolve this is to update the xml back to it's defined settings in Java via new Handler().postDelayed(new Runnable() { .. }, 700); .. where delay allows duration to complete .. but still, for things like scaleX, where they get reset .. the "animation smoothness" is getting lost