Android desde Cero: Creando Estilos y Temas

Como desarrolladores Android, tenemos la tendencia a concentrarnos primordialmente en la funcionalidad de nuestras aplicaciones. La funcionalidad, sin embargo, raras veces es suficiente. En Google Play, la cual hospedad bien más de un millón de aplicaciones hoy en día, las apariencias son tan importantes como la funcionalidad, y aún más. Si cree que es muy difícil de creer, le sugiero que eche un vistazo a las aplicaciones en la sección Top Charts de Google Play.

Hay dos métodos para modificar la apariencia de las aplicaciones Android. El primer método involucra directamente modificar las propiedades de vistas en la composición de los archivos XML. Este enfoque es factible solamente si está trabajando en una aplicación sencilla que tiene un número pequeño de vistas y actividades. El segundo método implica la creación y uso de estilos y temas personalizados. Si está familiarizado con el desarrollo web, el primer enfoque es parecido a usar estilos en línea CSS, y el segundo método es parecido a usar hojas de estilos.

En este tutorial, aprenderá cómo crear estilos y temas personalizados para sus aplicaciones Android. También aprenderá cómo usar las herramientas de Android Studio y los atajos del teclado que facilitan la creación de estilos.

1. Creación de Estilos

Los estilos, obviamente, son aplicados a los componentes de la interfaz de usuario. Por lo tanto, vamos a iniciar creando un nuevo activity y añadiremos dos vistas a su composición de archivo XML.

1

<View android:layout_width="100dp"

2

    android:layout_height="100dp"

3

    android:layout_margin="5dp"

4

    android:background="#009688"

5

    android:id="@+id/box1" />

6

7

<View android:layout_width="100dp"

8

    android:layout_height="100dp"

9

    android:background="#00BCD4"

10

    android:layout_margin="5dp"

11

    android:id="@+id/box2" />

Como puede apreciar en el código anterior, las propiedades tales como layout_width y layout_margin están explicitamente incluidas en la definición de cada vista.

Para crear nuevos estilos  para la primera vista, clic-derecho sobre él y seleccione: Refactor > Extract > Style.

Ahora verá una caja de diálogo donde puede darle un nombre al estilo y, también, seleccionar los atributos que deberían ser incluidos. Deje que el nombre sea MyBox y seleccione todos los atributos con excepción de background.

Cuando presione OK, verá que el código para la primera vista a cambiado.

1

<View android:background="#009688"

2

    android:id="@+id/box1"

3

    style="@style/MyBox" />

Ahora la vista tiene un atributo style que apunta al estilo MyBox. Puede ver la definición de los estilos al abrir el siguiente archivo: res/values/styles.xml.

1

<style name="MyBox">

2

    <item name="android:layout_width">100dp</item>

3

    <item name="android:layout_height">100dp</item>

4

    <item name="android:layout_margin">5dp</item>

5

</style>

Una vez que un estilo ha sido creado, éste puede ser aplicado a cualquier vista. Por ejemplo, así es como aplicaría MyBox a la segunda vista:

1

<View android:background="#00BCD4"

2

    android:id="@+id/box2"

3

    style="@style/MyBox" />

Con los estilos aplicados, así es como las dos vistas lucirían en un activity:

2. Extendiendo los Estilos

Android te permite crear estilos que usan otros estilos como base. En otras palabras, le permite ampliar los estilos existentes.

Hay dos diferentes sintaxis que puede seguir mientras amplia un estilo. La primera sintaxis es llamada, a menudo, la sintaxis implícita y usa una notación de punto. Por ejemplo, así es cómo usted crearía dos estilos variados, llamados TEAL y CYAN, usando MyBox como el estilo principal:

1

<style name="MyBox.TEAL">

2

    <item name="android:background">#009688</item>

3

</style>

4

5

<style name="MyBox.CYAN">

6

    <item name="android:background">#00BCD4</item>

7

</style>

Como podría haber adivinado, tanto MyBox.TEAL como MyBox.CYAN, tienen todas las propiedades de MyBox. Además de eso, tienen la propiedad android:background.

La segunda sintaxis para crear un estilo derivado es, por lo general, con referencia a la sintaxis explícita. Esta implica usar un atributo parent cuyo valor está ajustado para el nombre del estilo principal. Este es el fragmento de código que define un estilo llamado TealBox.

1

<style name="TealBox" parent="MyBox">

2

    <item name="android:background">#009688</item>

3

</style>

Aplicando estilos derivados no es tan diferente de aplicar estilos de forma normal.

1

<View android:id="@+id/box1"

2

    style="@style/TealBox" />

3

4

<View android:id="@+id/box2"

5

    style="@style/MyBox.CYAN" />

La mayoría de los desarrolladores usan la sintaxis implícita debido a que amplia sus propios estilos, y la sintaxis explícita amplia lo estilos de la plataforma.

3. Creando Temas

Aunque todo esto sucede, sin embargo, solamente hemos estado aplicando estilos a vistas que están dentro de un activity. Android, también le permite aplicar estilos a activities y aplicaciones enteras. Cuando un estilo es aplicado a una activity o a una aplicación, éste se convierte en un tema.

Por defecto, todas las aplicaciones creadas utilizando la última versión de Android Studio usan un tema llamado AppTheme. AppTheme, es un descendiente del bien conocido tema; AppCompat, un tema más grande y muy comprehensivo que puede afectar la apariencia de casi todas las vistas comúnmente utilizadas.

Puede encontrar la definición de AppTheme en styles.xml.

1

<!-- Base application theme. -->

2

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

3

    <item name="colorPrimary">@color/colorPrimary</item>

4

    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

5

    <item name="colorAccent">@color/colorAccent</item>

6

</style>

AppTheme cumple Material Design. Por lo tanto, para crear sus propios temas que conforman para las especificaciones de Material Desing, usando AppTheme como un controlador, siempre será una buena idea. De forma alternativa, usted podría usar Theme.AppCompat como un controlador.

Aunque siempre puede crear temas escribiendo código XML —recuerde, son sólo estilos— en éste tutorial, le estoy mostrando cómo usar el editor de temas de Android Studio: Theme Editor para que haga todo el trabajo duro por usted.

Para abrir el Theme Editor, abra el menú Tools y seleccione Android > Theme Editor.

Al lado derecho de la ventana del Theme Editor, usted tiene controles no solamente para modificar temas, sino también para crear nuevos estilos. Al lado izquierdo le muestra una vista previa de los resultados de las modificaciones que usted hace a los temas.

Para crear un nuevo tema, haga clic sobre el menú desplegable Theme y seleccione la opción Create New Theme.

En la caja de diálogo que aparece, ajuste el nombre del nuevo tema a MyTheme y presione OK.

En este punto, styles.xml tendrá una nueva línea que lucirá así:

1

<style name="MyTheme" parent="AppTheme" />

Ahora modificaremos MyTheme usando el Theme Editor. Para que sea sencillo, en éste tutorial modificaremos solamente los valores de los atributos colorPrimary, colorPrimaryDark y colorAccent.

Para modificar los valores de colorPrimary, haga clic sobre el botón colorPrimary. Ahora, el Theme Editor le mostrará una caja de diálogo que contiene un selector de color. Escoja cualquier color que usted quiera, pero asegúrese que le ha dado un nombre nuevo. Si olvido como hacer eso, el Theme Editor escribirá sobre el color usado por AppTheme.

Siga los mismos pasos para modificar los valores de colorPrimaryDark y colorAccent. El Theme Editor, usará automáticamente el color que usted escogió por colorPrimary para sugerir los colores apropiados tanto para colorPrimaryDark como para colorAccent.

La definición de MyTheme ahora luciría así:

1

<style name="MyTheme" parent="AppTheme" >

2

    <item name="colorPrimary">@color/colorPrimaryMyTheme</item>

3

    <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>

4

    <item name="colorAccent">@color/colorAccentMyTheme</item>

5

</style>

4. Aplicando Temas

Antes de aplicar el tema que creamos, vamos a añadir algunas vistas usadas comúnmente por la clase activity. Al hacer esto será más fácil para nosotros observar los efectos del tema.

El siguiente código crea un Button normal, un Button sin cortorno, un Button coloreado, un Checkbox, un RadioButton, un Switch, un Seekbar, un TextView y un EditText.

1

<Button android:layout_width="match_parent"

2

    android:layout_height="wrap_content"

3

    android:text="normal"

4

    android:id="@+id/normal_button" />

5

6

<Button android:layout_width="match_parent"

7

    android:layout_height="wrap_content"

8

    android:text="borderless"

9

    android:id="@+id/borderless_button"

10

    style="@style/Widget.AppCompat.Button.Borderless" />

11

12

<Button android:layout_width="match_parent"

13

    android:layout_height="wrap_content"

14

    android:text="colored"

15

    android:id="@+id/colored_button"

16

    style="@style/Widget.AppCompat.Button.Colored" />

17

18

<CheckBox android:layout_width="match_parent"

19

    android:layout_height="wrap_content"

20

    android:text="New CheckBox"

21

    android:id="@+id/checkBox" />

22

23

<RadioButton android:layout_width="match_parent"

24

    android:layout_height="wrap_content"

25

    android:text="New RadioButton"

26

    android:id="@+id/radioButton" />

27

28

<Switch android:layout_width="match_parent"

29

    android:layout_height="wrap_content"

30

    android:text="New Switch"

31

    android:id="@+id/switchButton" />

32

33

<SeekBar android:layout_width="match_parent"

34

    android:layout_height="wrap_content"

35

    android:id="@+id/seekBar" />

36

37

<TextView android:layout_width="match_parent"

38

    android:layout_height="wrap_content"

39

    android:text="New Text"

40

    android:id="@+id/textView" />

41

42

<EditText android:layout_width="match_parent"

43

    android:layout_height="wrap_content"

44

    android:id="@+id/editText"

45

    android:hint="Input" />

Con todas las vistas recién añadidas, la composición lucirá así:

Si ha leído las especificaciones de Material Design, estoy seguro que sabe que el activity actual usa tonos del color indigo para el colorPrimary y colorPrimaryDark. Para colorAccent, éste usa un tono rosado. Estos son los colores por defecto especificado por Android Studio. Puede encontrar sus valores hexadecimales en los archivos res/values/colors.xml de su proyecto.

Para aplicar MyTheme, es decir, el tema que creamos en el paso anterior, a su activity, abra el archivo de manifiesto de su proyecto y añada un atributo android:theme a la definición activity. Ajuste su valor a @style/MyTheme.

1

<activity android:name=".MainActivity"

2

    android:theme="@style/MyTheme">

3

    <intent-filter>

4

        <action android:name="android.intent.action.MAIN" />

5

        <category android:name="android.intent.category.LAUNCHER" />

6

    </intent-filter>

7

</activity>

De manera similar, puede aplicar el tema a toda su aplicación por medio de ajustar el valor del atributo android:theme de la definición de la aplicación a @style/MyTheme.

Si ahora da un vistazo a su activity, ésta debería lucir muy diferente.

En conclusión.

En este tutorial, aprendió a cómo crear y aplicar estilos y temas personalizados en Android. Siéntase libre de usar éste conocimiento para darle; una nueva y mejor apariencia a sus aplicaciones. No obstante, pruebe no usar demasiadas —la mayoría de los usuarios Android de hoy están tan acostumbrados a Material Design que apartan sus normas que puede molestarles.

Para aprender más sobre los estilos y temas, le sugiero revisar la Guía de Estilos y Temas.