Buscar...

Pgina Principal Contacto

SGUENOS!
SUSCRBETE!
Recibe nuevos artculos
Tu email
OK
ENTRADAS POPULARES
Inicio SQL Android C++ Directx
Home Desarrollo Android Temas y estilos en Android
Temas y estilos en Android
El diseo visual de una aplicacin Android es repesentado a travs de reglas contenidas
en Estilos y Temas. Estas herramientas permiten que los programadores y diseadores
generen una interfaz mas amigable y personalizada de sus apps, para establecer una
identidad que impacte al usuario final.
Por esta razn es necesario que entendamos como se construyen y asignan estilos a tus
Views y Layouts. Si sigues leyendo este articulo veras como crear archivos de estilos, los
temas que maneja Android por defecto, como personalizar views y varios ejemplos prcticos.
Temas a tratar
Qu es un estilo?
Implementado estilos en archivos de recursos
Herencia de estilos
Propiedades de un estilo
Qu es un tema?
Temas y estilos del sistema
Crea tu propio tema
Usa un estilo segn la versin de Android
Los archivos R.style y R.attr
Utilidades
Cambiar el fondo de nuestras actividades
Hacer transparente la Action Bar
Color de texto
App de ejemplo
Qu es un estilo?
Hermosa
programacin
2014 AliExpress Hot Sell 925 Silve
AliExpress.com
7,75 GBP
Free Shipping!
Qu es un estilo?
Es un conjunto de reglas que determinan la apariencia y formato de un View o Layout. Si
recuerdas las propiedades que muestran los views a la hora de usar la vista de diseo en
Android Studio, podrs comprende mejor a que nos referimos con estilos. El color de fondo,
cambiar el tamao del texto, definir el alto y ancho, etc., son caractersticas que hacen
parte de los estilos.
Aunque las propiedades se pueden especificar en nuestro mismo layout(como lo hemos
hecho hasta ahora), es posible independizarlos del diseo a travs de un archivo de recurso
de estilos. Este concepto es muy similar cuando desarrollamos websites, separando los
archivos html de los estilos css.
Implementando estilos en archivos de recursos
Al igual que los strings, layouts y drawables tambin hay una sintaxis para generar un estilo
en un archivo de recurso que nos permita reusar cdigo. Para ello debemos crear un nuevo
archivo XML que se albergue en la carpeta de recursos res/values/. Donde usaremos el
nodo padre para los recursos <resource>.
Ahora, para definir un estilo usaremos el elemento <style> y le asignaremos un nombre
nico a travs de su atributo name. Para definir las reglas que lo componen crearemos
elementos <item> en su interior, detallando el nombre del atributo a modificar y su
respectivo valor. Veamos un ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<resource>
<style name="buttonStyle">
<item name="android:layout_width">wrap_content<item/>
<item name="android:layout_height">wrap_content<item/>
<item name="android:textColor">#AEC6CF<item/>
</style>
</resource>
Si deseramos implementar este estilo en un botn dentro de un layout, entonces
refernciamos un acceso a los recursos de estilos con la convencin @style/nombreEstilo
como se muestra a continuacin:
<Button
style="@style/buttonStyle"
text="Clickeame"/>
Herencia de estilos
El elemento <style> tambin puede heredar propiedades de otro estilo a travs de su
atributo parent. Esta relacin permite copiar las reglas del estilo padre y sobrescribir o
aadir propiedades. Veamos un ejemplo
<style name="buttonStyle" parent="@style/parentStyle">
Como ves, referenciamos a otro estilo llamado parentStyle.
Cabe aclarar que siempre que creas un nuevo proyecto en Android Studio, el archivo
styles.xml es autogenerado con una estructura similar a esta:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
El estilo hereda sus propiedades del estilo padre
android:Theme.Holo.Light.DarkActionBar, el cual representa un tema propio del
sistema, que indica que se usar las caractersticas del tema Theme.Holo.Ligth pero con el
estilo para la Action Bar del tema Theme.Holo.
Propiedades de un estilo
Existen gran cantidad de propiedades que podemos usar para un componente. Dependiendo
del View o Layout que vayamos a personalizar, as mismo varian sus atributos. La vista de
diseo de Android Studio nos permite observar todas las propiedades de un View
disponibles para modificar. No obstante puedes ir al sitio oficial de Android y revisar las
referencias de cada clase.
Que es un tema?
Un tema es un estilo genrico que se asigna a una aplicacin completa o actividad. Esto
permite que todos los componentes sigan un mismo patrn de diseo y personalizacin para
mantener consistencia en la UI.
Si deseamos aadir un tema a una aplicacin debemos dirigirnos al archivo
AndroidManifiest.xml y agregar al elemento <application> el atributo theme con la
referencia del tema solicitado. Veamos:
<application android:theme="@style/MiTema">
Si fuese una actividad entonces haramos exactamente lo mismo:
<activity android:theme="@style/TemaActividad">
Si haces una retrospeccin sobre las aplicaciones que hemos construido a lo largo de estos
articulos sobre desarrollo de apps Android, vers que nuestro Android Manifiest ha asignado
Comparte si te pareci til OK
articulos sobre desarrollo de apps Android, vers que nuestro Android Manifiest ha asignado
siempre un tema que se encuentra en el namespace del sistema con la referencia
@android/style/Theme.Holo.Light
Eso nos lleva a nuestro siguiente apartado.
Temas y estilos del sistema
Android trae por defecto estilos y temas para todos sus aplicaciones y entorno. Estas reglas
de estilos son guardadas en un archivo llamado styles.xml y los temas en themes.xml.
Ambos contienen definiciones establecidas por el equipo desarrollador de Android creadas a
su gusto y medida.
Antes de la versin 11 se usaba un tema por defecto llamado Theme.Light, pero para las
versiones recientes se disearon los temas Theme.Holo (Estilo oscuro) y el
Theme.Holo.Light (Estilo claro).
De ellos descienden muchas variantes, como por ejemplo el tema
Theme.Holo.Light.DarkActionBar.
La siguiente ilustracin muestra sus apariencias:
Si deseas implementar estos temas en tu aplicacin o actividad simplemente los referencias
de la siguiente forma:
<application android:theme="@android/style/Theme.Holo">
<application android:theme="@android/style/Theme.Holo.Light">
Crear tu propio tema
Para facilitar la personalizacin de un tema nuevo es recomendable extender las
propiedades de los temas que Android contiene. Esto nos permitir ahorrarnos tiempo en
definicin y escritura, por lo que solo se implementan las reglas que deseamos modificar en
definicin y escritura, por lo que solo se implementan las reglas que deseamos modificar en
particular.
Supongamos que deseamos usar el tema Holo.Light en nuestra aplicacin pero deseamos
todo el formato de texto itlico Para conseguir este resultado aplicamos el mismo
procedimiento que hicimos con los estilos, donde nuestro tema heredar la mayora de
caractersticas del tema y solo tendremos que editar el atributo android:textStyle.
Veamos:
<style name="Italic" parent="@android/Theme/Holo/Light">
<item name="android:textStyle">italic</item>
</style>
Usar un estilo segn la versin de Android
Si deseas condicionar el uso de tus estilos o temas puedes hacerlo a travs de
cualificadores. Para que surta efecto este concepto, debemos nominar las carpetas con
respecto a la versin. Por ejemplo si deseamos que el estilo se aplique despus la versin
14 del SDK entonces usamos el nombre values-v14.
Un cualificador es un facotr del cual depende la implementacin de nuestros recursos. Esto
permite que nuestra aplicacin autogenere el cdigo necesario, lo que nos ahorra la molestia
de configurar programticamente el cambio. Ademas Android Studio tiene un asistente muy
verstil que nos permite crear carpetas tipeadas con facilidad.
Volvamos al caso de la versin 14, si deseas establecer este cualificador entonces realiza lo
siguiente:
Ve a tu carpeta de recursos y dentro de ella: presiona click derecho > New >Android
resource directory
Se ha ejecutado un asistente?, ok, entonces lo que sigue es elegir el tipo de recurso que
usaremos(Resource Type). En este caso elegiremos values, que es donde guardamos
nuestros estilos. Luego en la lista del lado izquierdo (Avalaible qualifiers) selecciona el
cualificador Version (tiene el loguito de Android).
Ahora selecciona con el botn que indica traslado a la derecha. Seguidamente aparecer un
espacio para que seleccionemos el numero mnimo de la versin del API a establecer.
Habamos dicho 14, as que digitamos ese nmero.
Presiona OK e inmediatamente estar creada nuetro nuevo directorio de recursos
destinados solo para las versiones mayores o iguales a 14.
Ahora puedes ubicar tu archivo styles.xml en este directorio y automticamente tu
aplicacin condicionar el recurso a ejecutarse cuando sea pertinente.
Los archivos R.style y R.attr
Al usar los estilos del sistema estamos haciendo referencia a los valores que poseen las
clases R.style y R.attr.
Estas clases son la referencia programtica de los recursos predefinidos por el sistema. En
R.style podemos encontrar un sinnumero de estilos para nuestros views y en R.attr
podemos referenciar los atributos actuales del tema que poseen los views.
Utilidades
A continuacin veremos algunas utilidades populares para proyectos de desarrollo:
Cambiar el fondo de nuestras actividades
Es normal que deseemos cambiar el aspecto con que se proyecta una actividad en su
interior por un color llamativo o una imagen de fondo. Para hacerlo, acudimos a la propiedad
windowBackground.
Nota: Los atributos que empiezan por el prefijo window no son aplicables a un view en
concreto. Ellos se aplican a una app o actividad como si se tratase de un todo o un solo
objeto.
Este atributos recibe por referencia un color solido, una forma o una imagen de nuestros
recursos. Normalmente los colores se deben declarar como items <color>, cuyo valor es un
nmero hexadecimal.
Veamos:
Veamos:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:windowBackground">@android:color/holo_blue_light</item>
</style>
En este caso usamos un color predefinido por el sistema. El resultado sera este:
Si deseas usar tu propio color hacer declaras tu item <color> y lo asignas:
<color name="yellowPastel">#FDFD96</color>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:colorBackground">@color/yellowPastel</item>
<item name="android:windowBackground">@color/yellowPastel</item>
</style>
Ahora tendramos el siguiente fondo:
Para setear una imagen simplemente usamos una referencia drawable como ya hemos
hecho antes:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:windowBackground">@drawable/background</item>
</style>
La siguiente ilustracin muestra una imagen de fondo:
Superponer la Action Bar
En ocasiones deseamos que nuestra Action Bar no interfiera en la visualizacion de nuestra
actividad. Aunque podramos ocultarla con el mtodo hide(), podemos optar por otro
actividad. Aunque podramos ocultarla con el mtodo hide(), podemos optar por otro
camino al sobreponerla en el fondo de la actividad. Esto nos permitir constrastarla de forma
eficaz.
Para ello solo debemos asignar true a un atributo especial llamado
windowActionBarOverlay, el cual permite habilitar la superposicin de la Action Bar. Cabe
aclarar que esta efecto se aplica solo a los temas que se heredan de Theme.Holo.
Veamos:
<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
La anterior descripcin producira un efecto similar al siguiente:
Si deseas que la Action Bar se vea translucida puedes aplicar el siguiente truco:
Crea un estilo propio para la Action Bar y extiendelo del estilo
Widget.Holo.Light.ActionBar.Solid.Inverse. Este permite obtener las caracteristicas
de la Action Bar del Holo.Light con colores inversos, para el constraste correcto entre el
background.
Luego cambia el background del estilo y asignale el siguiente drawable(Click derecho
guardar):
A este tipo de imgenes se les llaman Nine Patch. Son imgenes PNG con una descripcin
grfica especial, que posibilitan su expasin dependiendo del tamao. Se les diferencia por
su extension ".9.png". Luego veremos mas sobre ellos.
Ahora, si aplicaramos este truco sobre el estilo con la barra de accin obscura, el cdigo que
Ahora, si aplicaramos este truco sobre el estilo con la barra de accin obscura, el cdigo que
tendramos sera el siguiente:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">

<item name="android:windowBackground">@drawable/fondo</item>
<item name="android:actionBarStyle">@style/ActionBar.Overlay</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
...
<style name="ActionBar.Overlay"
parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_translucent</item>
</style>
El resultado:
Color del texto
Para cambiar el color del texto tendremos que modificar el atributo textColor y asignarle el
valor del color. Veamos:
<style name="TextColor">
<item name="android:textColor">#25383C</item>
</style>
App de ejemplo
Crearemos una pequea aplicacin que use un tema personalizado. Esta actividad
contendr un formulario hipottico para envo de datos a los suscriptores de Hermosa
Programacin. La idea es crear un tema que abarque los elementos generales de la
aplicacin y luego crear estilos para views especficos.
Veamos como hacerlo:
Paso 1
Crea un nuevo proyecto en Android Studio con el nombre de "Styler" y aadele una
actividad en blanco llamada "Main".
Paso 2
Abre el archivo de diseo activity_main.xml y crea el siguiente diseo:
<resources>
<!--Tema para el formulario-->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Estilos para Edit Texts-->
<item name="android:editTextStyle">@style/EditTextStyle</item>
<!--Estilos de ventana-->
<item name="android:windowFullscreen">true</item>
</style>
<!--Estilos personalizados para los componentes del formulario-->
<style name="Header" parent="@android:style/Widget.Holo.Light.TextView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</it
em>
<item name="android:textColor">@android:color/holo_blue_bright</item>
<item name="android:layout_marginTop">10dp</item>
</style>
<style name="Message" parent="@android:style/Widget.Holo.Light.TextView">
<item name="android:textStyle">italic</item>
<item name="android:textColor">@android:color/darker_gray</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="Separator">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">@android:color/holo_blue_bright</item>
<item name="android:layout_marginBottom">@dimen/activity_vertical_margin</
item>
</style>
<style name="EditTextStyle" parent="@android:style/Widget.Holo.Light.EditText"
>
<item name="android:background">@drawable/rectangle</item>
<item name="android:padding">10dp</item>
</style>
</resources>
Comprendamos cada estilo establecido:
AppTheme: Es el tema general de la aplicacin y hereda sus atributos del tema
Theme.Holo.Ligth.DarkActionBar. Atributos nuevos:
android:editTextStyle: Estilo visual de los Edit Texts. Aqu hicimos referencia al estilo
EditTextStyle creado mas abajo.
windowFullScreen: Deseas que las actividades de la aplicacin se ejecuten en pantalla
completa?, elegimos true, ya que es un hecho.
Header: Representa una cabecera o titulo en nuestro formulario. Este hereda las
caractersticas de un Text View Holo.Light. Atributos nuevos:
textAppearance: Tamao de la fuente del view. Normalmente nos referiremos a tres
tamaos: Small(Pequeo), Medium(Mediano) y Large(Grande).
layoutMarginTop: Se refiere a la margen superior del textview con respecto a los elementos
dentro del layout.
Message: Este estilo representa el cuerpo de un mensaje dirigido al usuario. Hereda del
mismo padre de Header. Atributos nuevos:
textStyle: Representa la modalidad de texto, cuyo valor puede ser italic, bold o normal.
Separator: Este elemento es un separador entre las secciones de nuestro layout.
Representa una linea horizontal de 1dp de grosor y un largo ajustado al LinearLayout.
Aunque parece un truco raro, es muy til y sencillo para representar una linea flexible.
Atributos nuevos:
background: Es el color, forma o imagen que un view tiene de fondo.
layout_marginBottom: Margen inferior de un view con respecto a un layout
EditTextStyle: Contiene el estilo de los edit texts de nuestro formulario. Atributos nuevos:
padding: Se refiere al espaciado que hay entre todas las margenes del view y su contenido.
Hago un parntesis para sealar el recurso que hemos usado en el background de los edit
texts. Se trata de una forma creada manualmente para representar el contenido del fondo.
Para ello se cre un nuevo recurso drawable llamado rectangle.xml con la siguiente
descripcin:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="1dp" android:bottom="1dp">
<shape
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="@android:color/holo_blue_bright" />
<solid android:color="#ffffffff" />
<corners
android:radius="10dp"/>
</shape>
</item>
</layer-list>
No entraremos en detalles sobre estos elementos, ya que es un tema de renderizado 2D
con la API grfica. Pero en resumen se puede observar que usamos un nodo <shape>, el
cual representa un forma primitiva en el lienzo de dibujo. Para este caso es un rectngulo, el
cual tiene un recubrimiento(<stroke>) con nuestro azul predilecto y ademas un objeto
<corner> que permite redondear las esquinas de nuestro rectngulo.
Paso 3
Ahora disearemos el layout de nuestra actividad Main con la siguiente descripcin:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".Main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
style="@style/Header"
android:text="@string/dataHeader"
android:id="@+id/dataHeader"/>
<View style="@style/Separator" />
<EditText
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/nameField"
android:layout_gravity="center_horizontal"
android:hint="@string/nameField"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:inputType="phone"
android:ems="10"
android:id="@+id/phoneField"
android:layout_gravity="center_horizontal"
android:hint="@string/phoneField"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<EditText
android:inputType="textEmailAddress"
android:inputType="textEmailAddress"
android:ems="10"
android:id="@+id/emailField"
android:layout_gravity="center_horizontal"
android:hint="@string/emailField"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="@string/optionsHeader"
android:id="@+id/optionsHeader"
style="@style/Header" />
<View style="@style/Separator" />
<TextView
android:text="@string/newsletterText"
android:id="@+id/newsletterText"
android:layout_gravity="center_horizontal"
style="@style/Message" />
<CheckBox
android:id="@+id/confirmBox"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<Button
android:text="@string/sendButton"
android:id="@+id/sendButton"
android:layout_gravity="center_horizontal"
android:layout_marginTop="41dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Como ves, hemos asignado al atributo style los estilos correspondientes. En los datos del
suscriptor tenemos un textview con estilo de titulo y el texto "TUS DATOS". Mas abajo hay
otro titulo donde aadimos las opciones adicionales relacionadas a las suscripcin, este
tiene el texto "OPCIONES". Las secciones estn separadas por nuestros objetos Separators y
el mensaje dirigido a nuestros usuarios tiene asignado el estilo Message.
Los Text Fields no tienen asignado ningun estilo, ya que su forma es heredada del tema de
la aplicacin.
Nota: No olvides aadir todos los textos representativos a tu archivo strings.xml. Te dejo las
definiciones aqu abajo:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Styler</string>
<string name="action_settings">Settings</string>
<string name="dataHeader">TUS DATOS</string>
<string name="nameField">Nombre</string>
<string name="phoneField">Telfono</string>
<string name="emailField">Email</string>
<string name="optionsHeader">OPCIONES</string>
<string name="newsletterText">Deseas recibir futuros articulos y promociones
de Hermosa Programacin?</string>
<string name="sendButton">Enviar</string>
</resources>
Paso 4
Paso 4
Y por ultimo ejecutamos el proyecto para visualizar que se hayan aplicado el tema y los
estilos particulares. En caso de que tu proyecto no tenga asignado el tema al elemento de la
aplicacin en el archivo AndroidManifiest.xml, recuerda modificar el atributo theme:
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
...
Te ha sido de ayuda este artculo?
Comprtelo con los mas necesitados! Suscrbete para recibir futuros artculos sobre
Programacin:
Tu email
Recibir nuevos artculos
Publicado por James Revelo Urrea en 11:27
Next Page
Pgina
principal
Plug-in social de Facebook
Publicar tambin en Facebook
Publicar como Andrs Felipe Gutirrez R... (No eres t?) Comentar
Aade un comentario...
Dilmer Palomino Pardo Analista Programador en Ministerio Pblico - Fiscala de la Nacin
Gracias po compartir el conocimiento. muy interesante y didactico.
Responder Me gusta Seguir esta publicacin hace 15 horas 2
James Revelo Cali
Lo hago con mucho gusto Dilmer, si tienes alguna duda no dudes en preguntar.
Responder Me gusta hace 9 horas
DIRECTORIOS LO MEJOR DE ESTA SEMANA
Como conectar Php y Mysql?
Introduccin al lenguaje XML
Funciones en C++
Estructura de un proyecto en Android Studio
Temas y estilos en Android
REDES SOCIALES
Copyright 2014. Hermosa programacin - All Rights Reserved Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger