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):

[sourcecode language=”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);
}
}
[/sourcecode]

Código fuente Java (TextoParpadeante.java):

[sourcecode language=”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) {
}
};
}

[/sourcecode]

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

[sourcecode language=”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>
[/sourcecode]

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):

[sourcecode language=”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"
/>
[/sourcecode]

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

[sourcecode language=”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"
/>
[/sourcecode]

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.

Responder a Kuno Cancelar la respuesta

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