animate text letters

can you give me a hint how to animate letters in the text string? For example, for a string "Hello World", scale H first from 0 开发者_StackOverflow社区to size, then e, then l etc? like a bouncing text effect if you know what I mean.

And I would the first letter in a string to be in a different color.

I do know how to animate the entire view or draw text on canvas, but that way animate the entire text string not the letters.

I know it's probably not the best solution but here we go. Since you can't add anything than text for let say a textView. You need to insert a CharSequence, You should take a look at SpannableString.

Displaying emoticons in Android

Considering the question above, you might want to add a Html tag to each of the letters using some css styles. Then using fromHtml you could convert it and put it in your textView.

found an easy way by using two TextView controls. First is set to the first latter of a word by mytext.substring(0,1) and second one to mytext.substring(1).

when do startAnimation for both or you can have one animation for the first view and another one for the second one.

on layout file, i put them next to each other on RelativeLayout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/MainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
        android:id="@+id/txtCaption"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="80dp"
        android:textColor="#FFFFFF"
        android:text="est"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        />

    <TextView
        android:id="@+id/txtCaptionFirstLetter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="70dp"
        android:textColor="#00FF00"
        android:textStyle="bold"
        android:text="T" 
        android:layout_toLeftOf="@+id/txtImageCaption" 
        android:layout_alignBottom="@+id/txtImageCaption"
        />
</RelativeLayout>

This works:

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

@Override
protected void onResume() {
    super.onResume();
    Animator anim = bouncingStringIntoViewGroup((ViewGroup)findViewById(R.id.bouncer), Color.RED, 30, "A bouncy string.", 3000);
    //here you can add a another listener to anim if you want (a listener could manipulate the views by set ids).
    anim.start();
}

private Animator bouncingStringIntoViewGroup(ViewGroup bouncingTextContainer, final int firstLetterColor, final float size, final String vls, int duration){
    Context context = bouncingTextContainer.getContext();
    final FrameLayout textViewHolder = new FrameLayout(context);
    final TextView textView = new TextView(context);
    final TextView helper = new TextView(context);
    textViewHolder.addView(helper, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    textViewHolder.addView(textView);

    final int length = vls.length();
    SpannableString textViewString = new SpannableString(vls);
    textViewString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), 0, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    SpannableString helperString = new SpannableString(vls);
    helperString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), 1, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    helperString.setSpan(new ForegroundColorSpan(firstLetterColor), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    textView.setTextSize(size);
    helper.setTextSize(0);
    helper.setText(helperString);
    setupCreatedViews(bouncingTextContainer, textViewHolder, textView, helper);

    final int intSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, size, getResources().getDisplayMetrics());
    final int stepDuration = duration/length;
    ObjectAnimator anim = ObjectAnimator.ofFloat(helper, "textSize", 0, size).setDuration(stepDuration);
    anim.setRepeatCount(length);
    anim.addListener(new Animator.AnimatorListener() {
        int at = 1;
        @Override
        public void onAnimationStart(Animator animation) {}

        @Override
        public void onAnimationEnd(Animator animation) {}

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {
            SpannableString textViewString = new SpannableString(vls);
            textViewString.setSpan(new ForegroundColorSpan(firstLetterColor), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            textViewString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), at, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            textView.setText(textViewString);
            helper.setTextSize(0);
            SpannableString helperString = new SpannableString(vls);
            helperString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), 0, at, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            helperString.setSpan(new TextAppearanceSpan(null, 10, intSize, null, null), 0, at, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            if(at!=length) helperString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), at + 1, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            helper.setText(helperString);
            at++;
        }
    });
    return anim;
}

private void setupCreatedViews(ViewGroup containerForAnimatedText, FrameLayout subcontainer, TextView textView, TextView textViewFadeinLetter){
    containerForAnimatedText.addView(subcontainer, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    //here you can set colors, ids, padding etc...
}