Seguro que te preguntas cómo puedes empezar a dar una apariencia más personalizada a las pantallas en Android.

En este vídeo damos un repaso en profundidad a todas las opciones que tenemos para definir temas y estilos, además de cuál prevalece sobre cada uno cuando dos propiedades se definen en sitios distintos.

Cuando queremos una App de Android podemos definir qué apariencia queremos que tenga, por ejemplo, en función de los colores de la marca o de los diseños que se hayan definido para esa aplicación, y todo ello tiene una forma muy específica dentro de Android hacerlo.

Al principio cuesta un poco cogerle el truco a los estilos en Android, pero ya verás como muy pronto lo tienes dominado.

Los temas tratados hoy son:

• Tema de aplicación
• Tema de activity
• Tema de vista
• Estilo de vista
• TextAppearance
• Prioridades y herencia

Aquí debajo te dejo el vídeo, y no te olvides de suscribirte al canal de YouTube para no perderte nada:

¿Qué es un tema en Android?

Antes de iniciar hay que saber diferenciar entre un Tema y un Estilo. El tema se aplica a una jerarquía de vistas. Estos contienen atributos o configuraciones que aplican a todos los elementos de la interfaz de usuario.

Un tema es un estilo que se propaga de padres a hijos. A partir de la versión 4.1 cambia los recursos del tema están en res/values/themes/themes.xml (en lugar de res/values/styles.xml) y usan los nombres Theme. <ApplicationName>. el siguiente ejemplo te ayudará a ver cómo funciona:

En el Android Studio 4.2.2 se vera de esta manera

Como se observa en el código que teníamos anteriormente en el que creamos un formulario que teníamos un email, teléfono, una contraseña y luego el botón de enviar; se puede apreciar que hay ciertos estilos aplicados por defecto que son:

• El color del toolbar.

• El color de la barra de estado (status bar) de encima del toolbar que es ligeramente más oscuro que el del toolbar.

• El color de texto y separadores del formulario.

• El color del botón

Cuando nosotros queremos aplicar un tema específico para toda la app, iremos al archivo “AndroidManifest.xml” en App/manifests/ AndroidManifest.xml y una vez allí indicaremos que el tema de la aplicación será “@style/Theme.AndroidDesdeCero”, tal como se aprecia en la imagen de abajo:

Este es un tema que viene creado por defecto. La librería de AppCompat de Android se sustituirá por la de MaterialComponents. Los temas de la aplicación base utilizan como padres a DayNight y se dividen entre res/values y res/values-night. Teniendo en cuenta que la línea de XML también especifica un tema principal, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight es un tema predefinido en la biblioteca de componentes de Material. DarkActionBar significa que la barra de acciones utiliza un color oscuro. Así como una clase hereda atributos de la clase superior, un tema hereda atributos del tema superior. Por defecto va a utilizar el tema claro como se aprecia en la imagen:

Esto se puede modificar sin ningún problema, por ejemplo si vamos a Settings>Display y activamos “Dark theme” en nuestro dispositivo virtual veras que el tema deja de ser fondo blanco y cambia a modo oscuro.

También podemos ver el modo oscuro si vamos a MainActivity.xml y vamos al editor visual y ver los cambios del tema oscuro sin necesidad de ejecutar nuestro dispositivo.

Estos estilos se denominan material porque es el diseño que creó Google para las aplicaciones Android en particular, pero además, para todo su ecosistema de apps, en una serie de estilo que seguro ha visto en todas las app Google y que seguro has visto en diferentes dispositivos y es porque Google quería dar una imagen homogénea a todos.

No todos los atributos del tema de color están definidos. Los colores que no estén definidos heredarán el color del tema superior. Ten en cuenta que los colores se especifican como recursos de color (se les asigna un nombre en un archivo); por ejemplo, @color/purple_500, en lugar de usar directamente un valor RGB.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Si quisieras cambiar los colores que tienes, solo tendrías que ir al recurso de colores colors.xml (app > res > values > colors.xml). Verás los valores hexadecimales para cada recurso de color. Recuerda que el valor #FF inicial es el valor alfa y significa que el color es 100% opaco. colors.xml. modificarlo e ir al diseñador para ver ejecutarlo para poder ver los cambios.

Ya está, el control de esos colores hará que los componentes básicos cambien de color, es muy sencillo modificar un componente básico sin meternos en muchos líos, y ahora que estás empezando te recomiendo que no quieras apresurarte a modificar los temas y mejor te bases en los estándares que ya el tema nos ofrece porque de esa forma avanzarás mucho más rápido.

Imaginemos ahora que lo que queremos es tener un estilo/tema que sea específico de una Activity en particular, si recuerdas el video que vimos sobre Activitys, estas son cada una de las pantallas de nuestra aplicación y cada pantalla puede necesitar un estilo distinto.

Vamos a probar darle un estilo diferente a la pantalla que tenemos actualmente.

Imaginemos que queremos otro estilo que lo vamos a llamar MyActivityTheme y lo que queremos es que nuestro colorPrimary utilice el @color/teal_700 para que nuestra toolbar cambie su color de morada a azul. Para ello tenemos que ir a themes.xml (app > res > values > themes) y debajo de nuestro tema actual abriremos una etiqueta <style name=”Theme.MyActivityTheme” parent=”Theme.AndroidDesdeCero“>. El parent lo que quiere decir es que vamos a heredar las características de nuestro tema padre que es AndroidDesdeCero.

Luego vamos al AndroidManifest.xml y agregamos nuestro tema como en la imagen.

Para que no nos de ningún problema tenemos que especificar de quien esta heredando, si de AndroidDesdeCero o de un tema base.

Ya una vez aplicados los cambios le vamos a dar en “run app” en nuestra barra

es el siguiente icono

Nos debería mostrar el cambio de tema.

Recuerda que dentro de los temas siempre hay una jerarquía y que va a haber algunos que apliquen por encima de otros. De momento llevamos el tema de aplicación y el tema de activitys. Si una activity define un tema propio ese sobre escribe al tema que hayamos definido en el aplication.

Como cambiar el tema de un componente de la vista

Imaginemos que queremos cambiar el tema de un componente de la vista, vamos al activitymain y lo que queremos es que todas las vistas dentro del LinearLayout aplique un tema en especial, para ello podemos buscar el atributo theme del LinearLayout

Si le damos en them veremos que nos deja elegir los temas que tenemos en el aplication o todos los temas que nos dan las librerías asignadas

Para este formulario queremos que todos los campos de adentro tenga un tema en específico, por ejemplo que el color colorPrimaryVariant que habíamos visto antes que era azul, que ahora sea rojo. Si nos vamos a app>res>values>themes.xml, podemos poner un nuevo tema que tendrá como nombre Form y extendera de AndroidDesdeCero.

Ahora vamos a los atributos del LinearLayout y en el atributo theme elegimos el tema que acabamos de crear.

Si ejecutamos los cambios que acabamos de hacer, todos los campos y todas las vistas que estén dentro de esa vista padre se le va aplicar el tema que le hayamos especificado a la vista padre, pero ¿Qué pasa si en vez de aplicárselo a todos los elementos de la vista padre solo se lo queremos aplicar a un solo elemento? podemos decirle que en vez de aplicar el tema a la vista lo haga al elemento en concreto que queremos yendo a los atributos de ese elemento y aplicando el tema.

¿Qué es un estilo en Android?

El estilo solo se aplica a la vista en la que se lo estemos indicando. Mientras que los temas tienen unos atributos genéricos, cada vista puede tener una serie de estilos específicos que hagan que esa vista se muestre de una forma u otra.

Si nos vamos al atributo style de uno de los campos en nuestra vista veremos que esta utilizando uno por defecto que se llama Widget.AppCompat.EditText Buscamos el Widget.AppCompat.EditText y lo copiamos para usarlo en uno de los estilos.

Vamos a crear un nuevo estilo en App>res>values>themes.xml y haremos que los textos en el EditText estén centrados. Esto ahora vamos y se lo aplicamos al campo Phone, exclusivamente en los atributos.

Nos debería mostrar mostrar en la preview el cambio sin necesidad de ejecutar la app.

Si queremos aplicar esos estilos de EditText para el tema completo vamos al App>res>values>themes.xml y definiremos dentro de AndroidDesdeCero nuestros estilos para los campos de la siguiente manera:

TextAppearance

Entre los componentes que tienen texto como puede ser un botón, un EditText, un TextView tenemos todavía otro estilo extra que nos permite definir cómo va a ser la apariencia del texto (TextAppearance). Antes que nada agregaremos otro estilo y se lo asignaremos al campo Phone para ver que sucede.

<style name="TextAppearance.AndroidDescdeCero.Alert" parent="TextAppearance.AppCompat.Button">
    <item name="android:textColor">#FF0000</item>
</style>

Si queremos que tenga el tamaño que tiene en el resto de los campos lo que tendríamos que hacer es extender de medium en vez de button.

Aplicando el siguiente estilo como hemos visto con anterioridad.

<style name="TextAppearance.AndroidDescdeCero.Alert" parent="TextAppearance.AppCompat.Medium">
    <item name="android:textColor">#FF0000</item>
</style>

Veremos que todos vuelven a estar del mismo tamaño

En la parte de los atributos del campo Phone podríamos buscar el atributo TextAppearance para probar los distintos tamaños que se le pueden aplicar a los de los campos.

Orden de prioridad de los estilos

Si siguiéramos el orden de prioridad visto hasta ahora:

• El menos prioritario seria el tema de la aplication.
• El tema de la activity.
• El tema de la clase padre si es que le hemos aplicado algún tema en específico.
• El tema de la propia clase.
• El tema de la vista padre.
• El tema de la vista.
• El estilo de la vista.
• El TextAppearance de la vista.
• Iría en ese orden si ponemos algo sobre el TextAppearance sobrescribiría todo lo anterior.

Ten en mente que los estilos se van configurando en cascada.