TextView en Android es uno de los elementos básicos e importantes de la interfaz de usuario. Esto juega un papel muy importante en la experiencia de la interfaz de usuario y depende de cómo se muestre la información al usuario. Este widget de TextView en Android se puede dinamizar en varios contextos. Por ejemplo, si se debe resaltar la parte importante de la información, entonces la substring que contiene debe estar en cursiva o en negrita, un escenario más es donde si la información en TextView contiene un hipervínculo que dirige a un URL web en particular, entonces tiene que incluir un hipervínculo y debe estar subrayado. Eche un vistazo a la siguiente lista e imagen para tener una idea de la discusión general.
- Formateo de TextView
- Tamaño del TextView
- Cambio de estilo de texto
- Cambiar el color del texto
- Sombra de texto
- Espaciado entre letras y mayúsculas
- Agregar iconos para TextView
- Formato HTML de TextView
Implementación paso a paso
Paso 1: crear un proyecto de actividad vacío
- Cree una actividad vacía Proyecto de Android Studio. Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? para saber cómo crear un proyecto de Android Studio de actividad vacía.
Paso 2: trabajar con el archivo activity_main.xml
- El diseño principal y uno, que incluye solo un TextView y tan variado como avanzamos, discutimos los diversos contextos.
- Para implementar la interfaz de usuario de la actividad, invoque el siguiente código dentro del archivo activity_main.xml.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="GeeksforGeeks" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Interfaz de usuario de salida:
1. Formatear el TextView
Android ofrece principalmente 3 tipos de tipografías
- normal
- sans
- serif
- monoespaciado
- Los cuatro tipos de caras anteriores deben invocarse bajo el atributo » typeFace» de TextView en XML.
- Invoque el siguiente código y observe el atributo » typeFace» de TextView.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:ignore="HardcodedText"> <!--the below typeFace attribute has to invoked with values mentioned--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="GeeksforGeeks" android:textSize="32sp" android:typeface="normal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Producción:
2. Tamaño del TextView
- Esta función de la vista de texto confirma qué tipo de contenido se debe mostrar al usuario. Por ejemplo, si hay un encabezado, hay 6 tipos de encabezados que se pueden implementar. Mire la siguiente imagen que contiene las pautas para el tamaño de la vista de texto y el estilo de la vista de texto recomendado por Material Design de Google. .
- El atributo que se utiliza para cambiar el tamaño de la vista de texto en Android es «textSize».
- Consulte el siguiente código y su salida para una mejor comprensión.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="64dp" android:textSize="48sp" android:text="H3 Heading" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:textSize="32sp" android:text="H6 Heading" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:textSize="16sp" android:text="Body 1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:textSize="14sp" android:text="Body 2" /> </LinearLayout>
Producción:
3. Cambio de estilo de texto
En Android existen básicamente tres estilos de texto:
- Audaz
- Itálico
- Normal
- El estilo de texto del texto en Android se puede implementar usando el atributo «textStyle».
- También se pueden implementar varios estilos de texto mediante el operador de canalización. Ejemplo “android:textStyle=”negrita|cursiva”.
- Para implementar los diversos estilos de texto, consulte el siguiente código y su salida.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:ignore="HardcodedText"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:orientation="vertical"> <!--the below textStyle attribute has to invoked with values mentioned--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="GeeksforGeeks" android:textStyle="italic" android:textSize="32sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="GeeksforGeeks" android:textStyle="bold" android:textSize="32sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="GeeksforGeeks" android:textStyle="normal" android:textSize="32sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="GeeksforGeeks" android:textStyle="bold|italic" android:textSize="32sp" /> </LinearLayout> </LinearLayout>
Producción:
4. Cambiar el color del texto
- El color del texto también debe cambiar según el cambio en el contexto de la información que se muestra al usuario.
- Por ejemplo, si hay un texto de advertencia, debe ser de color rojo y para el texto deshabilitado, la opacidad o el color del texto debe ser grisáceo. Para cambiar el color del texto se utiliza el atributo “textColor” .
- Android también ofrece los colores de texto predefinidos, que se pueden implementar usando «@android:color/yourColor» como valor para el «textColor» . Aquí el valor puede ser un código hexadecimal o los colores predefinidos que ofrece el android.
- Consulte el siguiente código y su salida para una mejor comprensión.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <!--the value predefined by android--> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="64dp" android:text="Warning Message" android:textColor="#B00020" android:textSize="32sp" /> <!--the value predefined by android--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="16dp" android:text="Disabled Text" android:textColor="@android:color/darker_gray" android:textSize="32sp" /> <!--the value is hex code--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="16dp" android:text="GeeksforGeeks" android:textColor="#000000" android:textSize="32sp" /> </LinearLayout>
Producción:
5. Sombra de texto
- La sombra para el texto también se puede dar en Android. Los atributos requeridos para la vista de texto sombreado son:
android:shadowDx=”integer_value” -> que decide la distancia del texto desde su sombra con respecto al eje x, si el integer_value es positivo, la sombra es positiva en el eje x y viceversa.
android:shadowDy=”integer_value” -> que decide la distancia del texto desde su sombra con respecto al eje y, si el integer_value es positivo, la sombra está en el negativo del eje y y viceversa.
android:shadowRadius=”integer_value” -> que decide la cantidad de sombra que se le dará a la vista de texto.
- Consulte el siguiente código y su salida para una mejor comprensión.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="16dp" android:shadowColor="@color/green_500" android:shadowDx="4" android:shadowDy="4" android:shadowRadius="10" android:text="GeeksforGeeks" android:textColor="#000000" android:textSize="32sp" tools:targetApi="ice_cream_sandwich" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="16dp" android:padding="8dp" android:shadowColor="@color/green_500" android:shadowDx="-15" android:shadowDy="4" android:shadowRadius="10" android:text="GeeksforGeeks" android:textColor="#000000" android:textSize="32sp" tools:targetApi="ice_cream_sandwich" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="16dp" android:shadowColor="@color/green_500" android:shadowDx="4" android:shadowDy="-15" android:shadowRadius="10" android:text="GeeksforGeeks" android:textColor="#000000" android:textSize="32sp" tools:targetApi="ice_cream_sandwich" /> </LinearLayout>
Producción:
6. Espaciado entre letras y mayúsculas
- El espaciado entre letras y las letras mayúsculas son algunas de las propiedades importantes de la vista de texto en android.
- Para el texto de los diseños de botones y pestañas, el texto debe estar en letras mayúsculas recomendado por Google Material Design.
- El espaciado entre letras también debe mantenerse de acuerdo con el escenario.
android:letterSpacing=”floatingTypeValue” -> Este atributo se usa para dar el espacio entre cada una de las letras.
android:textAllCaps=”trueOrfalse” -> Este atributo decide si todas las letras deben estar en mayúsculas o no.
- Consulte el siguiente código y su salida para una mejor comprensión.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="64dp" android:letterSpacing="0.15" android:text="GeeksforGeeks" android:textColor="@android:color/black" android:textSize="32sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="64dp" android:text="GeeksforGeeks" android:textAllCaps="true" android:textColor="@android:color/black" android:textSize="32sp" /> </LinearLayout>
Producción:
7. Agregar iconos para TextView
- Android también permite agregar dibujables con las vistas de texto.
- Hay tres posiciones para agregar los iconos para TextView. Son un principio, un final, un tope y un fondo.
- Consulte el siguiente código y su salida para saber cómo agregar los íconos dibujables a la Vista de texto.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="64dp" android:drawableStart="@drawable/ic_lappy" android:padding="4dp" android:text="GeeksforGeeks" android:textColor="@android:color/black" android:textSize="32sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="64dp" android:drawableEnd="@drawable/ic_lappy" android:padding="4dp" android:text="GeeksforGeeks" android:textColor="@android:color/black" android:textSize="32sp" /> </LinearLayout>
Producción:
8. Formato HTML de TextView
- En Android, la string se puede formatear usando la clase Html.
- Consulte el siguiente ejemplo para una mejor comprensión.
- Agrega el siguiente código dentro de activity_main.xml.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginEnd="8dp" android:focusable="auto" android:textSize="32sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
- Ahora agregue el siguiente código dentro del archivo MainActivity.kt.
Kotlin
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Html
import android.text.method.LinkMovementMethod
import android.widget.TextView
import androidx.annotation.RequiresApi
class MainActivity : AppCompatActivity() {
@RequiresApi(Build.VERSION_CODES.N)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val text: TextView = findViewById(R.id.text)
val s: String =
"This is <i>italic</i> <b>bold</b> <u>underlined</u> <br>Goto <a href='https://www.geeksforgeeks.org'>GeegksforGeeks</a>"
// movementMethod which traverses the links in the text buffer
text.movementMethod = LinkMovementMethod.getInstance()
text.text = Html.fromHtml(s, Html.FROM_HTML_MODE_COMPACT)
}
}
Salida: ejecutar en el emulador
Publicación traducida automáticamente
Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA