TextView En Android

El TextView En Android es un widget que muestra texto al usuario como su nombre lo sugiere. Claramente esto lo hace ser uno de los views más usados en interfaces de usuario para proyectar cabeceras, títulos, texto informativo, etiquetas y muchos otros.

En este tutorial aprenderás a crear Text Views en tus layouts, usar los atributos que posee y personalizar la forma en que proyecta el texto.

La Clase TextView

TextView es una de las directas descendientes de la clase View. Al ser la abstracción responsable de contener texto, varios de los elementos gráficos del paquete android.widget, como Button y EditText, reutilizan esta naturaleza.

Por otro lado, para darle soporte a versiones anteriores de Android de las nuevas capacidades que se van introduciendo al TextView, se creó la clase AppCompatTextView.

También tienes a disposición la clase MaterialTextView para aplicar los temas de material design sobre tus text views por defecto.

Añadir Un TextView En Android Studio

Para agregar un TextView desde el editor de layout de Android Studio tan, solo dirígete a Palette > Text o Palette > Common. Selecciona la opción TextView y arrástralo al lienzo:

Esto creará una nueva etiqueta <TextView> en tu layout similar a esta:

<TextView
        android:id="@+id/hello_world_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

Usa el atributo android:text para asignar un literal String o un class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val helloWorldText: TextView = findViewById(R.id.hello_world_text) helloWorldText.text = "Nuevo texto" } }

Atributos Del TextView

Los siguientes son ejemplos sobre el uso de atributos, que te permiten transformar y personalizar el texto que se dibuja en pantalla.

Puedes acceder al código fuente completo desde el siguiente enlace.

Color Del Texto

Cambia el color del texto a través del atributo android:textColor. Este recibe la referencia a un recurso de color o valores RGB en variaciones "rgb", "argb", "rrggbb", o "aarrggbb":

<TextView
    android:id="@+id/text_color"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#3F51B5"
    android:text="Texto color Material Indigo 500" />

El anterior ejemplo usa el color índigo de nivel 500 del Material Design:

Tamaño Del Texto

El atributo android:textSize determina el tamaño del texto y se recomienda asignarle valores en pixeles escalados o sp. Sin embargo puedes usar medidas en px, dp, in y mm:

<TextView
    android:id="@+id/text_size_24sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="24sp"
    android:text="Tamaño de 24sp" />

El anterior ejemplo junto a las dimensiones de 14sp, 16sp y 20sp se verían así:

También es posible usar un recurso de dimensiones a través de la navegación @dimen/nombre_dimension.

Estilo Del Texto

Asigna uno de los siguientes estilos o combinaciones de ellos: normal, bold y italic. El valor por defecto es normal y si deseas combinarlos usa el símbolo '|':

<TextView
        android:id="@+id/text_style_combination"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Estilos itálico y negrilla"
        android:textStyle="bold|italic" />

En la siguiente imagen puedes ver todos los estilos posibles:

Tipo De Fuente

El atributo android:typeface acepta las siguientes constantes para especificar el estilo de fuente del TextView: normal, sans, serif y monospace:

<TextView
    android:id="@+id/typeface_monospace"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Tipo de fuente monospace"
    android:typeface="monospace" />

La siguiente imagen muestra la diferencia entre las formas y trazos que se usan en cada estilo tipográfico:

Convertir URLs En Links Clickeables

Si deseas habilitar la detección de patrones que coincidan con esquemas como: correos, urls, teléfonos, entre otros; entonces, aplica el atributo android:autoLink.

Los siguientes son los valores que puedes asignar:

• all: Todos los patrones
• email: Direcciones de correo
• none: Ninguno (por defecto)
• phone: Teléfonos
• web: URLs web

Por ejemplo, el siguiente TextView genera un link clickeable hacia Develou:

<TextView
    android:id="@+id/autolink_url"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="https://develou.com"
    android:textColorLink="#F48FB1"
    android:autoLink="web" />

También puedes usar android:textColorLink para modificar el color de creación del link.

Convertir Texto A Mayúsculas

En el caso que desees convertir toda la entrada de texto a mayúsculas, aplica true al atributo android:textAllCaps.

<TextView
    android:id="@+id/text_all_caps"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="www.develou.com"
    android:textAllCaps="true" />

La anterior etiqueta genera la siguiente presentación del texto:

Familia Tipográfica

Define el tipo que será usado de una fuente declarada en el sistema o en tus recursos de fuente (res/font).

<TextView
    android:id="@+id/font_family1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:fontFamily="sans-serif-condensed-medium"
    android:text="Sans Serif Condensed Medium " />

En el sistema encontrarás familias prefabricadas para generar variaciones con las fuentes del sistema.

Por supuesto también puedes agregar tu propia fuente:

Paso 1. Crea la carpeta de recursos tipo fuente, dando click derecho en res y seleccionando Android Resource Directory. Luego asegúrate de seleccionar el tipo font.

Paso 2. Añade al directorio font tus archivos de fuente. En este ejemplo añadiremos la fuente Cinzel desde Google Fonts.

Paso 3. Ve al TextView y referencia a la fuente con la dirección @font/cizel. De esta se aplicará la fuente al texto:

<TextView
    android:id="@+id/custom_font"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:fontFamily="@font/cinzel"
    android:text="Texto que usa la fuente Cinzel" />

Al final podrás visualizar la nueva presentación:

Apariencia De Texto

El atributo android:textAppearance permite definir en conjunto el color de texto, tipo de letra, tamaño y estilo de texto. Normalmente usarás este atributo para asignar las apariencias prefabricadas en los estilos del sistema.

Estas concuerdan con las escalas de tipografía definidas en la guía del Material Design. Y tan solo es seleccionarlas del menú emergente cuando tipeas la escala.

Por ejemplo, el siguiente texto usa la apariencia TextAppearance.MaterialComponents.Headline4:

<TextView
    android:id="@+id/headline_4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Ejemplos"
    android:textAppearance="@style/TextAppearance.MaterialComponents.Headline4" />

El resultado es la aplicación de los siguientes valores:

El texto se proyectaría de la siguiente forma:

Crear TextView Programáticamente

Veamos un ejemplo donde deseas crear un TextView en tiempo de ejecución con las siguientes características:

• Texto: «bug»
• Color: Rojo
• Tipo de fuente: monoespaciado
• Estilo: Negrita

Suponiendo que el view de texto pertenece a una actividad y su padre directo en el layout será un LinearLayout, el código de la solución se vería así:

private fun createTextView() {
    val layout: ViewGroup = findViewById(R.id.layout) // (1)

    val bugTextView = TextView(this).apply { // (2)
        text = "bug-1789" // (3)
        TextViewCompat.setTextAppearance( // (4)
            this,
            R.style.TextAppearance_MaterialComponents_Headline6
        )
        setTextColor(Color.RED) // (5)
        setTypeface(Typeface.MONOSPACE, Typeface.BOLD) // (6)

        layoutParams = LinearLayout.LayoutParams( // (7)
            LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
        )
    }

    layout.addView(bugTextView) // (8)
}

La solución anterior consta de:

1. Obtener la referencia del LinearLayout donde vamos a insertar el TextView
2. Invocar a la función de alcance apply() para configurar la inicialización del view en un solo bloque de contexto.
3. Asignar el texto deseado
4. Usar al objeto auxiliar TextViewCompat para asignar el valor de textAppearance como Headline 6.
5. Asignar el color rojo del SDK.
6. Asignar el tipo monoespaciado y la negrita con los valores en Typeface
7. Definir los parámetros del layout para el texto
8. Agregar al TextView creado dinámicamente en el layout

Al ejecutar la aplicación el resultado será: