Elementos de UI Android - Proyecto Educativo

Este proyecto es una aplicación Android educativa que demuestra el uso de diferentes elementos de interfaz de usuario (UI) mediante fragments interactivos.

📱 Descripción

La aplicación contiene una MainActivity principal con navegación por tabs que permite acceder a 5 fragments diferentes, cada uno enfocado en explicar y demostrar un tipo específico de elemento de UI de Android.

🎯 Fragments Incluidos

1. Fragment TextFields

• Ubicación: app/src/main/java/com/example/hw1/fragments/TextFieldsFragment.kt
• Layout: app/src/main/res/layout/fragment_textfields.xml
• Funcionalidad:
  • Demuestra diferentes tipos de EditText
  • Incluye campos para nombre, email, contraseña y texto multilínea
  • Botón para mostrar el resultado de todos los campos ingresados

2. Fragment Botones

• Ubicación: app/src/main/java/com/example/hw1/fragments/ButtonsFragment.kt
• Layout: app/src/main/res/layout/fragment_buttons.xml
• Funcionalidad:
  • Muestra diferentes tipos de botones (Normal, Outlined, Text, ImageButton, FAB)
  • Cada botón muestra un mensaje cuando es presionado
  • Demuestra las diferentes variantes de Material Design

3. Fragment Elementos de Selección

• Ubicación: app/src/main/java/com/example/hw1/fragments/SelectionFragment.kt
• Layout: app/src/main/res/layout/fragment_selection.xml
• Funcionalidad:
  • CheckBoxes para selección múltiple
  • RadioButtons para selección única
  • Switches para activar/desactivar opciones
  • Muestra en tiempo real las selecciones del usuario

4. Fragment Listas

• Ubicación: app/src/main/java/com/example/hw1/fragments/ListsFragment.kt
• Layout: app/src/main/res/layout/fragment_lists.xml
• Funcionalidad:
  • Implementa RecyclerView con adapter personalizado
  • Muestra lista de elementos con iconos y descripciones
  • Responde a clicks en los elementos de la lista
  • Adapter: app/src/main/java/com/example/hw1/adapters/ItemAdapter.kt
  • Layout del item: app/src/main/res/layout/item_list.xml

5. Fragment Elementos de Información

• Ubicación: app/src/main/java/com/example/hw1/fragments/InfoElementsFragment.kt
• Layout: app/src/main/res/layout/fragment_info_elements.xml
• Funcionalidad:
  • TextView para mostrar texto
  • ImageView para mostrar imágenes
  • ProgressBar horizontal y circular
  • Demostración interactiva de progreso con botones de control

🏗️ Estructura del Proyecto

app/
├── src/main/
│   ├── java/com/example/hw1/
│   │   ├── MainActivity.kt                 # Actividad principal con navegación
│   │   ├── fragments/                      # Directorio de fragments
│   │   │   ├── TextFieldsFragment.kt      # Fragment de campos de texto
│   │   │   ├── ButtonsFragment.kt         # Fragment de botones
│   │   │   ├── SelectionFragment.kt       # Fragment de elementos de selección
│   │   │   ├── ListsFragment.kt           # Fragment de listas
│   │   │   └── InfoElementsFragment.kt    # Fragment de elementos informativos
│   │   └── adapters/
│   │       └── ItemAdapter.kt             # Adapter para RecyclerView
│   └── res/
│       ├── layout/                        # Layouts XML
│       │   ├── activity_main.xml          # Layout principal con TabLayout
│       │   ├── fragment_textfields.xml    # Layout del fragment de texto
│       │   ├── fragment_buttons.xml       # Layout del fragment de botones
│       │   ├── fragment_selection.xml     # Layout del fragment de selección
│       │   ├── fragment_lists.xml         # Layout del fragment de listas
│       │   ├── fragment_info_elements.xml # Layout del fragment de información
│       │   └── item_list.xml              # Layout para elementos de lista
│       └── values/
│           └── strings.xml                # Strings en español

🚀 Características Técnicas

Dependencias Utilizadas

• ViewBinding: Para acceso seguro a las vistas
• Fragment Navigation: Navegación entre fragments
• Material Design Components: Para UI moderna
• RecyclerView: Para listas eficientes
• ConstraintLayout: Para layouts flexibles

Funcionalidades Implementadas

• ✅ Navegación por tabs funcional
• ✅ 5 fragments completamente interactivos
• ✅ Demostraciones prácticas de cada elemento UI
• ✅ Texto completamente en español
• ✅ Diseño Material Design
• ✅ Manejo de eventos de usuario
• ✅ Feedback visual para todas las interacciones

🎨 Elementos de UI Demostrados

Elemento	Fragment	Descripción
EditText	TextFields	Entrada de texto con diferentes tipos (texto, email, contraseña, multilínea)
Button	Botones	Botones normales, outlined, de texto, con imagen y FAB
CheckBox	Selección	Selección múltiple de opciones
RadioButton	Selección	Selección única entre opciones
Switch	Selección	Activar/desactivar funcionalidades
RecyclerView	Listas	Lista eficiente con adapter personalizado
TextView	Información	Mostrar texto informativo
ImageView	Información	Mostrar imágenes
ProgressBar	Información	Barras de progreso horizontal y circular

📦 Instalación y Ejecución

1. Abrir el proyecto en Android Studio
2. Sincronizar las dependencias Gradle
3. Compilar el proyecto: Build > Make Project
4. Ejecutar en dispositivo o emulador

🎯 Objetivo Educativo

Este proyecto sirve como guía práctica para aprender:

• Implementación de fragments en Android
• Navegación entre fragments usando TabLayout
• Uso correcto de ViewBinding
• Implementación de diferentes elementos de UI
• Manejo de eventos de usuario
• Diseño con Material Design Components

Cada fragment incluye explicaciones claras y ejemplos interactivos que permiten al usuario experimentar directamente con los elementos de UI de Android.