Como hacer que un texto parpadee (fadein y fadeout)

13 diciembre, 2011 por Gonzalo de Córdoba Dejar una respuesta »

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í

Publicidad

2 comentarios

  1. Kuno dice:

    Gracias me sirvio de mucho

  2. quini dice:

    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 un comentario

Rellena el captcha please!! *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies