Dynamic TextSwitcher in Android
Text Switcher is a widget in android that contains multiple text views and we can display one text at a time in it. In this article, we will take a look at How to implement a Dynamic Text Switcher in Android. A sample video is given below to get an idea about what we are going to do in this article.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--on below line we are creating our linear layout--> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:id = "@+id/idLLContainer" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_centerInParent = "true" android:layout_gravity = "center" android:gravity = "center" android:orientation = "vertical" tools:context = ".MainActivity" > </ LinearLayout > |
Step 3: Working with the MainActivity file
Navigate to app > java > your app’s package name > MainActivity file and add the code below. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject import android.graphics.Color import android.graphics.Typeface import android.os.Bundle import android.view.Gravity import android.view.ViewGroup import android.view.animation.AnimationUtils import android.widget.* import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { // on below line creating a variable. lateinit var containerLL: LinearLayout val languages = arrayOf( "Java" , "C" , "Kotlin" , "C++" ) var index = 0 override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are initializing our variables. containerLL = findViewById(R.id.idLLContainer) // on below line we are creating layout // params for text view. // and specifying width as match parent // and height as wrap content val txtLayoutParam = LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) // on below line we are creating our dynamic text view val headingTV = TextView( this ) // on below line we are setting for our text view. headingTV.text = "Dynamic Text Switcher in Android" // on below line we are updating text size. headingTV.textSize = 20f // on below line we are updating text color and font headingTV.setTextColor(resources.getColor(R.color.black)) headingTV.typeface = Typeface.DEFAULT_BOLD // on below line we are adding padding headingTV.setPadding( 20 , 20 , 20 , 20 ) // on below line we are specifying text alignment. headingTV.textAlignment = TextView.TEXT_ALIGNMENT_CENTER // on below line we are adding layout // param for heading text view. headingTV.layoutParams = txtLayoutParam // on below line we are creating a simple text switcher. val textSwitcher = TextSwitcher( this ) // on below line we are setting factor for our text switcher. textSwitcher.setFactory { // on below line we are adding a text view in our text switcher. val textView = TextView( this @MainActivity ) // on below line we are adding gravity for our text textView.gravity = Gravity.TOP or Gravity.CENTER_HORIZONTAL // on below line we are adding a text size textView.textSize = 32f // on below line we are adding a padding, textView.setPadding( 100 , 100 , 100 , 100 ) // on below line we are setting color for our text textView.setTextColor(Color.BLACK) textView } // on below line we are setting text for text switcher. textSwitcher.setText(languages[index]) // on below line we are creating a variable // for our slide in animation val textIn = AnimationUtils.loadAnimation( this , android.R.anim.slide_in_left ) // on below line we are setting // animation to our text switcher. textSwitcher.inAnimation = textIn // on below line we are creating a variable // for slide out animation val textOut = AnimationUtils.loadAnimation( this , android.R.anim.slide_out_right ) // on below line we are setting out // animation for text switcher textSwitcher.outAnimation = textOut // on below line we are creating a // layout params for button val buttonParam = LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) // on below line we are adding margin for buttons. buttonParam.setMargins( 10 , 10 , 10 , 10 ) // on below line we are creating a previous button // and adding text and style to it on below line val prevBtn = Button( this ) prevBtn.text = "Previous" prevBtn.isAllCaps = false // on below line setting params to it. prevBtn.layoutParams = buttonParam // on below line we are setting text color to it. prevBtn.setTextColor(resources.getColor(R.color.white)) // on below line we are adding background color to it. prevBtn.setBackgroundColor(resources.getColor(R.color.purple_200)) // on below line we are adding click listener prevBtn.setOnClickListener { // on below line we are updating index index = if (index - 1 >= 0 ) index - 1 else 3 textSwitcher.setText(languages[index]) } // on below line we are creating a next button // and adding text and style to it on below line val nextBtn = Button( this ) nextBtn.text = "Next" nextBtn.isAllCaps = false // on below line setting params to it. nextBtn.layoutParams = buttonParam // on below line we are setting text color to it. nextBtn.setTextColor(resources.getColor(R.color.white)) // on below line we are adding background color to it. nextBtn.setBackgroundColor(resources.getColor(R.color.purple_200)) // on below line we are adding click listener nextBtn.setOnClickListener { // on below line we are updating index index = if (index + 1 < languages.size) index + 1 else 0 textSwitcher.setText(languages[index]) } // on below line we are adding our views // to container linear layout containerLL.addView(headingTV) containerLL.addView(textSwitcher) containerLL.addView(prevBtn) containerLL.addView(nextBtn) } } |
Java
package com.gtappdevelopers.kotlingfgproject; import android.graphics.Color; import android.graphics.Typeface; import android.os.Build; import android.os.Bundle; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextSwitcher; import android.widget.TextView; import android.widget.ViewSwitcher; import androidx.annotation.RequiresApi; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { // on below line we are creating variables. private LinearLayout containerLL; String languages[] = { "Java" , "C" , "Kotlin" , "C++" }; int index = 0 ; @RequiresApi (api = Build.VERSION_CODES.JELLY_BEAN_MR1) @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // on below line we are initializing our variables. containerLL = findViewById(R.id.idLLContainer); // on below line we are creating layout params for text view. // and specifying width as match parent and height as wrap content LinearLayout.LayoutParams txtLayoutParam = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ); // on below line we are adding gravity txtLayoutParam.gravity = Gravity.CENTER; // on below line we are creating our dynamic text view TextView headingTV = new TextView( this ); // on below line we are setting for our text view. headingTV.setText( "Dynamic Text Switcher in Android" ); // on below line we are updating text size. headingTV.setTextSize(20f); // on below line we are updating text color and font headingTV.setTextColor(getResources().getColor(R.color.black)); headingTV.setTypeface(Typeface.DEFAULT_BOLD); // on below line we are adding padding headingTV.setPadding( 20 , 20 , 20 , 20 ); // on below line we are specifying text alignment. headingTV.setTextAlignment(View.TEXT_ALIGNMENT_CENTER); // on below line we are adding layout param // for heading text view. headingTV.setLayoutParams(txtLayoutParam); // on below line we are creating a simple text switcher. TextSwitcher textSwitcher = new TextSwitcher( this ); // on below line we are setting factor for our text switcher. textSwitcher.setFactory( new ViewSwitcher.ViewFactory() { @Override public View makeView() { // on below line we are adding a text view in our text switcher. TextView textView = new TextView(MainActivity. this ); // on below line we are adding gravity for our text textView.setGravity(Gravity.CENTER_HORIZONTAL); // on below line we are adding a text size textView.setTextSize(32f); // on below line we are adding a padding, textView.setPadding( 100 , 100 , 100 , 100 ); // on below line we are setting color for our text textView.setTextColor(Color.BLACK); return textView; } }); // on below line we are setting text for text switcher. textSwitcher.setText(languages[index]); // on below line we are creating a variable // for our slide-in animation Animation textIn = AnimationUtils.loadAnimation( this , android.R.anim.slide_in_left ); // on below line we are setting animation // to our text switcher. textSwitcher.setInAnimation(textIn); // on below line we are creating a variable // for slide out animation Animation textOut = AnimationUtils.loadAnimation( this , android.R.anim.slide_out_right ); // on below line we are setting out // animation for text switcher textSwitcher.setOutAnimation(textOut); // on below line we are creating a layout params for button LinearLayout.LayoutParams buttonParam = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ); // on below line we are adding margin for buttons. buttonParam.setMargins( 10 , 10 , 10 , 10 ) // on below line we are creating a previous button // and adding text and style to it on below line Button prevBtn = new Button( this ); prevBtn.setText( "Previous" ); prevBtn.setAllCaps( false ); // on below line setting params to it. prevBtn.setLayoutParams(buttonParam); // on below line we are setting text color to it. prevBtn.setTextColor(getResources().getColor(R.color.white)); // on below line we are adding background color to it. prevBtn.setBackgroundColor(getResources().getColor(R.color.purple_200)); // on below line we are adding click listener prevBtn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // on below line we are updating index if (index - 1 >= 0 ) { index = index - 1 ; } else { index = 3 ; } textSwitcher.setText(languages[index]); } }); // on below line we are creating a next button // and adding text and style to it on below line Button nextBtn = new Button( this ); nextBtn.setText( "Next" ); nextBtn.setAllCaps( false ); // on below line setting params to it. nextBtn.setLayoutParams(buttonParam); // on below line we are setting text color to it. nextBtn.setTextColor(getResources().getColor(R.color.white)); // on below line we are adding background color to it. nextBtn.setBackgroundColor(getResources().getColor(R.color.purple_200)); // on below line we are adding click listener nextBtn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // on below line we are updating index if (index + 1 < languages.length) { index = index + 1 ; } else { index = 0 ; } textSwitcher.setText(languages[index]); } }); // on below line we are adding our views // to container linear layout containerLL.addView(headingTV); containerLL.addView(textSwitcher); containerLL.addView(prevBtn); containerLL.addView(nextBtn); } } |
Now run your project to see the output of the application.
Output:
Contact Us