El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Componentes básicos de la interfaz de usuario

Siguiente ►
►

En esta sección, aprenderás sobre los componentes básicos de la interfaz de usuario (UI) en Android. Estos componentes son fundamentales para construir aplicaciones interactivas y atractivas. Vamos a cubrir los siguientes temas:

  1. TextView
  2. EditText
  3. Button
  4. ImageView
  5. CheckBox
  6. RadioButton
  7. Switch
  8. ProgressBar

  1. TextView

Descripción

TextView es un componente de UI que se utiliza para mostrar texto en la pantalla.

Ejemplo de uso

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="18sp"
    android:layout_margin="16dp"/>

Explicación

  • android:id: Identificador único para el componente.
  • android:layout_width y android:layout_height: Definen el tamaño del componente.
  • android:text: El texto que se mostrará.
  • android:textSize: Tamaño del texto.
  • android:layout_margin: Margen alrededor del componente.

  1. EditText

Descripción

EditText es un componente de UI que permite al usuario ingresar y editar texto.

Ejemplo de uso

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your name"
    android:inputType="textPersonName"
    android:layout_margin="16dp"/>

Explicación

  • android:hint: Texto que se muestra cuando el campo está vacío.
  • android:inputType: Tipo de entrada (en este caso, nombre de persona).

  1. Button

Descripción

Button es un componente de UI que se utiliza para realizar acciones cuando el usuario lo presiona.

Ejemplo de uso

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    android:layout_margin="16dp"/>

Explicación

  • android:text: Texto que se muestra en el botón.

  1. ImageView

Descripción

ImageView es un componente de UI que se utiliza para mostrar imágenes.

Ejemplo de uso

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_foreground"
    android:layout_margin="16dp"/>

Explicación

  • android:src: Fuente de la imagen (en este caso, un recurso drawable).

  1. CheckBox

Descripción

CheckBox es un componente de UI que permite al usuario seleccionar o deseleccionar una opción.

Ejemplo de uso

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I agree"
    android:layout_margin="16dp"/>

Explicación

  • android:text: Texto que se muestra junto al CheckBox.

  1. RadioButton

Descripción

RadioButton es un componente de UI que permite al usuario seleccionar una opción de un grupo de opciones mutuamente excluyentes.

Ejemplo de uso

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2"/>
</RadioGroup>

Explicación

  • RadioGroup: Contenedor para agrupar RadioButton y asegurar que solo uno puede ser seleccionado a la vez.

  1. Switch

Descripción

Switch es un componente de UI que permite al usuario alternar entre dos estados (encendido/apagado).

Ejemplo de uso

<Switch
    android:id="@+id/switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Enable notifications"
    android:layout_margin="16dp"/>

Explicación

  • android:text: Texto que se muestra junto al Switch.

  1. ProgressBar

Descripción

ProgressBar es un componente de UI que muestra el progreso de una operación en curso.

Ejemplo de uso

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"/>

Explicación

  • ProgressBar puede ser indeterminado (como en este ejemplo) o determinado, donde se puede establecer el progreso actual.

Ejercicio Práctico

Descripción

Crea una interfaz de usuario que incluya todos los componentes mencionados anteriormente. La interfaz debe permitir al usuario ingresar su nombre, seleccionar una opción de un grupo de RadioButtons, activar/desactivar una opción con un Switch, y mostrar un ProgressBar.

Solución

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:textSize="18sp"
        android:layout_marginBottom="16dp"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name"
        android:inputType="textPersonName"
        android:layout_marginBottom="16dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:layout_marginBottom="16dp"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_foreground"
        android:layout_marginBottom="16dp"/>

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I agree"
        android:layout_marginBottom="16dp"/>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 1"/>

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 2"/>
    </RadioGroup>

    <Switch
        android:id="@+id/switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enable notifications"
        android:layout_marginBottom="16dp"/>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Explicación

Este layout utiliza un LinearLayout vertical para organizar todos los componentes de UI mencionados. Cada componente tiene un margen inferior para separarlos visualmente.

Conclusión

En esta sección, hemos cubierto los componentes básicos de la interfaz de usuario en Android. Estos componentes son esenciales para construir aplicaciones interactivas y atractivas. Asegúrate de practicar creando diferentes interfaces de usuario utilizando estos componentes para familiarizarte con ellos. En la próxima sección, aprenderemos sobre las actividades en Android y cómo manejarlas.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados