# Guía Práctica de Android XML para ADSO

## Desarrollo de Interfaces para Aplicaciones Móviles

📱 Sección 1: Fundamentos Básicos

1.1 ¿Qué es XML en Android?

XML (eXtensible Markup Language) es el lenguaje que usamos para crear las
interfaces visuales en Android. Piensa en él como el "plano" de tu aplicación,
donde describes cómo se verá cada pantalla.

1.2 Estructura Básica

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- Aquí van los elementos de la interfaz -->

</LinearLayout>
```

#### 1.3 Elementos Básicos

1. **TextView**: Para mostrar texto
2. **EditText**: Para que el usuario escriba
3. **Button**: Para botones
4. **ImageView**: Para imágenes

*****Instalación de Android Studio

Descargar Android Studio:

Ve a: https://developer.android.com/studio
Haga clic en "Descargar Android Studio"
Selecciona tu sistema operativo

Requisitos mínimos:

8GB RAM (recomendado 16GB)

8GB espacio en disco
Procesador 64 bits

****Primer Proyecto*****

Abre Android Studio

Haga clic en "Nuevo proyecto"
Selecciona "Actividad vacía"
Configura el proyecto:
CopyName: MiPrimeraApp
Package name: com.ejemplo.miprimeraapp
Language: Java
Minimum SDK: API 24
Primero, en el panel izquierdo de Android Studio:

Expande la carpeta app

Luego expande res
Luego expande layout
Deberías ver un archivo llamado activity_main.xml

Haz doble clic en activity_main.xml

En la parte inferior de la ventana que se abre, verás dos pestañas:

"Design" (vista de diseño)

"Code" (código)
Haz clic en "Code"

ERRORES POSIBLES

Click derecho en la carpeta layout que acabas de crear

Selecciona New
Selecciona Layout Resource File
Se abrirá una ventana donde debes configurar:

File name: activity_main

Root element: LinearLayout
Click en "OK"

https://services.gradle.org/distributions/
Descarga "gradle-8.10.2-bin.zip"

EJEMPLO

<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">

<!-- Título usando string -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="titulo_principal"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="#2196F3"
android:layout_marginBottom="16dp"/>

<!-- Subtítulo usando string -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="subtitulo"
android:textSize="20sp"
 android:textStyle="italic"
android:textColor="#4CAF50"
android:layout_marginBottom="8dp"/>

<!-- Texto normal usando string -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="texto_normal"
android:textSize="16sp"
android:layout_marginBottom="16dp"/>

</LinearLayout>

Cada TextView muestra un estilo diferente:

Título grande y centrado

Subtítulo en itálica
Texto normalZ
Texto destacado con fondo
Texto centrado con fondo
Texto subrayado y en rojo

Combinar TextView con otros elementos comunes de Android

<?xml version="1.0" encoding="utf-8"?>

<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">

<!-- Título Principal -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/titulo_formulario"
android:textSize="24sp"
android:textStyle="bold"
android:gravity="center"
android:layout_marginBottom="24dp"/>

<!-- Sección Nombre -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_nombre"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="@string/hint_nombre"
android:inputType="textPersonName"
android:layout_marginBottom="16dp"/>
 <!-- Sección Email -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_email"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="@string/hint_email"
android:inputType="textEmailAddress"
android:layout_marginBottom="24dp"/>

<!-- Botón de Registro -->

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/btn_registrar"/>

</LinearLayout>

EJERCICIOS:

1. ESTRUCTURA BÁSICA DEL ARCHIVO XML:

```xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Esta primera línea indica que es un archivo XML y su codificació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"
android:gravity="center">
```

**Explicación línea por línea:**

- `<?xml version="1.0" encoding="utf-8"?>`: Declara que es un archivo XML
- `LinearLayout`: Es el contenedor principal (como una caja que contiene todo)
- `xmlns:android`: Define el lenguaje de Android que usaremos
- `layout_width="match_parent"`: Usa todo el ancho de la pantalla
- `layout_height="match_parent"`: Usa todo el alto de la pantalla
- `orientation="vertical"`: Los elementos se colocarán uno debajo del otro
- `padding="16dp"`: Deja un espacio de 16dp en todos los bordes
- `gravity="center"`: Centra todos los elementos dentro del layout

2. PRIMER ELEMENTO - TEXTO (TextView):

```xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:text="Mi Primera App"
android:textSize="24sp"
android:textStyle="bold"
android:layout_marginBottom="32dp"/>
```

**Explicación:**
- `TextView`: Elemento para mostrar texto
- `wrap_content`: Se ajusta al tamaño del contenido
- `text`: El texto que queremos mostrar
- `textSize="24sp"`: Tamaño del texto (sp = scaled pixels)
- `textStyle="bold"`: Texto en negrita
- `layout_marginBottom`: Espacio debajo del elemento

3. CAMPO DE ENTRADA (EditText):

xmlCopy<EditText
android:id="@+id/editTextNombre"
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="Escribe tu nombre"
android:inputType="textPersonName"
android:layout_marginBottom="16dp"/>
Explicación detallada:

EditText: Es un campo donde el usuario puede escribir

android:id="@+id/editTextNombre": Identifica únicamente este elemento
layout_width="match_parent": Usa todo el ancho disponible
layout_height="48dp": Altura de 48dp (recomendado para elementos tocables)
hint: Texto que aparece como sugerencia y desaparece al escribir
inputType: Define el tipo de texto que se puede ingresar

textPersonName: Para nombres

textEmailAddress: Para correos
textPassword: Para contraseñas
number: Solo números
phone: Para teléfonos

4. BOTÓN (Button):

xmlCopy<Button
android:id="@+id/btnSaludar"
android:layout_width="200dp"
android:layout_height="48dp"
android:text="Saludar"/>
Explicación detallada:

Button: Elemento clickeable

android:id: Identificador único del botón
layout_width="200dp": Ancho fijo de 200dp
text: Texto que aparece en el botón

6. IMAGEN (ImageView):

xmlCopy<ImageView
 android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_logo"
android:contentDescription="Logo de la app"
android:layout_marginBottom="16dp"/>
Explicación:

ImageView: Elemento para mostrar imágenes

120dp: Tamaño fijo para la imagen
src: La fuente de la imagen
contentDescription: Descripción para accesibilidad

7. CHECKBOX (Casilla de verificación):

xmlCopy<CheckBox
android:id="@+id/checkBoxTerminos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Acepto los términos y condiciones"
android:layout_marginBottom="16dp"/>
Explicación:

CheckBox: Elemento para selección sí/no

wrap_content: Se ajusta al tamaño del texto
text: Texto que acompaña al checkbox

8. RADIO BUTTONS (Botones de Opción):

xmlCopy<!-- Grupo de Radio Buttons -->

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

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

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

RadioGroup: Agrupa botones de opción relacionados

Solo se puede seleccionar una opción del grupo
Cada RadioButton es una opción seleccionable

9. SWITCH (Interruptor):
xmlCopy<Switch
android:id="@+id/switchNotificaciones"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="Activar notificaciones"
android:layout_marginBottom="16dp"/>
Explicación:

Interruptor de encendido/apagado
Útil para configuraciones tipo sí/no
Más moderno que el checkbox

10. BARRA DE PROGRESO:

xmlCopy<!-- Barra de progreso circular -->

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

<!-- Barra de progreso horizontal -->

<ProgressBar
android:id="@+id/progressBarHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="50"
android:layout_marginBottom="16dp"/>

11. CAMPO DE TEXTO MULTILÍNEA:

xmlCopy<EditText
android:id="@+id/editTextDescripcion"
android:layout_width="match_parent"
android:layout_height="120dp"
android:inputType="textMultiLine"
android:gravity="top"
android:hint="Escribe una descripción"
android:padding="8dp"
android:background="@android:color/white"
android:layout_marginBottom="16dp"/>

12. TARJETA (CardView):

xmlCopy<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
 android:padding="16dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Título de la Tarjeta"
android:textStyle="bold"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Descripción o contenido"/>

</LinearLayout>
</androidx.cardview.widget.CardView>

13. SELECTOR DE FECHA:

xmlCopy<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"/>

14. BARRA DE BÚSQUEDA:

xmlCopy<SearchView
android:id="@+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:iconifiedByDefault="false"
android:queryHint="Buscar..."
android:layout_marginBottom="16dp"/>

ACTIVIDAD DE ENTREGA 01 ### 🎯 Ejercicios Nivel 1: Primeros Pasos

FORMULARIO DE REGISTRO:

Vamos a crear un formulario más completo agregando más campos y elementos

<!-- res/values/strings.xml -->

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Mi App</string>
<string name="titulo_formulario">Formulario de Registro</string>
<string name="etiqueta_nombre">Nombre:</string>
<string name="hint_nombre">Ingresa tu nombre</string>
<string name="etiqueta_email">Email:</string>
 <string name="hint_email">Ingresa tu email</string>
<string name="etiqueta_telefono">Teléfono:</string>
<string name="hint_telefono">Ingresa tu teléfono</string>
<string name="etiqueta_genero">Género:</string>
<string name="opcion_masculino">Masculino</string>
<string name="opcion_femenino">Femenino</string>
<string name="etiqueta_edad">Edad:</string>
<string name="hint_edad">Ingresa tu edad</string>
<string name="checkbox_terminos">Acepto los términos y condiciones</string>
<string name="btn_registrar">Registrar</string>
<string name="btn_cancelar">Cancelar</string>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
xmlns:android="
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">

<!-- Título -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/titulo_formulario"
android:textSize="24sp"
android:textStyle="bold"
android:gravity="center"
android:layout_marginBottom="24dp"/>

<!-- Nombre -->

<TextViewmat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_nombre"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="@string/hint_nombre"
android:inputType="textPersonName"
android:layout_marginBottom="16dp"/>

<!-- Email -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_email"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="@string/hint_email"
android:inputType="textEmailAddress"
android:layout_marginBottom="16dp"/>

<!-- Teléfono -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_telefono"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="@string/hint_telefono"
android:inputType="phone"
android:layout_marginBottom="16dp"/>

<!-- Género -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_genero"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>

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

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/opcion_masculino"
android:layout_marginEnd="16dp"/>

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/opcion_femenino"/>
</RadioGroup>

<!-- Edad -->

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/etiqueta_edad"
android:textStyle="bold"
android:layout_marginBottom="8dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="48dp"
 android:hint="@string/hint_edad"
android:inputType="number"
android:layout_marginBottom="24dp"/>

<!-- Términos y Condiciones -->

<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/checkbox_terminos"
android:layout_marginBottom="24dp"/>

<!-- Botones -->

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/btn_registrar"
android:layout_marginBottom="8dp"/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/btn_cancelar"
android:backgroundTint="#A5A5A5"/>

</LinearLayout>
</ScrollView>

*****17. Personalizar los colores y estilos

Primero, creemos el archivo de colores:

Ve a res/values
Si no existe colors.xml, créalo:

Click derecho en values

New > Values Resource File
Nombre: colors

xmlCopy<!-- colors.xml -->

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Colores principales -->
<color name="colorPrimary">#2196F3</color>
<color name="colorSecondary">#FFC107</color>
<color name="colorAccent">#FF4081</color>

<!-- Colores de texto -->

<color name="textoPrimario">#212121</color>
<color name="textoSecundario">#757575</color>
 <!-- Colores de fondo -->
<color name="fondoClaro">#FFFFFF</color>
<color name="fondoGris">#F5F5F5</color>
</resources>

Ahora, creemos estilos personalizados:

En res/values
Crea o abre styles.xml

xmlCopy<!-- styles.xml -->

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Estilo para títulos grandes -->
<style name="TituloGrande">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">24sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/textoPrimario</item>
<item name="android:layout_marginBottom">16dp</item>
</style>

<!-- Estilo para campos de entrada -->

<style name="CampoEntrada">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">48dp</item>
<item name="android:padding">8dp</item>
<item name="android:background">@color/fondoGris</item>
<item name="android:layout_marginBottom">16dp</item>
</style>

<!-- Estilo para botones principales -->

<style name="BotonPrimario">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">48dp</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:backgroundTint">@color/colorPrimary</item>
<item name="android:layout_marginBottom">8dp</item>
</style>
</resources>

Aplicando los estilos al perfil:

xmlCopy<?xml version="1.0" encoding="utf-8"?>

<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"
android:background="@color/fondoClaro">

<!-- Título usando estilo -->

<TextView
style="@style/TituloGrande"
android:text="Mi Perfil"/>
 <!-- Campo de entrada con estilo -->
<EditText
style="@style/CampoEntrada"
android:hint="Nombre completo"/>

<!-- Botón con estilo -->

<Button
style="@style/BotonPrimario"
android:text="Actualizar Perfil"/>

<!-- Texto con color personalizado -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Información adicional"
android:textColor="@color/textoSecundario"/>

</LinearLayout>

También pueden aplicar colores directamente:

xmlCopy<Button
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="Botón Especial"
android:textColor="@color/fondoClaro"
android:backgroundTint="@color/colorAccent"/>

ACTIVIDAD DE ENTREGA 02 ### 🎯 Ejercicios Nivel 2:

Primero, crea/edita el archivo de estilos en res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Estilo para títulos -->
<style name="TituloFormulario">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">24sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#2196F3</item>
<item name="android:gravity">center</item>
<item name="android:layout_marginBottom">24dp</item>
</style>

<!-- Estilo para etiquetas -->

<style name="EtiquetaCampo">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#333333</item>
<item name="android:layout_marginBottom">8dp</item>
</style>

<!-- Estilo para campos de entrada -->

<style name="CampoEntrada">
<item name="android:layout_width">match_parent</item>
 <item name="android:layout_height">48dp</item>
<item name="android:padding">8dp</item>
<item name="android:background">#F5F5F5</item>
<item name="android:layout_marginBottom">16dp</item>
</style>

<!-- Estilo para botón principal -->

<style name="BotonPrincipal">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:backgroundTint">#2196F3</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:textStyle">bold</item>
</style>
</resources>

Segundo aplicamos los estilos al layout:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">

<!-- Título con estilo -->

<TextView
Ti style="@style/TituloFormulario"
android:text="@string/titulo_formulario"/>

<!-- Nombre -->

<TextView
style="@style/EtiquetaCampo"
android:text="@string/etiqueta_nombre"/>

<EditText
style="@style/CampoEntrada"
android:hint="@string/hint_nombre"
android:inputType="textPersonName"/>

<!-- Email -->

<TextView
style="@style/EtiquetaCampo"
android:text="@string/etiqueta_email"/>

<EditText
style="@style/CampoEntrada"
android:hint="@string/hint_email"
android:inputType="textEmailAddress"/>
 <!-- Botón con estilo -->
<Button
style="@style/BotonPrincipal"
android:text="@string/btn_registrar"/>

</LinearLayout>
</ScrollView>

Bendiciones!!