Estilos e temas

Introdución

• Os estilos, o mesmo que pasa en CSS, permiten definir unhas características visuais para view´s e windows´s, e agrupalas cun identificador o cal pode ser usado por diferentes compoñentes para que todos teñan o mesmo aspecto.

Un tema (theme) é aplicado a unha activity enteira (os seus elementos gráficos) mentres que un estilo é aplicado a compoñentes individuais.

• Os estilos permiten definir unhas características visuais para as vistas e agrupalas cun identificador que pode ser usado por diferentes compoñentes para que todos teñan o mesmo aspecto.
• Un tema (theme) é aplicado a unha activity enteira (os seus elementos gráficos)
• Un estilo é aplicado a compoñentes individuais.

• Para definir un estilo temos que crear no cartafol /res/values/ un arquivo xml cun recurso (<resource></resource>) e dentro deste definiremos os estilos <style></style>.

• O elemento <style> terá que ter un nome para poder asocialo os elementos gráficos.

Ademais, pode ter un atributo 'parent' no que indicamos de onde herda a aparencia (igual que ocorre en CSS podemos ter varios ‘niveis’ de herdanza’).

Aínda que non é obrigatorio, se recomenda que sempre se herda dalgún compoñente xa creado ou do estilo do propio S.O. para eses compoñentes e que despois se modifiquen ou engadan novas propiedades.

Por exemplo:

1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
2     <style name="style_caixas" parent="@android:style/TextAppearance ">
3         <item name="android:layout_width">wrap_content</item>
4         <item name="android:layout_height">wrap_content</item>
5         <item name="android:textColor">@android:color/holo_blue_dark</item>
6     </style>
7     
8 </resources>

• Cando creamos un novo proxecto, Android Studio asina un aspecto concreto a todas as activities que se cren.

Dito aspecto está definido no arquivo AndroidManifiest.xml

• Estilo a nivel global (todo o proxecto)
• 

  Sitio no AndroidManifiest.xml onde está definido o estilo a aplicar. Fixarse que se fai referencia a unha constante definida nun arquivo de recursos.

• 

  Arquivo de recursos onde está definido el estilo. Podemos ver que 'deriva' dun dos estilos que xa 'trae' o S.O. Android.

• A nivel de deseño de Activities, podemos 'ver' como quedaría un determinado estilo no deseño do layout (realmente non cambiamos nada, soamente visualizamos como quedaría a activity):

• Estilo a nivel global (todo o proxecto)
• 

  Escollemos o estilo empregado no manifiesto.

• 

  Neste caso temos o estilo: android:Theme.Holo.Light.DarkActionBar.

• 

  Cambiamos o estilo por un que non teña AppBar.

• 

  Podemos observar a diferenza. Lembra que non estamos cambiando nada. Se executas a activity visualizarase como estaba antes.

• Referencias:
  • Estilos e temas: http://developer.android.com/guide/topics/ui/themes.html

Estilos a nivel xeral ou de activity

• Como comentamos antes, podemos aplicar un estilo a:

• Todas as activities de todo o proxecto.
• Unha activity concreta.
• A un View concreto.

• O primeiro caso xa vimos que se pode facer no arquivo AndroidManifiest.xml, cambiando a propiedade 'parent' do estilo AppTheme:

1 <resources>
2 
3     <!-- Base application theme. -->
4     <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
5         <!-- Customize your theme here. -->
6     </style>
7 
8 </resources>

Nota: Se prememos Control+Barra espaciodora no sitio onde está o valor do theme, se despregan todos os posibles:

Neste caso se despregan todos os themes que hai a nivel de S.O. Aparecen os que podemos aplicar a nivel de proxecto/activity e tamén outros que se poden aplicar a widget concretos (o veremos máis adiante).

A diferencia dos estilo aplicados ós view´s, cando aplicamos un estilo nun theme, este estilo se aplicará a todos os view´s da aplicación que soporten dita propiedade. Se non a soportan non lle farán caso.

Existen atributos que non afectan a un elemento gráfico, se non a toda a aplicación, coma pode ser unha imaxe de fondo, o título da aplicación,...Estas propiedades se atopan no enlace seguinte e comezan con window coma por exemplo windowNoTitle ou windowBackground.

1 <resources>
2     <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
3         <!-- Customize your theme here. -->
4         <item name="android:windowNoTitle">true</item>
5     </style>
6 </resources>

Se executamos agora calquera activity, non terá barra de título:

• Se queremos aplicar un theme específico a unha Activity podemos ir ao arquivo AndroidManifiest.xml:

1 <activity android:theme="@android:style/nome_estilo_definido nun arquivo /res/ ou un dos ofrecidos polo S.O.">

Ou ben no seu arquivo de layout:

1 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:app="http://schemas.android.com/apk/res-auto"
3     xmlns:tools="http://schemas.android.com/tools"
4     android:layout_width="match_parent"
5     android:layout_height="match_parent"
6     android:theme="@style/nome_estilo_definido nun arquivo /res/"
7     tools:context=".Adaptadores.UD04_04_Spinners">
8 
9     ................

No exemplo se pon o paquete @style/ para buscar o estilo definido nalgún arquivo /res/values/ de tipo resource

Poderíamos poñer @android e buscaríamos estilos proporcionados polo S.O. en función do Target_SDK (Api) escollida.

• NOTA IMPORTANTE: Cando aplicamos un theme ó nivel de aplicación, este ten que herdar dun teme do mesmo nivel. Se poñemos un estilo que fai referencia a botóns, por exemplo, non funciona ou da problemas de visionado.

Exemplo de Tema baseado no tema Light de Android:

1 <color name="custom_theme_color">#b0b0ff</color>
2 <style name="CustomTheme" parent="android:Theme.Light">
3     <item name="android:windowBackground">@color/custom_theme_color</item>
4     <item name="android:colorBackground">@color/custom_theme_color</item>
5 </style>

É posible asinar un tema en función da plataforma onde corra a nosa aplicación.

Para facelo, só temos que crear o cartafol correspondente, por exemplo, no proxecto, temos un cartafol de nome values-v11 que fai referencia á API 11 que se corresponde coa versión de Android 3.0.

Tamén podemos facelo graficamente:

Nota: Fixarse que vai coller o estilo en función da versión do SO que este funcionando no dispositivo móbil, non do target sdk que poñamos nas propiedades do proxecto.

Estilos a nivel específico

• A forma de crear un estilo específico e a mesma que vimos antes.

Debemos crear un <style> e darlle un nome que nos será de referencia para despois aplicalo a un View.

Dentro da etiqueta <style> poñeremos os atributos que queiramos aplicar aos diferentes views.

Por exemplo:

1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
2     <style name="style_caixas" parent="@android:style/TextAppearance">
3         <item name="android:layout_width">wrap_content</item>
4         <item name="android:layout_height">wrap_content</item>
5         <item name="android:textColor">@android:color/holo_blue_dark</item>
6     </style>
7     
8 </resources>

• Para asociar este estilo a calquera elemento gráfico que poida ter estas propiedades só temos que ir o arquivo XML e engadir a propiedade style da forma seguinte:

1     <EditText
2         style="@style/style_caixas"
3         android:layout_centerHorizontal="true"
4         android:layout_centerVertical="true"
5         android:hint="Nome"
6     />

Estilos a nivel específico que herdan doutros estilos

• Podemos crear estilos que herden outros estilos creados por nós. Para facelo podemos utilizar o atributo Parent:

 1 <resources>
 2     <style name="style_caixas" parent="@android:style/TextAppearance">
 3         <item name="android:layout_width">match_parent</item>
 4         <item name="android:layout_height">wrap_content</item>
 5         <item name="android:textColor">@android:color/holo_blue_dark</item>
 6     </style>
 7     <style name="style_caixasmultilinea" parent="style_caixas">
 8         
 9         <item name="android:inputType">textMultiLine</item>
10         <item name="android:lines">3</item>
11         
12     </style>
13 
14 </resources>

• Para aplicar o novo estilo:

1     <EditText
2         android:id="@+id/txtDireccion"
3 	style="@style/style_caixasmultilinea"
4         android:hint="Dirección"
5         android:layout_below="@id/txtNome"		
6     />

Tamén podemos crear su estilo que herde doutro desta forma:

 1 <resources>
 2     <style name="style_caixas" parent="@android:style/TextAppearance">
 3         <item name="android:layout_width">match_parent</item>
 4         <item name="android:layout_height">wrap_content</item>
 5         <item name="android:textColor">@android:color/holo_blue_dark</item>
 6     </style>
 7     
 8     <style name="style_caixas.style_caixasmultilinea" >
 9         
10         <item name="android:inputType">textMultiLine</item>
11         <item name="android:lines">3</item>
12         
13     </style>
14 </resources>

E o aplicamos así:

1 <EditText
2         android:id="@+id/txtDireccion"
3 	style="@style/style_caixas.style_caixasmultilinea"
4         android:hint="Dirección"
5         android:layout_below="@id/txtNome"
6 />

Podemos seguir creando novos estilos herdando doutros consecutivamente.

• Nota: Isto só o podemos facer con estilos creados por nós.

Se queremos herdar algún estilo do sistema operativo, teríamos que utilizar a propiedade ‘parent’.

• Unha referencia a todas as propiedades de estilo a tedes en: http://developer.android.com/reference/android/R.attr.html

• Hai que ter en conta que cada view terá as súas propiedades específicas.

No enlace anterior están todas, pero para saber cales son aplicables a un view concreto teremos que consultar o view e mirar cales son as súas propiedades xml.

Estas son as que podemos utilizar nun estilo personalizado.

Por exemplo, estas son as propiedades XML para un TextView.

Cando se aplica un estilo a un ViewGroup (coma un LinearLayout) dito estilo non é herdado polos view´s que o conforman.

Caso práctico

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

Se non o temos creado antes, crea un paquete de nome Themes como un subpaquete do teu paquete principal.

• Dentro do paquete Themes crear unha nova 'Empty Activity' de nome: UD02_01_Themes de tipo Launcher e sen compatibilidade.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

• Imos definir un estilo común para aplicar ás etiquetas de texto.

Ficheiro de estilos

• Crearemos un novo arquivo de nome styles_all en /res/values/:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3     <style name="style_all_etiquetas" parent="@android:style/TextAppearance">
 4         <item name="android:layout_width">wrap_content</item>
 5         <item name="android:layout_height">wrap_content</item>
 6         <item name="android:textColor">@color/color_all_etiquetas</item>
 7         <item name="android:textSize">@dimen/dimen_all_etiquetas</item>
 8 
 9     </style>
10 
11     <dimen name="dimen_all_etiquetas">22sp</dimen>
12     <color name="color_all_etiquetas">#00F</color>
13 </resources>

• Liña 3: Fixarse no nome do estilo que despois empregaremos nas TextView.

Liñas 11-12: Neste exemplo a cor e a dimensión están definidas no mesmo arquivo, pero lembrar que vos na práctica tedes que definilas en arquivos diferentes.

O XML do layout

• Comentar que a asignación do estilo a podemos facer graficamente:

• Cambiando o estilo dun TextView
• 

  Nas propiedades do TextView, temos que buscar a propiedade style e premer sobre os puntos suspensivos.

• 

  Podemos ver os estilos dispoñibles a nivel de S.O. (API en target_SDK) ou de proxecto (en función do Theme posto no AndroidManifiest.xml). Buscaremos o estilo polo nome. Premendo sobre el podemos ver os efectos que terá aplicar dito estilo.

• 

  Podemos ver graficamente como quedan as etiquetas sen necesidade de iniciar a aplicación.

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context=".Themes.UD02_01_Themes">
 8 
 9     <TextView
10         android:id="@+id/tvTexto1_UD02_01_themes"
11         style="@style/style_all_etiquetas"
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_marginStart="8dp"
15         android:layout_marginTop="8dp"
16         android:text="Etiqueta 1"
17         app:layout_constraintStart_toStartOf="parent"
18         app:layout_constraintTop_toTopOf="parent" />
19 
20     <TextView
21         android:id="@+id/tvTexto2_UD02_01_themes"
22         style="@style/style_all_etiquetas"
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:layout_marginStart="8dp"
26         android:layout_marginTop="8dp"
27         android:text="Etiqueta 2"
28         app:layout_constraintStart_toStartOf="parent"
29         app:layout_constraintTop_toBottomOf="@+id/tvTexto1_UD02_01_themes" />
30 
31     <TextView
32         android:id="@+id/tvTexto3_UD02_01_themes"
33         style="@style/style_all_etiquetas"
34         android:layout_width="wrap_content"
35         android:layout_height="wrap_content"
36         android:layout_marginStart="8dp"
37         android:layout_marginTop="8dp"
38         android:text="Etiqueta 3"
39         app:layout_constraintStart_toStartOf="parent"
40         app:layout_constraintTop_toBottomOf="@+id/tvTexto2_UD02_01_themes" />
41 </android.support.constraint.ConstraintLayout>

Enlace a la página principal de la UD2

Enlace a la página principal del curso

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).