How to show Text view with animation by 3 dot one by one like progress bar

user_1788205 0
Viewed 487

HI I m trying show progress bar with text view for some time like . we have to show text view text for 3 second in that 3 second each second we have to display one by one with one ,two and three dot. expected : whole textview should show 3 second Hello . in one second Hello.. in 2 second Hello...in 3 second

after that it should be hide . I have tried with handler but unable to do this .

    private fun blink() {
    var iCount = 0;
    val handler = Handler()
    Thread {
    val timeToBlink = 1000
    try {
    Thread.sleep(timeToBlink.toLong())
    } catch (e: Exception) {
    }
    handler.post {
    if(iCount==0)
    {
    iCount = 1
      text = "Hello."
    }
    else if(iCount==1){
    iCount = 2
    text = "Hello.."
    }
    else {
    Toast.makeText(context,"...",Toast.LENGTH_LONG).show()
    iCount=0
  text = "Hello..."
    }
    
    }
    }.start()
    }

Please help me with this .

kotlin android
3 Answers

Try this

class MainActivity : AppCompatActivity() {
private lateinit var tvOne: TextView

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

    tvOne = findViewById<TextView>(R.id.tvOne)
}

override fun onResume() {
    super.onResume()

    tvOne.text = "Hello"

    Handler(Looper.getMainLooper()).postDelayed({
        tvOne.text = "Hello."
    }, 1000)

    Handler(Looper.getMainLooper()).postDelayed({
        tvOne.text = "Hello.."
    }, 2000)

    Handler(Looper.getMainLooper()).postDelayed({
        tvOne.text = "Hello..."
    }, 3000)

    Handler(Looper.getMainLooper()).postDelayed({
        tvOne.visibility = View.GONE
    }, 4000)

}

}

And the XML

<TextView
    android:id="@+id/tvOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
user_95557030

TRY This once.

STEP 1 Create class TextAndAnimationView

class TextAndAnimationView : LinearLayout {

    lateinit var textToShow: TextView
    lateinit var animatedTextView: DotAnimatedTextView

    constructor(context: Context) : super(context) {
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        showTextAndAnimation(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        showTextAndAnimation(context, attrs)
    }

    private fun showTextAndAnimation(context: Context, attrs: AttributeSet) {

        inflate(context, R.layout.layout, this)

        textToShow = this.findViewById(R.id.text_to_show)
        animatedTextView = this.findViewById(R.id.progress_dots_txt)

        val ta = context.obtainStyledAttributes(attrs, R.styleable.TextAndAnimationView, 0, 0)
        try {
            val text = ta.getText(R.styleable.TextAndAnimationView_setText)
            val textHint = ta.getText(R.styleable.TextAndAnimationView_setTextHint)
            val color = ta.getInt(R.styleable.TextAndAnimationView_setTextColor, 0)
            val textSize = ta.getFloat(R.styleable.TextAndAnimationView_setTextSize, 0f)
            val dotsCount = ta.getInt(R.styleable.TextAndAnimationView_numberOfDots, 0)
            if (text != null)
                setText(text)
            if (textHint != null)
                setTextHint(textHint)
            if (color != 0)
                setTextColor(color)
            if (textSize != 0f)
                setTextSize(textSize)
            if (dotsCount != 0)
                noOfDots(dotsCount)
        } finally {
            ta.recycle()
        }

        animatedTextView.showDotsAnimation()
    }
    fun setText(text: CharSequence) {
        textToShow.text = text
    }
    fun setTextSize(size: Float) {
        textToShow.textSize = size
        animatedTextView.textSize = size
    }
    fun setTextHint(textHint: CharSequence) {
        textToShow.setHint(textHint)
    }
    fun setTextColor(color: Int) {
        textToShow.setTextColor(color)
        animatedTextView.setTextColor(color)
    }
    fun stopAnimation() {
        animatedTextView.stopAnimation()
    }
    fun noOfDots(dotsCount: Int) {
        animatedTextView.noOfDots(dotsCount)
    }

    fun animationDelay(animationDelayTime: Long) {
        animatedTextView.animationDelay(animationDelayTime)
    }
}

STEP 2- Create layout.xml in res/layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/text_to_show"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="end|center"
        android:text="Progress"
        android:textSize="12sp" />

    <com.DotAnimatedTextView       //ADD YOU Package NAME
        android:id="@+id/progress_dots_txt"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginStart="2dp"
        android:layout_toRightOf="@id/text_to_show"
        android:gravity="start|bottom"
        android:maxLines="1"
        android:text="..." />
</LinearLayout>

STEP 3 Create attrs.xml in res/values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TextAndAnimationView">
        <attr name="setText" format="string"/>
        <attr name="setTextSize" format="float"/>
        <attr name="setTextHint" format="string"/>
        <attr name="setTextColor" format="integer"/>
        <attr name="numberOfDots" format="integer"/>
    </declare-styleable>
</resources>

STEP 4 Create class- TextAndAnimationView

class TextAndAnimationView : LinearLayout {

    lateinit var textToShow: TextView
    lateinit var animatedTextView: DotAnimatedTextView

    constructor(context: Context) : super(context) {
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        showTextAndAnimation(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        showTextAndAnimation(context, attrs)
    }

    private fun showTextAndAnimation(context: Context, attrs: AttributeSet) {

        inflate(context, R.layout.layout, this)

        textToShow = this.findViewById(R.id.text_to_show)
        animatedTextView = this.findViewById(R.id.progress_dots_txt)

        val ta = context.obtainStyledAttributes(attrs, R.styleable.TextAndAnimationView, 0, 0)
        try {
            val text = ta.getText(R.styleable.TextAndAnimationView_setText)
            val textHint = ta.getText(R.styleable.TextAndAnimationView_setTextHint)
            val color = ta.getInt(R.styleable.TextAndAnimationView_setTextColor, 0)
            val textSize = ta.getFloat(R.styleable.TextAndAnimationView_setTextSize, 0f)
            val dotsCount = ta.getInt(R.styleable.TextAndAnimationView_numberOfDots, 0)
            if (text != null)
                setText(text)
            if (textHint != null)
                setTextHint(textHint)
            if (color != 0)
                setTextColor(color)
            if (textSize != 0f)
                setTextSize(textSize)
            if (dotsCount != 0)
                noOfDots(dotsCount)
        } finally {
            ta.recycle()
        }

        animatedTextView.showDotsAnimation()
    }
    fun setText(text: CharSequence) {
        textToShow.text = text
    }
    fun setTextSize(size: Float) {
        textToShow.textSize = size
        animatedTextView.textSize = size
    }
    fun setTextHint(textHint: CharSequence) {
        textToShow.setHint(textHint)
    }
    fun setTextColor(color: Int) {
        textToShow.setTextColor(color)
        animatedTextView.setTextColor(color)
    }
    fun stopAnimation() {
        animatedTextView.stopAnimation()
    }
    fun noOfDots(dotsCount: Int) {
        animatedTextView.noOfDots(dotsCount)
    }

    fun animationDelay(animationDelayTime: Long) {
        animatedTextView.animationDelay(animationDelayTime)
    }
}

STEP 5 - Add this code in your XML code

<?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"
    tools:context=".MainActivity">

    <com.TextAndAnimationView //ADD YOU Package name first 
        android:id="@+id/bmi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

STEP 6 Add in your Activity class

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.bmi.setText("HELLO")
    }

    override fun onStop() {
        super.onStop()
        binding.bmi.stopAnimation()
    }
}
user_183629300

This is the simplest and easiest way to achieve this.

Run this function where you want this will add a new . (dot) every second to TextView. And if the you want to terminate the process just break the operation as shown in condition

fun addDotEverySecond() {
   Handler(Looper.getMainLooper()).postDelayed({
       tvOne.text =  tvOne.text + "."
    //condition to check needs to terminate or not.
       if(your condition here){
           // just return from here to terminate this.
       }else{
           addDotEverySecond()
       }
   }, 1000)
}
user_113241580
Related