Post
Ask Question

KenburnsView In Android Using Kotlin

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

  1. Open Android Studio and create a new project.
  2. Name the project as your wish and tick the Kotlin checkbox support.
  3. Then, select your Activity type (For Example, Navigation Drawer Activity, Empty Activity, etc.).

    KenburnsView in Android using Kotlin

  4. 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.

  1. dependencies {   
  2.     …  
  3.     implementation 'com.flaviofaria:kenburnsview:1.0.7'  
  4.     …  
  5. }  
  6. repositories {  
  7.     mavenCentral()  
  8. }  

Step 3 - Implementation of KenburnsView with Kotlin

  1. 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.

  2. 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">  
    10.   
    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" />  
    17.   
    18. </android.support.constraint.ConstraintLayout>  
  1. 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)  
  1. 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()  
  1. 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) {  
    3.   
    4.             }  
    5.   
    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.         })  
  1. 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() {  
    2.   
    3.     private var mImg: KenBurnsView? = null  
    4.     private var fab: FloatingActionButton? = null  
    5.     private var isPlaying = true  
    6.     private var imageId: Int = 0  
    7.   
    8.     override fun onCreate(savedInstanceState: Bundle?) {  
    9.         super.onCreate(savedInstanceState)  
    10.         setContentView(R.layout.activity_main)  
    11.   
    12.         imageId = R.drawable.img1  
    13.   
    14.         fab = findViewById(R.id.fab)  
    15.         mImg = findViewById(R.id.img)  
    16.   
    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.         }  
    27.   
    28.         mImg!!.setTransitionListener(object : KenBurnsView.TransitionListener {  
    29.             override fun onTransitionStart(transition: Transition) {  
    30.   
    31.             }  
    32.   
    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.


Similar Articles