Estilos en Android: Creación y Aplicación en Elementos de UI

Curso Básico de Diseño de Interfaces con Android Studio

Contenido del curso

Introduccion

1
Creación de Interfaces de Usuario en Android con XML
03:39 min

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

20
Estilos y Atributos en XML: Curso Completo
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:04

Estilos en Android: Creación y Aplicación en Elementos de UI

Curso Básico de Diseño de Interfaces con Android Studio

Clase 15 de 20

Clase 15 / 20

Recursos

¿Qué son los estilos en Android y por qué son importantes?

El uso de estilos en Android es esencial para mantener la coherencia visual y optimizar el rendimiento de la aplicación. Los estilos son conjuntos de características visuales que se pueden reutilizar en diferentes elementos de la interfaz de usuario, como el ancho, el alto o el tamaño del texto. Al definir estilos, Android puede reciclar recursos, eliminando la necesidad de recalcularlos cada vez. Esto no solo facilita la legibilidad del código, sino que también mejora el rendimiento de la aplicación.

¿Cómo crear estilos en Android?

Para crear un estilo, primero es necesario abrir el archivo styles.xml dentro de la carpeta de recursos res/values. Este archivo es el lugar donde se definen los estilos. Android proporciona algunos estilos predeterminados, pero es posible agregar los propios creando una nueva etiqueta <style> con un nombre asignado.

Uso de estilos padres e hijos

Los estilos padres contienen características comunes que se aplican a varios elementos.
Los estilos hijos heredan de los estilos padres y pueden agregar características específicas.

Por ejemplo, para los campos de texto que utilizan el estilo EditText, se puede crear un estilo específico EditTextStyle. Este estilo puede heredar de un estilo global ya definido, al igual que ocurre con la herencia en la programación.

Aplicación de estilos en la interfaz

Para aplicar un estilo en un elemento, hay que añadir el atributo style al elemento en el archivo de diseño layout correspondiente. Al hacerlo, las propiedades del estilo se reflejarán automáticamente cuando se visualice el diseño.

Ejemplo básico de definición de estilo y aplicación:

<!-- styles.xml -->
<resources>
    <style name="BaseEditTextStyle">
        <item name="android:textSize">16sp</item>
    </style>

    <style name="CustomEditTextStyle" parent="BaseEditTextStyle">
        <item name="android:padding">12dp</item>
    </style>
</resources>

<!-- layout.xml -->
<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/CustomEditTextStyle" />

Evitando conflictos y optimizando el uso de estilos

Hay que tener cuidado con las propiedades que no pueden ser aplicadas de manera global. Por ejemplo, el color de acento (colorAccent) no es una propiedad genérica que pueda aplicarse a todos los elementos, a diferencia de android:textSize. Cuando una propiedad no se refleja en el diseño, puede ser necesario aplicarla directamente en cada elemento.

Prácticas recomendadas:

Mantener consistencia utilizando estilos para características globales.
Para características individuales, como márgenes, añadirlas directamente al elemento.
Evaluar la aplicabilidad de cada propiedad del estilo para evitar conflictos.

Los estilos en Android no solo mejoran la coherencia visual, sino que también ofrecen la flexibilidad necesaria para personalizar elementos según las necesidades específicas. Continuar explorando y practicando el uso de estilos es clave para desarrollar aplicaciones Android eficaces y visualmente agradables.

Andres López

Hace 6 años

Apuntes de la Clase:

Un estilo permite especificar el diseño visual de una aplicación de manera de que los estilos puedan ser reutilizados por diferentes elementos.

Agregar estilos a una aplicación.

El archivo con los estilos se encuentra en Android > app > res > values > styles.xml

Para crear un estilo se usa el tag <style> y se le asigna un nombre.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.EditTextStyle" parent="AppTheme">
        <item name="android:textSize">16sp</item>
    </style>
</resources>

Lo normal al usar estilos es crear primero tomar las características más comunes y ponerlas en un estilo padre y luego crear estilos hijo para las características especificas, algo similar a lo que ocurre con la herencia en POO.

Aplicar estilos a una aplicación

<EditText
	style="@style/AppTheme.EditTextStyle" />

Comentarios (17)17 comentarios

Daniel Gmez Rico

Rodrigo Rodriguez

Hace 5 años

Matias scandizzo

Andres Urrego

Pablo César Silva Espinoza

Hace 4 años

Denis Morales

Hace 7 años

Emilio Rafael Vera Maldonado

David Campos

Ricardo Celis

Profesor

KEPLER GARCIA

DIANA ESPERANZA CHIRIVI AMAYA

Hace 2 años

juan morado

Derlis Aguilar

ERIKA ALEXANDRA GARCIA BARRIOS

Valeria Calcina Cisneros

Guadalupe Giovanni Hernández Medina

Jean Nuñez

Christian Gómez

Jair Renato Nieto Moreno

Enrique Rabell Talamantes

Introduccion

Creación de Interfaces de Usuario en Android con XML

Revisando los archivos para una UI

Instalación de Android Studio para Desarrollo de Apps

Creación y gestión de proyectos en Android Studio

Creando una UI

Diseño de Interfaces en Android Studio: Herramientas y Técnicas

Gestión de Vistas y Recursos en Android Studio

Widgets y Vistas

Vistas y ViewGroups en Android: Diferencias y Uso Práctico

Atributos de Layout en Android: Width y Height

Atributos de Diseño y Referencias en Android Studio

Layouts base

Alineación de elementos con LinearLayout en Android

Diseño de Interfaces con RelativeLayout en Android

Diseño de Interfaces con Layout Relativo en Android

Uso de FrameLayout para Organizar Elementos en Android

Diseño de Interfaces con FrameLayout en Android Studio

Diseño de Interfaces con ConstraintLayout en Android Studio

Estilos y temas

Estilos en Android: Creación y Aplicación en Elementos de UI

Temas y Estilos en Android: Personalización Global de la App

Gestión de Dimensiones y Estilos en Android XML

Extendiendo los widgets

Integración de Librerías Externas en Proyectos Android

Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Cierre

Estilos y Atributos en XML: Curso Completo

Estilos en Android: Creación y Aplicación en Elementos de UI

Progreso del curso

Introduccion

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

Recursos

Recursos