KenburnsView In Android Using Kotlin

Introduction

In this article, we will learn how to use KenburnsView in Android using Kotlin. KenburnsView is an awesome Android library that provides an extension to ImageView that creates an immersive experience by animating its Drawable using the Ken Burns Effect.

Coding Part

I have divided the coding part into 3 steps as shown in the following.

Creating a new project with Kotlin support.
Setting up the project with KenburnsView Library.
Implementing KenburnsView with Kotlin.

Step 1 - Creating a new project with Kotlin

Open Android Studio and create a new project.
Name the project as your wish and tick the Kotlin checkbox support.
Then, select your Activity type (For Example, Navigation Drawer Activity, Empty Activity, etc.).
Then, click the “Finish” button to create a new project in Android Studio.

Step 2 - Setting up the project with AndroidManifest

We will add the following lines to our app level build.gradle to add KenburnsView library to the project.

dependencies {
…
implementation 'com.flaviofaria:kenburnsview:1.0.7'
…
}
repositories {
mavenCentral()
}

Step 3 - Implementation of KenburnsView with Kotlin

Let us start coding. Open your layout file. In my case, I have an XML included, i.e., content_main.xml. So, I have opened the content_main.xml file.
Add the following lines of code into it.
1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. xmlns:tools="http://schemas.android.com/tools"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. app:layout_behavior="@string/appbar_scrolling_view_behavior"
8. tools:context="com.androidmads.kenburnsview.MainActivity"
9. tools:showIn="@layout/activity_main">
11. <com.flaviofaria.kenburnsview.KenBurnsView
12. xmlns:android="http://schemas.android.com/apk/res/android"
13. android:id="@+id/img"
14. android:layout_width="match_parent"
15. android:layout_height="match_parent"
16. android:src="@drawable/img1" />
18. </android.support.constraint.ConstraintLayout>

Then, open your Java file and Initialize the KenburnsView Library as shown in the following.
1. var mImg: KenBurnsView? = null
2. mImg = findViewById(R.id.img)

We can pause, resume, and stop the Ken Burns Effect by the library itself using the following snippets respectively.
1. mImg!!.pause()
2. mImg!!.resume()
3. mImg!!.stop()

We can perform our defined operations based on the transitions of KenburnsView using the following snippets.
1. mImg!!.setTransitionListener(object : KenBurnsView.TransitionListener {
2. override fun onTransitionStart(transition: Transition) {
4. }
6. override fun onTransitionEnd(transition: Transition) {
7. if (imageId == R.drawable.img1) {
8. imageId = R.drawable.img2
9. mImg!!.setImageResource(R.drawable.img2)
10. } else {
11. imageId = R.drawable.img1
12. mImg!!.setImageResource(R.drawable.img1)
13. }
14. }
15. })

Here, I have changed the image source to KenburnsView, when each image transition ends.

Full Code of MainActivity

You can find the full code implementation of MainActivty.kt in the following snippet.
1. class MainActivity : AppCompatActivity() {
3. private var mImg: KenBurnsView? = null
4. private var fab: FloatingActionButton? = null
5. private var isPlaying = true
6. private var imageId: Int = 0
8. override fun onCreate(savedInstanceState: Bundle?) {
9. super.onCreate(savedInstanceState)
10. setContentView(R.layout.activity_main)
12. imageId = R.drawable.img1
14. fab = findViewById(R.id.fab)
15. mImg = findViewById(R.id.img)
17. fab!!.setOnClickListener {
18. if (isPlaying) {
19. mImg!!.pause()
20. fab!!.setImageResource(R.drawable.ic_play)
21. } else {
22. mImg!!.resume()
23. fab!!.setImageResource(R.drawable.ic_pause)
24. }
25. isPlaying = !isPlaying
26. }
28. mImg!!.setTransitionListener(object : KenBurnsView.TransitionListener {
29. override fun onTransitionStart(transition: Transition) {
31. }
33. override fun onTransitionEnd(transition: Transition) {
34. if (imageId == R.drawable.img1) {
35. imageId = R.drawable.img2
36. mImg!!.setImageResource(R.drawable.img2)
37. } else {
38. imageId = R.drawable.img1
39. mImg!!.setImageResource(R.drawable.img1)
40. }
41. }
42. })
43. }
44. }

Download Code

You can download the sample code from the following GitHub link.