Android - Zooming Image like Ken Burns effect

Sometimes, when you watching TV programs like documentary films, you notice that in some scenes, a photo was zooming carefully. This technology is called Ken Burns effect, it adds a smooth pan and zoom to your static photos in a video. A tilt is a sweeping shot captured up and down, a pan is a sweeping shot recorded moving from left to right. Slight movement brings images to life and adds dimension to photographs in a video. For more details, you can watch this description VIDEO (power by Wikipedia):

In Android developing, there are some external libaries allows us to make this effect. By this post, I would like to provide to my readers KenBurnsView. It is easy to use and the result was surprising:

After start a new Android project, in order to use this libary, please add dependency to app/build.gradle file:

compile 'com.flaviofaria:kenburnsview:1.0.6'

Declaring a simple activity layout with only a KenBurnsView (a subclass of ImageView):
In programmatically code, set "zooming time" through RandomTransitionGenerator. Time is measured in milliseconds. More greater time, slower "zooming speed" it is:

 AccelerateDecelerateInterpolator ACCELERATE_DECELERATE = new AccelerateDecelerateInterpolator();
 RandomTransitionGenerator generator = new RandomTransitionGenerator(5000, ACCELERATE_DECELERATE);

 kenBurnsView.setTransitionGenerator(generator); //set new transition on kenburns view

Like this libary docs say, when image pan/zoom, you can handle this process at start/end time by KenBurnsView.TransitionListener, in this example, I show a Toast to notice:

private KenBurnsView.TransitionListener onTransittionListener() {
        return new KenBurnsView.TransitionListener() {

            @Override
            public void onTransitionStart(Transition transition) {
                Toast.makeText(MainActivity.this, "start", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTransitionEnd(Transition transition) {
                Toast.makeText(MainActivity.this, "end", Toast.LENGTH_SHORT).show();
            }
        };
    }

This below line describe how to set this method to KenBurnsView:

kenBurnsView.setTransitionListener(onTransittionListener());

Over here, our work have almost completed. Therefore, this view can be pause or resume through call pause() and resume() methods. I put a Play/Pause button in ActionBar (Menu) to do this trick. Finally, this is full code for main activity with menu item event:

package devexchanges.info.kenburnview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.Toast;

import com.flaviofaria.kenburnsview.KenBurnsView;
import com.flaviofaria.kenburnsview.RandomTransitionGenerator;
import com.flaviofaria.kenburnsview.Transition;


public class MainActivity extends AppCompatActivity {

    private KenBurnsView kenBurnsView;
    private boolean isPlay = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        kenBurnsView = (KenBurnsView) findViewById(R.id.image);

        AccelerateDecelerateInterpolator ACCELERATE_DECELERATE = new AccelerateDecelerateInterpolator();
        RandomTransitionGenerator generator = new RandomTransitionGenerator(5000, ACCELERATE_DECELERATE);
        kenBurnsView.setTransitionGenerator(generator); //set new transition on kenburns view

        kenBurnsView.setTransitionListener(onTransittionListener());

    }

    private KenBurnsView.TransitionListener onTransittionListener() {
        return new KenBurnsView.TransitionListener() {

            @Override
            public void onTransitionStart(Transition transition) {
                Toast.makeText(MainActivity.this, "start", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTransitionEnd(Transition transition) {
                Toast.makeText(MainActivity.this, "end", Toast.LENGTH_SHORT).show();
            }
        };
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater=getMenuInflater();
        inflater.inflate(R.menu.menu_main, menu);

        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.play) {
            if (isPlay) {
                kenBurnsView.pause();
                item.setIcon(R.mipmap.play);
                isPlay = false;
            } else {
                kenBurnsView.resume();
                item.setIcon(R.mipmap.pause);
                isPlay = true;
            }
        }
        return super.onOptionsItemSelected(item);
    }
}

And project menu layout: Running application in a real device, we have this result: