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 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. Cambia el color del texto a través del atributo El anterior ejemplo usa el color índigo de nivel 500 del Material Design: El atributo 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 Asigna uno de los siguientes estilos o combinaciones de ellos: En la siguiente imagen puedes ver todos los estilos posibles: El atributo La siguiente imagen muestra la diferencia entre las formas y trazos que se usan en cada estilo tipográfico: Si deseas habilitar la detección de patrones que coincidan con esquemas como: correos, urls, teléfonos, entre otros; entonces, aplica el atributo Los siguientes son los valores que puedes asignar: Por ejemplo, el siguiente También puedes usar En el caso que desees convertir toda la entrada de texto a mayúsculas, aplica La anterior etiqueta genera la siguiente presentación del texto: Define el tipo que será usado de una fuente declarada en el sistema o en tus recursos de fuente ( 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 Paso 2. Añade al directorio Paso 3. Ve al Al final podrás visualizar la nueva presentación: El atributo 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 El resultado es la aplicación de los siguientes valores: El texto se proyectaría de la siguiente forma: Veamos un ejemplo donde deseas crear un Suponiendo que el view de texto pertenece a una actividad y su padre directo en el layout será un La solución anterior consta de: Al ejecutar la aplicación el resultado será: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
Color Del Texto
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" />
Tamaño Del Texto
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" />
@dimen/nombre_dimension
.Estilo Del Texto
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" />
Tipo De Fuente
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" />
Convertir URLs En Links Clickeables
android:autoLink
.all
: Todos los patronesemail
: Direcciones de correonone
: Ninguno (por defecto)phone
: Teléfonosweb
: URLs webTextView
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" />
android:textColorLink
para modificar el color de creación del link.Convertir Texto A Mayúsculas
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" />
Familia Tipográfica
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 " />
res
y seleccionando Android Resource Directory. Luego asegúrate de seleccionar el tipo font.font
tus archivos de fuente. En este ejemplo añadiremos la fuente Cinzel desde Google Fonts.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" />
Apariencia De Texto
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.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" />
Crear TextView Programáticamente
TextView
en tiempo de ejecución con las siguientes características: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)
}
LinearLayout
donde vamos a insertar el TextView
apply()
para configurar la inicialización del view en un solo bloque de contexto.TextViewCompat
para asignar el valor de textAppearance
como Headline 6.Typeface
TextView
creado dinámicamente en el layout