Estilos e temas

Introdución

• 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) de tipo estilo (style).

• Cada ítem do ficheiro de estilos terá o par: propiedade xml, valor:
  • Exemplo: android:textSize -> "22sp"

• 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.

• 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     ................

ou ben:

Caso práctico

• Crear o proxecto: U2_42_Estilos.
• Imos definir un estilo común para aplicar ás etiquetas de texto, por exemplo.

• Estilos
• 

  Crear un novo ficheiro xml en /res/values

• 

  Poñerlle un nome.

• 

  Ir ao ficheiro e engadir un elemento.

• 

  Engadir un recurso de tipo Style/Theme

• 

  Engadir un nome para o recurso e se é posible un pai.

• 

  Engadir un ...

• 

  ... ítem

• 

  Indicar a propiedade xml e o valor desexado

• 

  Ficheiro de estilos en formato xml

• 

  Etiquetas, todas como mesmo estilo/formato.

Ficheiro de estilos

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3     <style name="estilo_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">#00F</item>
 7         <item name="android:textSize">22sp</item>
 8         
 9     </style>
10     
11 </resources>

O XML do layout

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         style="@style/estilo_etiquetas"
 9         android:text="TextView 1" />
10 
11     <TextView
12         style="@style/estilo_etiquetas"
13         android:text="TextView 2" />
14 
15     <TextView
16         style="@style/estilo_etiquetas"
17         android:text="TextView 3" />
18 
19 </LinearLayout>

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