How to create a custom view for TextView and change text dynamically

Question

The scenario I'd like to reproduce is :

Having a textView with a drawable left with a green text color (also the tint of the drawable) when tap on that TextView then change the color of the text and change the start drawable (also the tint of the drawable) that is shown for 5 seconds, once these 5 seconds have passed with a fade in/fade out animation change back to the initial state.

I've started creating a custom view

class MyCustomTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    val coroutineScope: CoroutineScope,
) : ConstraintLayout(
    context,
    attrs,
    defStyleAttr
) {

    fun onClickToCopy(){
        //Add the animation to the new state
        coroutineScope.launch {
            delay(5_000L)
        }
        //With an animation come back to the initial state
    }

}

But now I'm stuck I don't know how to proceed with this, do I have to create an init{} with the initial state ?

Instead of creating a custom text view, why don't u try using a combination of image view and text view. You will have more control on their properties this way. — Arpit Shukla, Nov 02 '21 at 16:09
Is to have everything on a single place : The animation, the logic, etc... what option you propose? Could you put an example? — StuartDTO, Nov 02 '21 at 16:20

score 0 · Accepted Answer · answered Nov 02 '21 at 17:23

Just to give a rough idea, you can do something like this:

<LinearLayout
     android:orientation="horizontal">
     <ImageView
          android:id="@+id/imageView"
          android:layout_height="40dp"
          android:layout_width="40dp"
          android:tint="@color/green"/>
     <TextView
          android:id="@+id/textView"
          android:textColor="@color/green"/>
</LinearLayout>

Then in your Activity/Fragment:

textView.setOnClickListener {
    textView.textColor = // New color
    imageView.imageResource = // New image
    imageView.tint = // New tint
    // For the delay you can use a normal Handler
    Handler(Looper.getMainLooper()).postDelayed(
        {
            // Animate these changes however you wish
            textView.textColor = // Original color
            imageView.imageResource = // Original image
            imageView.tint = // Original tint
        }, 
        5_000 // 5 sec delay
    )
}

(I don't remember all the properties so might have used some wrong property names here, but this should give you the general idea)

For the fade in/out part, you can use the common view animation apis. Checkout this and this SO threads to get some idea on how to animate views.

I tries to explain the basic approach here. If you have any doubts regarding this, feel free to comment. I will update the answer accordingly. — Arpit Shukla, Nov 02 '21 at 17:24

How to create a custom view for TextView and change text dynamically

1 Answers1