TextSwitcher in Kotlin
Android TextSwitcher is a user interface widget that contains a number of textView and displays one at a time. Textswitcher is a subclass of View Switcher which is used to animate one text and display the next one. Generally, we use TextSwitcher in two ways manually in XML layout and programmatically in Kotlin file. We should define an XML component, to use TextSwitcher in our android application.
XML
< TextSwitcher android:id = "@+id/imgSw" android:layout_width = "match_parent" android:layout_height = "250dp" > </ 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 the next button.
- Then select the Empty activity => next => finish.
Different attributes of the TextSwitcher 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 the view is shown. |
android:outAnimation | Used to define the animation to use when the 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 the TextSwitcher, and Buttons and also set their attributes.
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" > < TextSwitcher android:id = "@+id/textSwitcher" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginLeft = "32dp" android:layout_marginTop = "32dp" android:layout_marginRight = "32dp" app:layout_constraintLeft_toLeftOf = "parent" app:layout_constraintRight_toRightOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> < Button android:id = "@+id/prev" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginStart = "32dp" android:layout_marginTop = "128dp" android:text = "@string/prev" app:layout_constraintRight_toLeftOf = "@id/next" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toBottomOf = "@+id/textSwitcher" /> < Button android:id = "@+id/next" android:layout_width = "wrap_content" android:layout_height = "wrap_content" 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_toBottomOf = "@id/textSwitcher" app:layout_constraintTop_toTopOf = "@+id/prev" /> </ 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" >TextSwitcherInKotlin</ string > < string name = "next" >Next</ string > < string name = "prev" >Prev</ string > </ resources > |
Access TextSwitcher in MainActivity.kt file
First, we declare an array languages which contains the list of languages used for the textView.
private val textList = arrayOf("Java","Python","Kotlin","Scala","C++")
then, we access the TextSwitcher from the XML layout and set attributes like text color, text Size.
val textSwitcher = findViewById<TextSwitcher>(R.id.textSwitcher)
Kotlin
package com.w3wiki.myfirstkotlinapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.Gravity import android.view.animation.AnimationUtils import android.widget.Button import android.widget.TextSwitcher import android.widget.TextView import android.graphics.Color class MainActivity : AppCompatActivity() { private val languages = arrayOf( "Java" , "Python" , "Kotlin" , "Scala" , "C++" ) private var index = 0 override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // accessing the TextSwitcher from XML layout val textSwitcher = findViewById<TextSwitcher>(R.id.textSwitcher) textSwitcher.setFactory { val textView = TextView( this @MainActivity ) textView.gravity = Gravity.TOP or Gravity.CENTER_HORIZONTAL textView.textSize = 32f textView.setTextColor(Color.BLUE) textView } textSwitcher.setText(languages[index]) val textIn = AnimationUtils.loadAnimation( this , android.R.anim.slide_in_left) textSwitcher.inAnimation = textIn val textOut = AnimationUtils.loadAnimation( this , android.R.anim.slide_out_right) textSwitcher.outAnimation = textOut // previous button functionality val prev = findViewById<Button>(R.id.prev) prev.setOnClickListener { index = if (index - 1 >= 0 ) index - 1 else 4 textSwitcher.setText(languages[index]) } // next button functionality val button = findViewById<Button>(R.id.next) button.setOnClickListener { index = if (index + 1 < languages.size) index + 1 else 0 textSwitcher.setText(languages[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 the next button then we obtain the other text in the TextView.