Elementos básicos¶

TextView¶

Elemento de la interfaz de usuario que muestra texto al usuario. Para proporcionar texto editable por el usuario. El siguiente ejemplo de código muestra un uso típico, con un diseño XML y código para modificar el contenido de la vista de texto

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <TextView
        android:id="@+id/text_view_id"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="@string/hello" />
</LinearLayout>

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         final TextView helloTextView = (TextView) findViewById(R.id.text_view_id);
         helloTextView.setText(R.string.user_greeting);
     }
}

Button¶

Elemento de la interfaz de usuario que el usuario puede tocar o pulsar para realizar una acción. Para mostrar un botón en una actividad, añada un botón al archivo XML de diseño de la actividad:

 <Button
     android:id="@+id/button_id"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="@string/self_destruct" />

ToggleButton ¶

Muestra los estados activado/desactivado como un botón con un indicador "luminoso" y por defecto acompañado del texto "ON" u "OFF".

ImageButton ¶

Muestra un botón con una imagen (en lugar de texto) que puede ser pulsado o clicado por el usuario. Por defecto, un ImageButton tiene el aspecto de un android.widget.Button normal, con el fondo de botón estándar que cambia de color durante los diferentes estados del botón. La imagen en la superficie del botón se define por el atributo android:src en el elemento XML o por el método setImageResource(int).

Para eliminar la imagen de fondo estándar del botón, defina su propia imagen de fondo o establezca que el color de fondo sea transparente.

Para indicar los diferentes estados del botón (enfocado, seleccionado, etc.), puede definir una imagen diferente para cada estado. Por ejemplo, una imagen azul por defecto, una naranja para cuando está enfocado y una amarilla para cuando está pulsado. Una forma fácil de hacerlo es con un "selector" XML dibujable.

EditText ¶

Un elemento de interfaz de usuario para introducir y modificar texto. Cuando defines un widget de edición de texto, debes especificar el atributo android.R.styleable#TextView_inputType. Por ejemplo, para la entrada de texto plano establece inputType como "text":

<EditText
     android:id="@+id/plain_text_input"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:inputType="text"/>

AutoCompleteTextView ¶

Vista de texto editable que muestra automáticamente sugerencias de compleción mientras el usuario escribe. La lista de sugerencias se muestra en un menú desplegable en el que el usuario puede elegir un elemento con el que sustituir el contenido del cuadro de edición.

El menú desplegable puede cerrarse en cualquier momento pulsando la tecla Atrás o, si no hay ningún elemento seleccionado en el menú desplegable, pulsando la tecla intro/centro del teclado.

La lista de sugerencias se obtiene de un adaptador de datos y sólo aparece tras un número determinado de caracteres definido por el umbral.

public class CountriesActivity extends Activity {
     protected void onCreate(Bundle icicle) {
         super.onCreate(icicle);
         setContentView(R.layout.countries);

         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                 android.R.layout.simple_dropdown_item_1line, COUNTRIES);
         AutoCompleteTextView textView = (AutoCompleteTextView)
                 findViewById(R.id.countries_list);
         textView.setAdapter(adapter);
     }

     private static final String[] COUNTRIES = new String[] {
         "Belgium", "France", "Italy", "Germany", "Spain"
     };
}

Checkbox ¶

Un checkbox es un tipo específico de botón de dos estados que se puede marcar o desmarcar. Un ejemplo de uso de una casilla de verificación dentro de su actividad sería el siguiente:

public class MyActivity extends Activity {
      protected void onCreate(Bundle icicle) {
          super.onCreate(icicle);

          setContentView(R.layout.content_layout_id);

          final CheckBox checkBox = (CheckBox) findViewById(R.id.checkbox_id);
          if (checkBox.isChecked()) {
              checkBox.setChecked(false);
          }
      }
  }

RadioButton¶

Botón de dos estados: marcado o desmarcado.
A diferencia de un CheckBox, un RadioButton no puede desmarcarse una vez marcado.
Se usan normalmente dentro de un RadioGroup:
- Marcar un botón desmarca automáticamente los demás del grupo.
Uso típico: selección de una sola opción entre varias (ej. elegir género, nivel de dificultad).

<RadioGroup
    android:id="@+id/grupoOpciones"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioButton
        android:id="@+id/opcion1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opción 1" />

    <RadioButton
        android:id="@+id/opcion2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opción 2" />
</RadioGroup>

Switch¶

Interruptor de dos estados que el usuario puede alternar con un toque o arrastrando el pulgar.
Propiedades destacadas:
text: etiqueta del interruptor.
textOn y textOff: texto del pulgar en cada estado.
textAppearance: estilo de la etiqueta.
switchTextAppearance: estilo del texto del pulgar.
Uso típico: activar/desactivar funciones (Wi-Fi, Bluetooth, notificaciones).

<Switch
    android:id="@+id/switchWifi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Wi-Fi"
    android:textOn="Activado"
    android:textOff="Desactivado" />

<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/switchWifi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Wi-Fi" />

SeekBar¶

Extiende ProgressBar, añadiendo un control deslizante (thumb).
Permite seleccionar un valor arrastrando a izquierda o derecha.
Puede notificar cambios con SeekBar.OnSeekBarChangeListener.
Uso típico: ajustar volumen, brillo, progreso de reproducción.

Consejo

No se recomienda colocar widgets enfocables a los lados de una SeekBar.

<SeekBar
    android:id="@+id/seekVolumen"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="25" />

RatingBar¶

Extiende SeekBar y ProgressBar, mostrando una valoración en estrellas.
El usuario puede tocar o arrastrar para seleccionar la puntuación.
Variantes:
- ratingBarStyleSmall → solo indicador pequeño.
- ratingBarStyleIndicator → solo indicador grande.
Configuración:
- Número de estrellas (setNumStars(int) o en XML).
- Ancho del diseño debe ajustarse al contenido (wrap_content).
Uso típico: valoración de productos, películas, apps.

<RatingBar
    android:id="@+id/ratingValoracion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="1.0"
    android:rating="3.0" />

ProgressBar¶

Muestra el progreso de una operación al usuario de forma no intrusiva.
Modos:
- Indeterminado → cuando no se sabe la duración (animación cíclica).
- Determinado → cuando se puede indicar un porcentaje concreto.
Configuración:
- style="@android:style/Widget.ProgressBar.Horizontal" para barra horizontal.
- setProgress(int) → establece porcentaje.
- incrementProgressBy(int) → incrementa progreso.
- android:max → define el valor máximo (por defecto 100).

Estilos disponibles¶

Widget.ProgressBar.Horizontal
Widget.ProgressBar.Small / .Large
Widget.ProgressBar.Inverse
Widget.ProgressBar.Small.Inverse
Widget.ProgressBar.Large.Inverse

<ProgressBar
    android:id="@+id/progresoCargando"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

<ProgressBar
    android:id="@+id/progresoDescarga"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="25" />