Search code examples
androidtextviewfade

Android fade in text character by character


I am trying to create a screen as follows:

               Some very long text, saying something

Now, what I want is for the splash screen to load with the image ONLY, then I want the text underneath it to fade in character by character:

Frame 1: S

Frame 2: So

Frame 3: Som etc...

My layout looks like this (I am not showing the image yet):

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

    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:id="@+id/fader">    
    </LinearLayout>

 </RelativeLayout>

My Java looks like this:

public void onCreate(Bundle savedInstanceState)  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash);  

    View faderLayout = findViewById(R.id.fader);

    TextView[] faderTextViews = getFaderTextViews();  
    for(int i=0; i<faderTextViews.length; i++)
    {
        ((LinearLayout) faderLayout).addView(faderTextViews[i]);
        faderLayout.invalidate();

    }

}


private TextView[] getFaderTextViews()
{

     final Animation in = new AlphaAnimation(0.0f, 1.0f);
        in.setDuration(3000);

        final Animation out = new AlphaAnimation(1.0f, 0.0f);
        out.setDuration(3000);
     char[] veryLongString = "This is a very long string".toCharArray();
     TextView[] faderTextViews = new TextView[veryLongString.length];
     for(int i = 0; i<faderTextViews.length; i++)
     {
         TextView temp = new TextView(this);
         temp.setText(veryLongString, i, 1);
         temp.setLayoutParams(new LayoutParams(
                    LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT));
         temp.startAnimation(in);
         faderTextViews[i] = temp;

     }
     return faderTextViews;

}

What ends up happening is that the entire string is faded in at once.

Is there any way to do this?


Solution

  • AnimationDrawable frameAnimation;
    frameAnimation = (AnimationDrawable) addselection.getBackground();
    
    @Override public void onWindowFocusChanged(boolean hasFocus) {
        frameAnimation.start();
        super.onWindowFocusChanged(hasFocus);
    }
    

    add drawable with this type of xml

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">
        <item android:drawable="@drawable/add_selection0001" android:duration="50" />
        <item android:drawable="@drawable/add_selection0002" android:duration="50" />
        <item android:drawable="@drawable/add_selection0003" android:duration="50" />
        <item android:drawable="@drawable/add_selection0004" android:duration="50" />
        <item android:drawable="@drawable/add_selection0005" android:duration="50" />
        <item android:drawable="@drawable/add_selection0006" android:duration="50" />
    </animation-list>
    

    Set different images for your sequence animation.set this drawable as your background in imageview.

    There is a relatively simple example on the official docs website here: Animation Resources