¿Qué es Spannable en Android y para qué sirve?

Spannable permite aplicar múltiples estilos a diferentes partes de un mismo texto, como colores, tamaños, negritas, subrayados y fondos sin necesidad de usar múltiples TextView, mejorando el rendimiento y la flexibilidad.

¿Cómo puedo crear texto con efecto de gradiente en Android?

Puedes usar un Shader con LinearGradient aplicado a TextPaint para crear efectos de gradiente en TextView, aunque requiere implementación en código Java personalizado para resultados avanzados.

¿Es mejor usar HTML o Spannable para formatear texto en Android?

Spannable ofrece mejor rendimiento y más control sobre el formato. HTML es más simple para formato básico como negritas y cursivas, pero tiene limitaciones en personalización avanzada y puede afectar el rendimiento.

Universo Android

TextView Avanzado en Android: Estilos, Tipografía y Color

Hola amigos 👋 Bienvenidos a un nuevo tutorial de Universo Android. Hoy aprenderemos a dominar el TextView en Android con técnicas avanzadas de estilos, tipografía, colores y formato de texto para crear interfaces profesionales y atractivas.

Al finalizar este tutorial tendrás una aplicación que incluirá:

TextView con estilos personalizados (negrita, cursiva, subrayado)
Tipografías personalizadas (fuentes custom)
Colores y gradientes
Texto con HTML y Spannable
Sombras y efectos visuales
Enlaces clicables
Texto multilínea con ellipsize

🟩 1. ¿Qué es TextView Avanzado?

TextView es el componente fundamental para mostrar texto en Android. El uso avanzado permite crear diseños profesionales con tipografías personalizadas, colores dinámicos, efectos visuales y formato de texto complejo.

🟩 2. Crear el Proyecto en Android Studio

Creamos un nuevo proyecto en Android Studio con Empty Activity.

🟩 3. Diseño XML con TextView Avanzado

Crea un archivo llamado:

📄 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Título Principal -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Estilos de Texto"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#2196F3"
            android:layout_marginBottom="16dp" />

        <!-- TextView con Negrita -->
        <TextView
            android:id="@+id/txtBold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto en Negrita"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_marginTop="8dp" />

        <!-- TextView con Cursiva -->
        <TextView
            android:id="@+id/txtItalic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto en Cursiva"
            android:textStyle="italic"
            android:textSize="18sp"
            android:layout_marginTop="8dp" />

        <!-- TextView con Negrita y Cursiva -->
        <TextView
            android:id="@+id/txtBoldItalic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto en Negrita y Cursiva"
            android:textStyle="bold|italic"
            android:textSize="18sp"
            android:layout_marginTop="8dp" />

        <!-- Separador -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#CCCCCC"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp" />

        <!-- Título: Colores -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Colores y Fondos"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#4CAF50"
            android:layout_marginBottom="16dp" />

        <!-- TextView con Color Hexadecimal -->
        <TextView
            android:id="@+id/txtColorHex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto con color hexadecimal"
            android:textColor="#FF5722"
            android:textSize="18sp"
            android:layout_marginTop="8dp" />

        <!-- TextView con Fondo de Color -->
        <TextView
            android:id="@+id/txtBackground"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto con fondo de color"
            android:textColor="#FFFFFF"
            android:background="#9C27B0"
            android:padding="12dp"
            android:textSize="18sp"
            android:layout_marginTop="8dp" />

        <!-- TextView con Fondo Redondeado -->
        <TextView
            android:id="@+id/txtRoundedBackground"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto con fondo redondeado"
            android:textColor="#FFFFFF"
            android:background="@drawable/rounded_background"
            android:padding="12dp"
            android:textSize="18sp"
            android:layout_marginTop="8dp" />

        <!-- Separador -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#CCCCCC"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp" />

        <!-- Título: Sombras -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sombras y Efectos"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#FF9800"
            android:layout_marginBottom="16dp" />

        <!-- TextView con Sombra -->
        <TextView
            android:id="@+id/txtShadow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto con sombra"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#2196F3"
            android:shadowColor="#000000"
            android:shadowDx="2"
            android:shadowDy="2"
            android:shadowRadius="4"
            android:layout_marginTop="8dp" />

        <!-- TextView con Sombra Suave -->
        <TextView
            android:id="@+id/txtSoftShadow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto con sombra suave"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#4CAF50"
            android:shadowColor="#00FF00"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="10"
            android:layout_marginTop="8dp" />

        <!-- Separador -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#CCCCCC"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp" />

        <!-- Título: Espaciado -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Espaciado y Alineación"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#E91E63"
            android:layout_marginBottom="16dp" />

        <!-- TextView con Letter Spacing -->
        <TextView
            android:id="@+id/txtLetterSpacing"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ESPACIADO DE LETRAS"
            android:textSize="18sp"
            android:letterSpacing="0.3"
            android:layout_marginTop="8dp" />

        <!-- TextView con Line Spacing -->
        <TextView
            android:id="@+id/txtLineSpacing"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Este es un texto con\nespaciado entre líneas\npara mejorar la legibilidad"
            android:textSize="16sp"
            android:lineSpacingExtra="8dp"
            android:lineSpacingMultiplier="1.2"
            android:layout_marginTop="8dp" />

        <!-- Separador -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#CCCCCC"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp" />

        <!-- Título: Ellipsize -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Truncamiento de Texto"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#00BCD4"
            android:layout_marginBottom="16dp" />

        <!-- TextView con Ellipsize End -->
        <TextView
            android:id="@+id/txtEllipsizeEnd"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Este es un texto muy largo que será truncado al final"
            android:textSize="16sp"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginTop="8dp" />

        <!-- TextView con Ellipsize Middle -->
        <TextView
            android:id="@+id/txtEllipsizeMiddle"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Este es un texto muy largo que será truncado en el medio"
            android:textSize="16sp"
            android:maxLines="1"
            android:ellipsize="middle"
            android:layout_marginTop="8dp" />

        <!-- TextView con Ellipsize Marquee -->
        <TextView
            android:id="@+id/txtEllipsizeMarquee"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Este texto se desplazará como marquesina"
            android:textSize="16sp"
            android:maxLines="1"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:layout_marginTop="8dp" />

        <!-- Separador -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#CCCCCC"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp" />

        <!-- Título: Texto Clickable -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto Interactivo"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#673AB7"
            android:layout_marginBottom="16dp" />

        <!-- TextView con Link -->
        <TextView
            android:id="@+id/txtLink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Visita nuestro sitio web"
            android:textSize="16sp"
            android:textColor="#2196F3"
            android:textStyle="bold"
            android:layout_marginTop="8dp" />

        <!-- TextView con HTML -->
        <TextView
            android:id="@+id/txtHtml"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:layout_marginTop="8dp" />

        <!-- TextView con Spannable -->
        <TextView
            android:id="@+id/txtSpannable"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:layout_marginTop="8dp" />

        <!-- Botones de Demostración -->
        <Button
            android:id="@+id/btnChangeStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Cambiar Estilo Dinámicamente"
            android:layout_marginTop="24dp" />

    </LinearLayout>

</ScrollView>

🟩 4. Crear Drawable para Fondo Redondeado

Crea un archivo res/drawable/rounded_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <solid android:color="#FF5722" />
    
    <corners android:radius="16dp" />
    
    <padding
        android:left="16dp"
        android:top="8dp"
        android:right="16dp"
        android:bottom="8dp" />
    
</shape>

🟩 5. Crear Gradiente para TextView

Crea un archivo res/drawable/gradient_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <gradient
        android:startColor="#2196F3"
        android:endColor="#E91E63"
        android:angle="45"
        android:type="linear" />
    
    <corners android:radius="8dp" />
    
</shape>

🟩 6. Lógica Java para TextView Avanzado

📄 MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.text.Html;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.method.LinkMovementMethod;
import android.text.style.BackgroundColorSpan;
import android.text.style.ForegroundColorSpan;
import android.text.style.RelativeSizeSpan;
import android.text.style.StyleSpan;
import android.text.style.UnderlineSpan;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    TextView txtLink, txtHtml, txtSpannable, txtBold;
    Button btnChangeStyle;
    boolean isStyleChanged = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Inicializar vistas
        txtLink = findViewById(R.id.txtLink);
        txtHtml = findViewById(R.id.txtHtml);
        txtSpannable = findViewById(R.id.txtSpannable);
        txtBold = findViewById(R.id.txtBold);
        btnChangeStyle = findViewById(R.id.btnChangeStyle);

        // Configurar marquesina
        TextView txtMarquee = findViewById(R.id.txtEllipsizeMarquee);
        txtMarquee.setSelected(true);

        // Configurar link clickable
        setupClickableLink();

        // Configurar HTML
        setupHtmlText();

        // Configurar Spannable
        setupSpannableText();

        // Botón para cambiar estilo
        btnChangeStyle.setOnClickListener(v -> changeStyleDynamically());
    }

    private void setupClickableLink() {
        txtLink.setOnClickListener(v -> 
            Toast.makeText(this, "Link clickeado!", Toast.LENGTH_SHORT).show()
        );
    }

    private void setupHtmlText() {
        String htmlText = "Este es un texto con <b>negrita</b>, " +
                "<i>cursiva</i>, <u>subrayado</u> y " +
                "<font color='#FF5722'>color</font>";
        
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
            txtHtml.setText(Html.fromHtml(htmlText, Html.FROM_HTML_MODE_LEGACY));
        } else {
            txtHtml.setText(Html.fromHtml(htmlText));
        }
    }

    private void setupSpannableText() {
        String text = "Texto con múltiples estilos aplicados";
        SpannableString spannableString = new SpannableString(text);

        // Aplicar negrita
        spannableString.setSpan(
            new StyleSpan(Typeface.BOLD),
            0, 5,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        // Aplicar color
        spannableString.setSpan(
            new ForegroundColorSpan(Color.parseColor("#2196F3")),
            10, 19,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        // Aplicar fondo
        spannableString.setSpan(
            new BackgroundColorSpan(Color.parseColor("#FFEB3B")),
            20, 27,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        // Aplicar subrayado
        spannableString.setSpan(
            new UnderlineSpan(),
            28, 37,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        // Aplicar tamaño relativo
        spannableString.setSpan(
            new RelativeSizeSpan(1.5f),
            28, 37,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        txtSpannable.setText(spannableString);
    }

    private void changeStyleDynamically() {
        if (!isStyleChanged) {
            // Cambiar a estilo 1
            txtBold.setTextColor(Color.parseColor("#FF5722"));
            txtBold.setTextSize(24);
            txtBold.setTypeface(null, Typeface.BOLD_ITALIC);
            txtBold.setShadowLayer(5, 3, 3, Color.BLACK);
            btnChangeStyle.setText("Restaurar Estilo");
        } else {
            // Restaurar estilo original
            txtBold.setTextColor(Color.parseColor("#000000"));
            txtBold.setTextSize(18);
            txtBold.setTypeface(null, Typeface.BOLD);
            txtBold.setShadowLayer(0, 0, 0, Color.TRANSPARENT);
            btnChangeStyle.setText("Cambiar Estilo Dinámicamente");
        }
        isStyleChanged = !isStyleChanged;
    }
}

🟩 7. Agregar Fuentes Personalizadas

Paso 1: Crear carpeta de fuentes

Crea la carpeta res/font/ y agrega tus archivos de fuentes (.ttf o .otf)

Paso 2: Usar fuente en XML

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Texto con fuente personalizada"
    android:fontFamily="@font/mi_fuente_custom"
    android:textSize="20sp" />

Paso 3: Usar fuente en Java

Typeface customFont = ResourcesCompat.getFont(this, R.font.mi_fuente_custom);
textView.setTypeface(customFont);

🟩 8. Crear Estilos Reutilizables

Crea un archivo res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <!-- Estilo para Títulos -->
    <style name="TitleTextStyle">
        <item name="android:textSize">24sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#2196F3</item>
        <item name="android:layout_marginBottom">16dp</item>
    </style>
    
    <!-- Estilo para Subtítulos -->
    <style name="SubtitleTextStyle">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#666666</item>
        <item name="android:layout_marginTop">8dp</item>
    </style>
    
    <!-- Estilo para Texto de Cuerpo -->
    <style name="BodyTextStyle">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#333333</item>
        <item name="android:lineSpacingExtra">4dp</item>
    </style>
    
    <!-- Estilo para Enlaces -->
    <style name="LinkTextStyle">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#2196F3</item>
        <item name="android:textStyle">bold</item>
    </style>
    
</resources>

Aplicar estilos en XML:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Título Principal"
    style="@style/TitleTextStyle" />

🟩 9. Propiedades Avanzadas de TextView

Propiedad Descripción
android:textStyle Estilo del texto (normal, bold, italic)
android:textColor Color del texto
android:textSize Tamaño del texto
android:fontFamily Familia de fuente
android:letterSpacing Espaciado entre letras
android:lineSpacingExtra Espacio extra entre líneas
android:shadowColor Color de la sombra
android:shadowDx Desplazamiento X de la sombra
android:shadowDy Desplazamiento Y de la sombra
android:shadowRadius Radio de difuminado de la sombra
android:ellipsize Modo de truncamiento (end, middle, marquee)
android:maxLines Número máximo de líneas
android:textAllCaps Convertir a mayúsculas

Propiedad	Descripción
`android:textStyle`	Estilo del texto (normal, bold, italic)
`android:textColor`	Color del texto
`android:textSize`	Tamaño del texto
`android:fontFamily`	Familia de fuente
`android:letterSpacing`	Espaciado entre letras
`android:lineSpacingExtra`	Espacio extra entre líneas
`android:shadowColor`	Color de la sombra
`android:shadowDx`	Desplazamiento X de la sombra
`android:shadowDy`	Desplazamiento Y de la sombra
`android:shadowRadius`	Radio de difuminado de la sombra
`android:ellipsize`	Modo de truncamiento (end, middle, marquee)
`android:maxLines`	Número máximo de líneas
`android:textAllCaps`	Convertir a mayúsculas

🟩 10. Spannable Avanzado con Múltiples Efectos

private void advancedSpannableExample() {
    String text = "Android Development es increíble!";
    SpannableString spannable = new SpannableString(text);
    
    // Texto clickable
    ClickableSpan clickableSpan = new ClickableSpan() {
        @Override
        public void onClick(View widget) {
            Toast.makeText(MainActivity.this, "Texto clickeado!", Toast.LENGTH_SHORT).show();
        }
    };
    
    spannable.setSpan(clickableSpan, 0, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    spannable.setSpan(new ForegroundColorSpan(Color.BLUE), 0, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    spannable.setSpan(new UnderlineSpan(), 0, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    
    textView.setText(spannable);
    textView.setMovementMethod(LinkMovementMethod.getInstance());
}

▶️ Cómo Ejecutar tu Aplicación

Abre Android Studio
Presiona Run para ejecutar el proyecto
Si no tienes un emulador, crea uno desde AVD Manager
Verás tus TextView con múltiples estilos, colores y efectos funcionando

🧪 Resultado Final

Tu aplicación mostrará:

TextView con diferentes estilos (negrita, cursiva, combinados)
Colores personalizados y fondos redondeados
Sombras y efectos visuales
Espaciado de letras y líneas
Truncamiento de texto con ellipsize
Texto con formato HTML y Spannable
Enlaces clickables e interactivos

📥 Descargar Proyecto de Ejemplo

Puedes descargar el proyecto completo desde el siguiente enlace:

👉 Descargar

🙌 Gracias por Visitar mi Blog

Si este tutorial te fue útil:

✔️ Compártelo
✔️ Déjame un comentario
✔️ Sígueme para más contenido sobre Android y programación

¡Estoy aquí para ayudarte!

❓ Preguntas Frecuentes (FAQ)

1. ¿Cómo puedo usar fuentes personalizadas en Android?
Coloca los archivos de fuentes (.ttf o .otf) en la carpeta res/font/ y úsalas con android:fontFamily="@font/tu_fuente" en XML o con Typeface en Java.

2. ¿Qué es Spannable y para qué sirve?
Spannable permite aplicar múltiples estilos a diferentes partes de un mismo texto, como colores, tamaños, negritas y fondos sin necesidad de usar múltiples TextView.

3. ¿Cómo puedo crear texto con gradiente?
Puedes usar un Shader con LinearGradient o TextPaint para aplicar gradientes a TextView, aunque requiere código Java personalizado.

4. ¿Es mejor usar HTML o Spannable para formatear texto?
Spannable ofrece mejor rendimiento y más control. HTML es más simple para formato básico pero tiene limitaciones en personalización.

TextView Avanzado en Android: Estilos, Tipografía y Color