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.
Generally, we use ImageSwitcher in two ways manually in XML layout and programmatically in Kotlin file.
We should define an XML component, to use ImageSwitcher in our android application.
< ImageSwitcher android:id = "@+id/imgSw"
android:layout_width = "match_parent"
android:layout_height = "match_parent" >
</ ImageSwitcher >
|
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.
Different attributes of ImageSwitcher widget
XML attributes | Description |
---|---|
android:id | Used to specify the id of the view. |
android:onClick | Used to specify the action when this view is clicked. |
android:background | Used to set the background of the view. |
android:padding | Used to set the padding of the view. |
android:visibility | Used to set the visibility of the view. |
android:inAnimation | Used to define the animation to use when view is shown. |
android:outAnimation | Used to define the animation to use when view is hidden. |
android:animateFirstView | Used to define whether to animate the current view when the view animation is first displayed. |
Modify activity_main.xml file
In this file, we use constraint layout with ImageSwitcher and Buttons.
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.constraintlayout.widget.ConstraintLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:id = "@+id/constraint_layout" >
< ImageSwitcher
android:id = "@+id/imgSw"
android:layout_width = "match_parent"
android:layout_height = "250dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginBottom = "36dp"
app:layout_constraintBottom_toTopOf = "@+id/prev"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
< Button
android:id = "@+id/prev"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "36dp"
android:layout_marginTop = "36dp"
android:text = "@string/prev"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/imgSw" />
< Button
android:id = "@+id/next"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "36dp"
android:layout_marginEnd = "36dp"
android:text = "@string/next"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "1.0"
app:layout_constraintStart_toEndOf = "@+id/prev"
app:layout_constraintTop_toBottomOf = "@+id/imgSw" />
</ androidx.constraintlayout.widget.ConstraintLayout >
|
Update strings.xml file
Here, we update the name of the application using the string tag.
< 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. |
Access 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 access the ImageSwitcher from the XML layout and set ImageView to display the image.
val imgSwitcher = findViewById<ImageSwitcher>(R.id.imgSw) imgSwitcher?.setFactory({ val imgView = ImageView(applicationContext) imgView.scaleType = ImageView.ScaleType.FIT_CENTER imgView.setPadding(8, 8, 8, 8) imgView })
Also, we will use one of the above method for ImageSwitcher.
imgSwitcher?.setImageResource(flowers[index])
package com.geeksforgeeks.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
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)
// access the ImageSwitcher
val imgSwitcher = findViewById<ImageSwitcher>(R.id.imgSw)
imgSwitcher?.setFactory({
val imgView = ImageView(applicationContext)
imgView.scaleType = ImageView.ScaleType.FIT_CENTER
imgView.setPadding( 8 , 8 , 8 , 8 )
imgView
})
// 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 2
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 version = "1.0" encoding = "utf-8" ?>
package = "com.geeksforgeeks.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.