Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android databinding and animation

Tags:

java

android

mvvm

Can someone point me in the direction of how to trigger an animation when using databinding?

I've got an icon which changes according to data in my viewmodel. How do I animate icon change when the viewmodel changes (that is, when a property changes in the viewmodel)?

like image 626
Morten Due Christiansen Avatar asked Dec 28 '15 10:12

Morten Due Christiansen


People also ask

What is the use of databinding in Android?

Data Binding Library Part of Android Jetpack. The Data Binding Library is a support library that allows you to bind UI components in your layouts to data sources in your app using a declarative format rather than programmatically.

Is data binding good in Android?

Using data binding can lead to faster development times, faster execution times and more readable and maintained code. Android data binding generates binding classes at compile time for layouts.

What are the two different types of view animation?

There are two types of animations that you can do with the view animation framework: Tween animation: Creates an animation by performing a series of transformations on a single image with an Animation. Frame animation: or creates an animation by showing a sequence of images in order with an AnimationDrawable .

What is Tweened animation in Android?

Tween Animation takes some parameters such as start value , end value, size , time duration , rotation angle e.t.c and perform the required animation on that object. It can be applied to any type of object. So in order to use this , android has provided us a class called Animation.


1 Answers

One possible solution is to use a binding adapter. Here's a quick sample to show you the way to go:

First we define a custom binding adapter:

import android.databinding.BindingAdapter;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Interpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;

public class ViewBusyBindings {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();

    @BindingAdapter("isBusy")
    public static void setIsBusy(View view, boolean isBusy) {
        Animation animation = view.getAnimation();
        if (isBusy && animation == null) {
            view.startAnimation(createAnimation());
        } else if (animation != null) {
            animation.cancel();
            view.setAnimation(null);
        }
    }

    private static Animation createAnimation() {
        RotateAnimation anim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        anim.setInterpolator(INTERPOLATOR);
        anim.setDuration(1400);
        anim.setRepeatCount(TranslateAnimation.INFINITE);
        anim.setRepeatMode(TranslateAnimation.RESTART);
        return anim;

    }
}

The example layout will look like this:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="vm"
            type="de.example.exampleviewmodel"/>
    </data>

    <FrameLayout 
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 >
        <ImageButton
            android:id="@+id/btnPlay"
            style="?attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:src="@drawable/ic_play_circle_filled_white_36dp"
            app:isBusy="@{vm.isBusy}"/>

    </FrameLayout>
</layout>

As you can see, the 'isBusy' property of your viemodel is bound to the view (imagebutton). You can use this adapter at any view not only at a imagebutton.

Of course, the 'isBusy' property must be bindable (e.g. your viewmodel extends BaseObservable or as a minimum it's a ObservableBoolean).

So whenever you change the 'isBusy' property to true it will trigger the animation to start. Set it to false, it stops.

Hope this helps ?

like image 180
Andre Classen Avatar answered Oct 20 '22 07:10

Andre Classen