How to Increase/Decrease Fading Rate of FadingTextView in Android?

Prerequisite: How to add fading TextView animation in Android

TextView is the basic building block of user interface components. It is used to set the text and display it to the user. It is a very basic component and used a lot. A Fading TextView is a TextView that changes its content automatically every few seconds. So the question is now why to increase/decrease the fading rate of FadingTextView. This completely depends on the elements that are displayed on the screen. This is related to the aesthetics of the application. A slower fading text view with a grey or black text could be used for showing certain messages. Similarly, a faster fading text view with a red text could be used for showing warning or error messages. This completely depends on the developer what they wish to show. Through this article, we implemented a model to demonstrate how this functionality works. One can make use of this functionality accordingly. Note that we are going to implement this project using the Kotlin language.

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add dependency to the build.gradle file

When the setup is ready, go to the app build.gradle and add the following dependency. Sync the project now.

implementation ‘com.tomer:fadingtextview:2.5’

Step 3: Working with the activity_main.xml file

Next, go to the activity_main.xml file, which represents the UI of the project. We have added a FadingTextView element to display the fading text and a Button, so whenever the user will click on the button the Fading Rate will increase/decrease accordingly. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">

    <!--FadingTextView element-->
    <com.tomer.fadingtextview.FadingTextView
    android:id="@+id/fadingTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:textSize="30sp"
    />

    <!--A button to increase or Decrease fading rate-->
     <Button
    android:id="@+id/btnStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/fadingTextView"
    android:text="Faster or Slower"/>

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Finally, go to the MainActivity.kt file, and refer the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

For Increasing the Fading Rate (Faster):

Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.tomer.fadingtextview.FadingTextView
import java.util.concurrent.TimeUnit

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Strings to display in the FadingTextView
        val texts = arrayOf("Welcome!", "Hello", "Geek")

        // Declaring FadingTextView
        val ftv = findViewById<FadingTextView>(R.id.fadingTextView)

        // Set the text array to FadingTextView (ftv)
        ftv.setTexts(texts)

        var timeout:Long = 1000

        // setTimeout(Long or Double value only, TimeUnit)
        // TimeUnits: HOURS, MINUTES, SECONDS, MILLISECONDS
          // For every 1000 Milliseconds, the text in FTV will change
        ftv.setTimeout(timeout,TimeUnit.MILLISECONDS)

        // btn to increase the change rate or make things faster.
        val btn = findViewById<Button>(R.id.btnStart)

        btn.setOnClickListener{

          // Setting timeout to the half of the current
          timeout /= 2

            ftv.setTimeout(timeout,TimeUnit.MILLISECONDS)

            // Toast that displays current Timeout
            Toast.makeText(applicationContext,"Changes every $timeout Milliseconds", Toast.LENGTH_SHORT).show()
        }
    }
}

Output: Run on Emulator

For Decreasing the Fading Rate (Slower):

Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.tomer.fadingtextview.FadingTextView
import java.util.concurrent.TimeUnit

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Strings to display in the FadingTextView
        val texts = arrayOf("Welcome!", "Hello", "Geek")

        // Declaring FadingTextView
        val ftv = findViewById<FadingTextView>(R.id.fadingTextView)

        // Set the text array to FadingTextView (ftv)
        ftv.setTexts(texts)

        var timeout:Long = 1

        // setTimeout(Long or Double value only, TimeUnit)
        // TimeUnits: HOURS, MINUTES, SECONDS, MILLISECONDS
          // For every 1 Milliseconds, the text in FTV will change
        ftv.setTimeout(timeout,TimeUnit.MILLISECONDS)

        // btn to decrease the change rate or make things slower.
        val btn = findViewById<Button>(R.id.btnStart)

        btn.setOnClickListener{
         // Setting timeout to twice of the current
          timeout *= 2

            ftv.setTimeout(timeout,TimeUnit.MILLISECONDS)

            // Toast that displays current Timeout
            Toast.makeText(applicationContext,"Changes every $timeout Milliseconds", Toast.LENGTH_SHORT).show()
        }
    }
}

Output: Run on Emulator