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í

Como dar estilo: color, sombras, tamaño a un texto Textview

Objetivo:

Dar formato (color, sombreado, tamaño) a un texto (Textview).

Es importante tener nuestros textos correctamente formateados, para ganar visualización en nuestra aplicación.

Se pueden realizar formatos tanto en Java como en XML, pero presentaremos el segundo caso, para continuar nuestra filosofía en la web de separar vista-controlador entre estos dos lenguajes.

A continuación se muestra la captura de pantalla de Cartelera de Cine, una aplicación Android disponible en Android Market. El nombre de la ciudad es un TextView formateado mediante el XML, que se muestra más abajo. Id variando los diferentes valores mostrados hasta alcanzar el nivel de sombras, color,etc deseado:

Captura_cartelera_de_cine

Código fuente XML:

[sourcecode language=”xml”]
<TextView android:id="@+id/cartelera_texto_ciudad"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="" android:textSize="30sp" android:textStyle="bold"
android:textColor="#000000" android:shadowColor="#8a6603"
android:shadowDx="3" android:shadowDy="2" android:shadowRadius="1.8"
/>
[/sourcecode]

Dicho código pertenece al texto en…Madrid