Animate TextView to lower case using MotionLayout

Question

Animate textView in Capitalize to lower Case using MotionLayout

like FACTS -> facts

I am succeeded in translating and change textColor where as I am not able to convert all letter to lower case during animation

MotionScene

<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:motionInterpolator="easeIn"
        motion:duration="1000">
       <KeyFrameSet>
           <KeyAttribute>

           </KeyAttribute>

       </KeyFrameSet>
        <OnClick motion:targetId="@+id/test_tv" />
    </Transition>

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@+id/test_tv"
            android:layout_height="wrap_content"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            android:rotationX="0"
            android:rotationY="0"
            android:rotation="0">


            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#3F51B5" />
            <CustomAttribute
                motion:attributeName="inputType"
                motion:customStringValue="textCapCharacters"/>

        </Constraint>


    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/test_tv"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:scaleX="0.75"
            android:scaleY="0.75"
            android:layout_marginTop="10dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/center_horizontal_gl">

            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#EC0808" />
            <CustomAttribute
                motion:attributeName="inputType"
                motion:customStringValue="textCapSentences"/>
        </Constraint>


    </ConstraintSet>
</MotionScene>

I have tried using inputType but it's not working whereas captialize is deprecated..

I have also tried

<CustomAttribute
                motion:attributeName="textAllCaps"
                motion:customBoolean="false"/>

But not working..

Can someone provide me a better solution

score 0 · Answer 1 · answered Sep 01 '21 at 11:21

i believe you can't do this using CustomAttribute as CustomAttribute only accept few data types

motion:customColorValue for colors
motion:customIntegerValue for integers
motion:customFloatValue for floats
motion:customStringValue for strings
motion:customDimension for dimensions
motion:customBoolean for booleans

and non of them would help you achieve upper to lower case change. i recommend to make use of the motion layout transition listener like below.

motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
        
    }

    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
        
    }

    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
        textView.text.apply = if(p3==0f) textView.text.uppercase() else textView.text.lowercase()
    }

    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {

    }
})

Animate TextView to lower case using MotionLayout

1 Answers1