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.
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.
Veamos un ejemplo:
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
<resources>
</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 AndroidManifest.xml y agregar al elemento <application> el atributo
theme con la referencia del tema solicitado. Veamos:
<application android:theme="@style/MiTema">
<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 Manifest 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
ellos
descienden
muchas
siguiente
variantes,
como
ilustracin
por
ejemplo
muestra
el
tema
Theme.Holo.Light.DarkActionBar.
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">
Ademas Android Studio tiene un asistente muy verstil que nos permite crear
Volvamos al caso de la versin 14, si deseas establecer este cualificador entonces realiza lo siguiente:
carpetas
tipeadas
con
facilidad.
Ve
tu
carpeta
de
recursos
dentro
de
ella: presiona
click
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.
que
poseen
las
clases
R.style
R.attr.
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:
</style>
En
este
caso
usamos
un
color
predefinido
por
el
sistema.
El
resultado
sera
este:
Ahora
tendramos
el
Para setear una imagen simplemente usamos una referencia drawable como ya hemos hecho antes:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
siguiente
fondo:
<item name="android:windowBackground"><strong>@drawable/background</strong></item>
</style>
La
siguiente
ilustracin
muestra
una
imagen
de
fondo:
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.
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
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 tendramos sera el siguiente:
<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:
<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.
Descargar Cdigo
Apyanos con una seal en tu red social favorita y consigue el cdigo completo.
Me gusta
Tweet
+1 Google
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>
</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>
</resources>
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:
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:
<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"/>
<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: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" />
<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
Nota: No olvides aadir todos los textos representativos a tu archivo strings.xml. Te dejo las definiciones aqu abajo:
<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>
de
la
aplicacin.
<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
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 AndroidManifest.xml, recuerda modificar el atributo theme:
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
<strong>android:theme="@style/AppTheme"</strong> >
...