Dynamic ImageSwitcher in Kotlin
Android ImageSwitcher is a user interface widget that provides a smooth transition animation effect to the images while switching between them to display in the view.
ImageSwitcher is subclass of View Switcher which is used to animates one image and displays next one.
Here, we create ImageSwitcher programmatically in Kotlin file.
First we create a new project by following the below steps:
- Click on File, then New => New Project.
- After that include the Kotlin support and click on next.
- Select the minimum SDK as per convenience and click next button.
- Then select the Empty activity => next => finish.
Modify activity_main.xml file
In this file, we use constraint layout with ImageSwitcher and Buttons.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < androidx.constraintlayout.widget.ConstraintLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" xmlns:tools = "http://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" android:id = "@+id/constraint_layout" > < Button android:id = "@+id/prev" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginStart = "32dp" android:layout_marginTop = "250dp" android:layout_marginEnd = "32dp" android:text = "@string/prev" app:layout_constraintEnd_toStartOf = "@+id/next" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> < Button android:id = "@+id/next" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginStart = "32dp" android:layout_marginTop = "250dp" android:layout_marginEnd = "32dp" android:text = "@string/next" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintHorizontal_bias = "1.0" app:layout_constraintStart_toEndOf = "@+id/prev" app:layout_constraintTop_toTopOf = "parent" /> </ androidx.constraintlayout.widget.ConstraintLayout > |
Update strings.xml file
Here, we update the name of the application using the string tag.
XML
< resources > < string name = "app_name" >ImageSwitcherInKotlin</ string > < string name = "next" >Next</ string > < string name = "prev" >Prev</ string > </ resources > |
Different methods of ImageSwitcher widget
Methods | Description |
---|---|
setImageDrawable | It is used to set a new drawable on the next ImageView in the switcher. |
setImageResource | It is used to set a new image on the ImageSwitcher with the given resource id. |
setImageURI | It is used to set a new image on the ImageSwitcher with the given URI. |
Create ImageSwitcher in MainActivity.kt file
First, we declare an array flowers which contains the resource of the images used for the ImageView.
private val flowers = intArrayOf(R.drawable.flower1, R.drawable.flower2, R.drawable.flower4)
then, we create the ImageSwitcher in the MainActivity.kt file and set ImageView to display the image.
val imgSwitcher = ImageSwitcher(this) imgSwitcher?.setFactory({ val imgView = ImageView(applicationContext) imgView.scaleType = ImageView.ScaleType.FIT_CENTER imgView.setPadding(8, 8, 8, 8) imgView })
Also, we should add the ImageSwitcher to the layout using.
val c_Layout = findViewById(R.id.constraint_layout) //add ImageSwitcher in constraint layout c_Layout?.addView(imgSwitcher)
Kotlin
package com.w3wiki.myfirstkotlinapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.animation.AnimationUtils import android.widget.Button import android.widget.ImageSwitcher import android.widget.ImageView import androidx.constraintlayout.widget.ConstraintLayout class MainActivity : AppCompatActivity() { private val flowers = intArrayOf(R.drawable.flower1, R.drawable.flower2, R.drawable.flower4) private var index = 0 override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // create the ImageSwitcher val imgSwitcher = ImageSwitcher( this ) imgSwitcher?.setFactory({ val imgView = ImageView(applicationContext) imgView.scaleType = ImageView.ScaleType.FIT_CENTER imgView.setPadding( 20 , 20 , 20 , 20 ) imgView }) val c_Layout = findViewById<ConstraintLayout>(R.id.constraint_layout) //add ImageSwitcher in constraint layout c_Layout?.addView(imgSwitcher) // set the method and pass array as a parameter imgSwitcher?.setImageResource(flowers[index]) val imgIn = AnimationUtils.loadAnimation( this , android.R.anim.slide_in_left) imgSwitcher?.inAnimation = imgIn val imgOut = AnimationUtils.loadAnimation( this , android.R.anim.slide_out_right) imgSwitcher?.outAnimation = imgOut // previous button functionality val prev = findViewById<Button>(R.id.prev) prev.setOnClickListener { index = if (index - 1 >= 0 ) index - 1 else 1 imgSwitcher?.setImageResource(flowers[index]) } // next button functionality val next = findViewById<Button>(R.id.next) next.setOnClickListener { index = if (index + 1 < flowers.size) index + 1 else 0 imgSwitcher?.setImageResource(flowers[index]) } } } |
AndroidManifest.xml file
XML
<? xml version = "1.0" encoding = "utf-8" ?> < manifest xmlns:android = "http://schemas.android.com/apk/res/android" package = "com.w3wiki.myfirstkotlinapp" > < application android:allowBackup = "true" android:icon = "@mipmap/ic_launcher" android:label = "@string/app_name" android:roundIcon = "@mipmap/ic_launcher_round" android:supportsRtl = "true" android:theme = "@style/AppTheme" > < activity android:name = ".MainActivity" > < intent-filter > < action android:name = "android.intent.action.MAIN" /> < category android:name = "android.intent.category.LAUNCHER" /> </ intent-filter > </ activity > </ application > </ manifest > |
Run as Emulator:
Click next button then we get the other animated image in the View.
Contact Us