Animated Text Example Android Studio

Animated Text Example Android Studio – In this tutorial i will explain how to create animation text effects in android studio platform. When we create new registration form or login form you try to use text animation effects because when user use the animation effects feel comfortly. Most of developers used text animation effects for their projects and clients also expect this.

In android number of animation effects will be there to animate the form, patterns and more effects. Here i have explain only text animation effects. After the further tutorial we learn more about android animation concept with example. When we add those type of animation our projects looks like very attractive design. That’s why most of developers are like to integrate with animation. Moreover cliens also demand animation related layouts like buttons, forms, text, images and more.

Create New Project

As usual File=>create new project choose empty activity after creating the project open the default class file of MainActivity.java class file and add the following below code in your class file. I hope already you know the basic steps to create new project in android studio platform. If you are beginner then once read the official documentation to learn more things.

package com.alimuzaffar.lib.widgets;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;

import androidx.appcompat.widget.AppCompatEditText;
import androidx.core.text.TextUtilsCompat;
import androidx.core.view.ViewCompat;


public class AnimatedEditText extends AppCompatEditText {
    public static final String XML_NAMESPACE_ANDROID = "http://schemas.android.com/apk/res/android";

    private float mFixedRightOffset = 0;
    private float mFixedBottomOffset = 0;
    private float mAnimRightOffset = 0;
    private float mAnimBottomOffset = 0;
    private int mStart = 0;
    private int mEnd = 0;

    private AnimatorSet mAnimSet = null;

    public enum AnimationType {
        RIGHT_TO_LEFT, BOTTOM_UP, MIDDLE_UP, POP_IN, NONE
    }

    public AnimatedEditText(Context context) {
        super(context);
        init(context, null);
    }

    private void drawGravityLeft(Canvas canvas) {
  
    private void drawGravityRight(Canvas canvas) {
        canvas.translate(getScrollX(), 0);
        String fixedText = getFixedText();
        float fixedTextWidth = mPaint.measureText(fixedText);

        String animChar = getAnimText();
        float animCharWidth = mPaint.measureText(animChar);
        float fullTexWidth = fixedTextWidth + animCharWidth;

        float startX = getWidth() - getCompoundPaddingRight();
        drawFixedText(canvas, fixedText, startX - fullTexWidth, getLineBounds(0, null));
        drawAnimText(canvas, getFullText(), startX - animCharWidth, getLineBounds(0, null));
    }

    private void drawGravityCenterHorizontal(Canvas canvas) {
        canvas.translate(getScrollX(), 0);
        String fixedText = getFixedText();
        float fixedTextWidth = mPaint.measureText(fixedText);

        String animChar = getAnimText();
        float animCharWidth = mPaint.measureText(animChar);
        float fullTexWidth = fixedTextWidth + animCharWidth;

        float startX = getWidth() / 2 - fullTexWidth / 2;
        float startXAnim = getWidth() / 2 + fullTexWidth / 2 - animCharWidth;
        drawFixedText(canvas, fixedText, startX, getLineBounds(0, null));
        drawAnimText(canvas, getFullText(), startXAnim, getLineBounds(0, null));
        drawCursor(canvas, startXAnim);
    }

    private void drawFixedText(Canvas canvas, String fixedText, float startX, float bottomX) {
        canvas.drawText(fixedText, startX + mFixedRightOffset, bottomX + mFixedBottomOffset, mPaint);
    }

    private void drawAnimText(Canvas canvas, CharSequence animText, float startX, float bottomX) {
        canvas.drawText(animText, mStart, mEnd, startX + mAnimRightOffset, bottomX + mAnimBottomOffset, mAnimPaint);
    }

    private void drawCursor(Canvas canvas, float startX) {
        if (mAnimateCursor && isFocused()) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { //redundant, but used to suppress lint
                if (!isCursorVisible()) {
                    float cursorStartX = startX + mCursorX;
                    float cursorStartY = getCompoundPaddingTop();
                    float cursorStopX = cursorStartX;
                    float cursorStopY = getHeight() - getContext().getResources().getDisplayMetrics().scaledDensity * 11;
                    canvas.drawLine(cursorStartX, cursorStartY, cursorStopX, cursorStopY, mCursorPaint);
                }
            }
        }
    }

    private void updateColorsForState() {
        if (mOriginalTextColors == null) {
            return;
        }
        int[] states = {
                isEnabled() ? android.R.attr.state_enabled : -android.R.attr.state_enabled,
                isFocused() ? android.R.attr.state_focused : -android.R.attr.state_focused,
                isSelected() ? android.R.attr.state_selected : -android.R.attr.state_selected,
        };
        int color = mOriginalTextColors.getColorForState(states, mOriginalTextColors.getDefaultColor());

        mPaint.setColor(color);

        int alpha = mAnimPaint.getAlpha();
        mAnimPaint.setColor(color);
        mAnimPaint.setAlpha(alpha); //retain alpha which may change because of animation.
    }

    private void animateInFromRight() {
        animateInFromRight(false, null);
    }

    private void animateInFromRight(boolean reverse, AnimationEndListener listener) {
        float start = reverse ? 0 : getWidth() + (getContext().getResources().getDisplayMetrics().widthPixels - getWidth());
        float end = reverse ? getWidth() + (getContext().getResources().getDisplayMetrics().widthPixels - getWidth()) : 0;
        ValueAnimator va = ValueAnimator.ofFloat(start, end);
        va.setDuration(300);
        va.setInterpolator(new DecelerateInterpolator());
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mAnimRightOffset = (Float) animation.getAnimatedValue();
                AnimatedEditText.this.invalidate();
            }
        });
        mAnimSet = new AnimatorSet();
        if (listener != null) {
            mAnimSet.addListener(listener);
        }
        mAnimationsToPlay.clear();
        mAnimationsToPlay.add(va);
        if (mShouldAnimateCursor) {
            ValueAnimator animCursor = animateMoveCursor(reverse);
            mAnimationsToPlay.add(animCursor);
        }
        mAnimSet.playTogether(mAnimationsToPlay);
        mAnimSet.start();
    }

    private void animateInFromMiddle() {
        animateInFromMiddle(false, null);
    }

    private void animateInFromMiddle(boolean reverse, AnimationEndListener listener) {
        String fixed = TextUtils.substring(getText(), 0, mStart);
        final float textWidth = mPaint.measureText(fixed);
        float startMiddle = reverse ? textWidth : getWidth() / 2;
        float endMiddle = reverse ? getWidth() / 2 : textWidth;

        ValueAnimator animMiddle = ValueAnimator.ofFloat(startMiddle, endMiddle);
        animMiddle.setInterpolator(new DecelerateInterpolator());
        animMiddle.setDuration(200);
        animMiddle.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mAnimRightOffset = (Float) animation.getAnimatedValue();
                mAnimRightOffset -= textWidth;
                AnimatedEditText.this.invalidate();
            }
        });

        float startUp = reverse ? 0 : getHeight() - getCompoundPaddingBottom() - getCompoundPaddingTop();
        float endUp = reverse ? getHeight() - getCompoundPaddingBottom() - getCompoundPaddingTop() : 0;
        ValueAnimator animUp = ValueAnimator.ofFloat(startUp, endUp);
        animUp.setDuration(200);
        animUp.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mAnimBottomOffset = (Float) animation.getAnimatedValue();
                AnimatedEditText.this.invalidate();
            }
        });

       
    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    private ValueAnimator animateMoveCursor(boolean reverse) {
        float start = reverse ? getPaint().measureText(getAnimText()) : 0;
        float end = reverse ? 0 : getPaint().measureText(getAnimText());
        ValueAnimator va = ValueAnimator.ofFloat(start, end);

        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCursorX = getCompoundPaddingLeft() + (Float) animation.getAnimatedValue();
            }
        });
        if (isCursorVisible()) {
            va.addListener(new AnimationEndListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                    setCursorVisible(false);
                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    setCursorVisible(true);
                    setSelection(getText().length());
                }
            });
        }
        return va;
    }

    abstract class AnimationEndListener implements Animator.AnimatorListener {

        @Override
        public void onAnimationStart(Animator animation) {
        }

        @Override
        public void onAnimationCancel(Animator animation) {
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
        }
    }
}

Number animation effects are used in this example like bottom to top text effects, left to right, right to middle text animation effects in android. Already we are tested in our device and it’s working fine. However you can do more animation related works to impress your end user. Because peoples are looking for user friendly navigation with easiest accessing features.

Activity Layouts

After making java class file, integrate with XML files for animate the text effects. Open under path of res=>layout>activity_main.xml file and add the following below code. You can also design the forms in drag and drop way and on the other hand code is automatically generate in the XML file. So the choice is on your end, but manual code is better than drag & drop benefits.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:orientation="vertical"
        android:padding="@dimen/activity_horizontal_margin"
        tools:context=".activity.EditTextWidgetsActivity">

        <com.alimuzaffar.lib.widgets.AnimatedEditText
            android:id="@+id/txt_pop_in"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:hint="Animate pop in"
            android:singleLine="true"
            android:textColor="@color/text_colors"
            app:animationType="popIn" />

        <com.alimuzaffar.lib.widgets.AnimatedEditText
            android:id="@+id/txt_bottom_up"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="right"
            android:hint="Animate bottom up"
            android:inputType="textNoSuggestions"
            app:animationType="fromBottom" />

        <com.alimuzaffar.lib.widgets.AnimatedEditText
            android:id="@+id/txt_right_in"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="center"
            android:hint="Animate right to left"
            android:inputType="textNoSuggestions"
            app:animationType="fromRight" />

        <com.alimuzaffar.lib.widgets.AnimatedEditText
            android:id="@+id/txt_middle_up"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:hint="Animate middle up"
            android:inputType="textNoSuggestions"
            app:animationType="fromMiddle" />

        <EditText
            android:id="@+id/txt_regular"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:hint="Regular EditText" />


        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClick_clear"
            android:text="Toggle Text" />
    </LinearLayout>
</ScrollView>

Output – Animated Text Example Android Studio

android-text-animation-effects

Download Source Code – Animated Text Example Android

Click below image to get the full source code of Animated Text Example Android Studio project. If face any issues on your end just contact us solve your problem. But maximum you did not get any complicated issues, because already we are running our device.

Animated text example android studio

Leave a Reply