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