Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can we create Scroll TextView as whatsapp lastseen's status

I want to ask about how can we create Scroll TextView action bar as Whatsapp lastseen's status. Please open whatsapp and see what is status look like :)

Before: enter image description here

Then it will start scroll and we can see the text like this : "seen yesterday at ....."

And After scroll: enter image description here

like image 776
Khoa Tran Avatar asked Jan 12 '16 06:01

Khoa Tran


1 Answers

Inspired with this answer, tried to make this solution. Hope this will work for you.

Step - 1 : Create Typewriter class.

public class Typewriter extends TextView {

        private CharSequence mTextToHide, mTextToDisplay;
        private int mIndex;
        private long mInitialDelay = 2000; //Default 500ms delay
        private long mDelay = 500; //Default 500ms delay
        private Handler mHandler = new Handler();
        private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
    //            setText(mText.subSequence(0, mIndex++));
    //            if (mIndex <= mText.length()) {
    //                mHandler.postDelayed(characterAdder, mDelay);
    //            }

            if (mTextToHide != null
                && mTextToDisplay != null && mIndex < mTextToHide.length()) {
            Log.d("Typewriter", "mIndex = " + mIndex);
            setText(mTextToDisplay.subSequence(mIndex++, mTextToDisplay.length()));
            mHandler.postDelayed(characterAdder, mDelay);
            }
        }
        };

        public Typewriter(Context context) {
        super(context);
        }

        public Typewriter(Context context, AttributeSet attrs) {
        super(context, attrs);
        }

        public void animateText(CharSequence textToHide, String textToDisplay) {
        mTextToHide = textToHide;
        mTextToDisplay = textToDisplay;
        mIndex = 0;

    //        setText("");
        setText(textToDisplay);
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mInitialDelay);
        }

        public void setCharacterDelay(long millis) {
        mDelay = millis;
        }

        public void setInitialDelay(long millis) {
        mInitialDelay = millis;
        }
    }

Step - 2 : Extend it in xml in place of TextView. Replace com.abc.xyz with respective package name.

         <com.abc.xyz.Typewriter
            android:id="@+id/txtAppTitle"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textSize="@dimen/font_size_toolbar_title" /> 

Step - 3 : Set values from your activity or fragment class. Set parameters as per your requirements.

    public static String LAST_SEEN_TEXT = "last seen ";
    public static String TIME_TEXT = "yesterday at 15:43";

    private Typewriter txtAppTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ...

    txtAppTitle = (Typewriter) findViewById(R.id.txtAppTitle);
    // Start after 2000ms
    txtAppTitle.setInitialDelay(2000);
    // Remove a character every 150ms
    txtAppTitle.setCharacterDelay(250);
    txtAppTitle.animateText(LAST_SEEN_TEXT, LAST_SEEN_TEXT + TIME_TEXT);

    ...
    }
like image 139
Chitrang Avatar answered Sep 19 '22 10:09

Chitrang