Estilos e temas
Ir a la navegación
Ir a la búsqueda
Sumario
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).
