Como hacer que un texto parpadee (fadein y fadeout)

Objetivo:

Hacer que un texto parpadee en nuestra aplicación Android.

Para ello podremos crear una animación, que aplique fadein y fadeout al texto, con intensidad y velocidad deseada.

Vamos a crear una Activity Principal que mostrará el texto, creando una instancia de la clase TextoParpadeante. Esta última necesita de dos ficheros XML que , que definirán varios parámetros, tales como la duración .

Vemos unas capturas de pantalla (aunque lo suyo hubiera sido una animación):

TutorialAndroid - Texto parpadeando 1

Y a continuación mostramos el texto comentado:

Código fuente Java (Main.java):

package textoparpadeo.tutorialandroid.com;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class Main extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TextView tv = (TextView) findViewById(R.id.vista_texto);
        tv.setText("Este texto va a parpadear. \n by TutorialAndroid.com");
	new TextoParpadeante(getBaseContext(),tv);
    }
}

Código fuente Java (TextoParpadeante.java):

package textoparpadeo.tutorialandroid.com;
import android.content.Context;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.TextView;

public class TextoParpadeante {
    Context context;
    private TextView texto = null;
    private Animation fadeIn = null;
    private Animation fadeOut = null;
    // Listeners que detectan el fin de la animación
    private LocalFadeInAnimationListener myFadeInAnimationListener = new LocalFadeInAnimationListener();
    private LocalFadeOutAnimationListener myFadeOutAnimationListener = new LocalFadeOutAnimationListener();

    /**
     * Constructor de la clase
     * @param Context context
     * @param TextView text
     */
	public TextoParpadeante(Context context, TextView text){
		this.context = context;
		this.texto = (TextView)text;
	    runAnimations();
	}

    private void launchOutAnimation() {
	    texto.startAnimation(fadeOut);
    }

    /**
     * Performs the actual fade-in
     */
    private void launchInAnimation() {
	    texto.startAnimation(fadeIn);
    }

    /**
     * Comienzo de la animación
     */
    private void runAnimations() {
    	//uso de las animaciones
	    fadeIn = AnimationUtils.loadAnimation(this.context, R.anim.fadein);
	    fadeIn.setAnimationListener( myFadeInAnimationListener );
	    fadeOut = AnimationUtils.loadAnimation(this.context, R.anim.fadeout);
	    fadeOut.setAnimationListener( myFadeOutAnimationListener );
	    // And start
    	launchInAnimation();
    }

    // Runnable que arranca la animación
    private Runnable mLaunchFadeOutAnimation = new Runnable() {
	    public void run() {
	    	launchOutAnimation();
	    }
    };

    private Runnable mLaunchFadeInAnimation = new Runnable() {
	    public void run() {
	    	launchInAnimation();
	    }
    };

    /**
     * Listener para la animacion del Fadeout
     *
     * @author moi
     *
     */
    private class LocalFadeInAnimationListener implements AnimationListener {
	    public void onAnimationEnd(Animation animation) {
		    texto.post(mLaunchFadeOutAnimation);
		}
	    public void onAnimationRepeat(Animation animation){
	    }
	    public void onAnimationStart(Animation animation) {
	    }
    };

    /**
     * Listener de animación para el Fadein
     */
    private class LocalFadeOutAnimationListener implements AnimationListener {
	    public void onAnimationEnd(Animation animation) {
		    texto.post(mLaunchFadeInAnimation);
		}
	    public void onAnimationRepeat(Animation animation) {
	    }
	    public void onAnimationStart(Animation animation) {
	    }
    };
}

Construimos el fichero XML para la vista principal de la aplicación:
Código fuente XML (Main.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
	android:id="@+id/vista_texto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</LinearLayout>

Y a continuación se implentan los fichero que deben ir en el directorio /res/anim/ de nuestro proyecto:
Código fuente XML (res/anim/fadein.xml):

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.1"
    android:toAlpha="1.0"
    android:duration="1000"
/>

Código fuente XML (res/anim/fadeout.xml):

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"
    android:duration="1000"
/>

Descárgate el código aquí

2 comentarios en “Como hacer que un texto parpadee (fadein y fadeout)

  1. Muy buen post, me ha funcionado a la primera.
    ¿Sabes como puedo añadirle un tiempo de duracion a la animacion para que no se quede parpadeando todo el tiempo?

    Muchas gracias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Rellena el captcha please!! *