diseñar temas y estilos para tus aplicaciones android

25
12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android http://www.hermosaprogramacion.com/2014/10/androidtemasestilos/ 1/25 Diseñar Temas y Estilos para tus Aplicaciones Android octubre 4, 2014 James Revelo El diseño visual de una aplicación Android es repesentado a través de reglas contenidas en Estilos y Temas. Estas herramientas permiten que los programadores y diseñadores generen una interfaz mas amigable y personalizada de sus apps, para establecer una identidad que impacte al usuario final. Por esta razón 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 prácticos. ¿Qué es un estilo? Aprovecha el Viernes negro en Udemy, cursos de programación a $10 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 diseño en Android Studio, podrás comprende mejor a que nos referimos con estilos. El color de fondo, cambiar el tamaño del texto, definir el alto y ancho, etc., son características 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 diseño a través 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 también hay una sintaxis para generar un estilo en un archivo de recurso que nos permita reusar código. 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 Buscar … Suscripción Por Correo Obten gratis en tu email los nuevos artículos Dirección De Email Subscribirse Síguenos En Las Redes Sociales COMIENZA AQUÍ SQL RECURSOS CONTACTO Gmail for Work Ahora puedes verte más profesional con un e-mail personalizado. Prueba Gratis Be the first of your friends to like this Hermosa programación 1,147 likes Like Page Sign Up

Upload: edi-con

Post on 12-Apr-2016

17 views

Category:

Documents


4 download

DESCRIPTION

Diseñar Temas y Estilos Para Tus Aplicaciones Android

TRANSCRIPT

Page 1: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 1/25

Diseñar Temas y Estilos para tus AplicacionesAndroidoctubre 4, 2014 James Revelo

El diseño visual de una aplicación Android esrepesentado a través de reglas contenidas en Estilos yTemas. Estas herramientas permiten que losprogramadores y diseñadores generen una interfaz masamigable y personalizada de sus apps, para establecer unaidentidad que impacte al usuario final.

Por esta razón es necesario que entendamos como seconstruyen y asignan estilos a tus Views y Layouts. Sisigues leyendo este articulo veras como crear archivos deestilos, los temas que maneja Android por defecto, comopersonalizar views y varios ejemplos prácticos.

¿Qué es un estilo?

Aprovecha el Viernes negro en Udemy, cursos de programación a $10

Es un conjunto de reglas que determinan la apariencia y formato de un View o Layout. Si recuerdaslas propiedades que muestran los views a la hora de usar la vista de diseño en Android Studio, podráscomprende mejor a que nos referimos con estilos. El color de fondo, cambiar el tamaño del texto,definir el alto y ancho, etc., son características que hacen parte de los estilos.

Aunque las propiedades se pueden especificar en nuestro mismo layout(como lo hemos hecho hastaahora), es posible independizarlos del diseño a través de un archivo de recurso de estilos. Esteconcepto es muy similar cuando desarrollamos websites, separando los archivos html de los estiloscss.

Implementando estilos en archivos de recursos

Al igual que los strings, layouts y drawables también hay una sintaxis para generar un estilo en unarchivo de recurso que nos permita reusar código. Para ello debemos crear un nuevo archivo XMLque se albergue en la carpeta de recursos res/values/. Donde usaremos el nodo padre para los

Buscar …

Suscripción Por CorreoObten gratis en tu email los nuevos artículos

Dirección De Email

Subscribirse

Síguenos En Las Redes Sociales

COMIENZA AQUÍ SQL RECURSOS CONTACTO

Gmail for WorkAhora puedes verte más profesional

con un e-mail personalizado.

Prueba Gratis

Be the first of your friends to like this

Hermosa programación1,147 likes

Like Page Sign Up

Page 2: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 2/25

recursos <resource>.

Ahora, para definir un estilo usaremos el elemento <style> y le asignaremos un nombre único a travésde su atributo name. Para definir las reglas que lo componen crearemos elementos <item> en suinterior, 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 deseáramos implementar este estilo en un botón dentro de un layout, entonces refernciamos unacceso a los recursos de estilos con la convención @style/nombreEstilo como se muestra acontinuación:

<Button style="@style/buttonStyle" text="Clickeame"/>

Herencia de estilosEl elemento <style> también puede heredar propiedades de otro estilo a través de su atributo parent.Esta relación permite copiar las reglas del estilo padre y sobrescribir o añadir propiedades. Veamosun 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 esautogenerado 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 cualrepresenta un tema propio del sistema, que indica que se usará las características del temaTheme.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 Viewo Layout que vayamos a personalizar, así mismo varian sus atributos. La vista de diseño de AndroidStudio nos permite observar todas las propiedades de un View disponibles para modificar. Noobstante puedes ir al sitio oficial de Android y revisar las referencias de cada clase.

Template Material Design

Contenido Recomendado

Entra y Aprende Fundamentos De Java

TabLayout: ¿CómoAñadir Pestañas EnAndroid?

¿Como Crear DiálogosEn Android?

Tutorial De Layouts EnAndroid

Tutorial Sobre La ActionBar En Android

Page 3: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 3/25

¿Que es un tema?

Un tema es un estilo genérico que se asigna a una aplicación completa o actividad. Esto permite quetodos los componentes sigan un mismo patrón de diseño y personalización para mantenerconsistencia en la UI.

Si deseamos añadir un tema a una aplicación debemos dirigirnos al archivo AndroidManifest.xml yagregar al elemento <application> el atributo theme con la referencia del tema solicitado. Veamos:

<application android:theme="@style/MiTema">

Si fuese una actividad entonces haríamos exactamente lo mismo:

<activity android:theme="@style/TemaActividad">

Si haces una retrospección sobre las aplicaciones que hemos construido a lo largo de estos articulossobre desarrollo de apps Android, verás que nuestro Android Manifest ha asignado siempre un temaque 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 estilosson guardadas en un archivo llamado styles.xml y los temas en themes.xml. Ambos contienendefiniciones establecidas por el equipo desarrollador de Android creadas a su gusto y medida.

Antes de la versión 11 se usaba un tema por defecto llamado Theme.Light, pero para las versionesrecientes se diseñaron 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 ilustración muestra sus apariencias:

Temas Importantes

Actividades Android Studio Arquitectura Android C#CardView ContactsProvider ContentResolver Datos

Desarrollo Android Diálogos Fragmentos GlideGradle Intents Java JSON ListView Matemáticas

Material Design MySQL Navigation

Drawer Peticiones Http Php Preferencias Recursos

RecyclerView Segundo Plano SQL SQLite SQLSERVER Tabs UI Web Service XML

Page 4: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 4/25

Si deseas implementar estos temas en tu aplicación o actividad simplemente los referencias de lasiguiente forma:

<application android:theme="@android/style/Theme.Holo"><application android:theme="@android/style/Theme.Holo.Light">

Crear tu propio temaPara facilitar la personalización de un tema nuevo es recomendable extender las propiedades de lostemas que Android contiene. Esto nos permitirá ahorrarnos tiempo en definición y escritura, por lo quesolo se implementan las reglas que deseamos modificar en particular.

Supongamos que deseamos usar el tema Holo.Light en nuestra aplicación pero deseamos todo elformato de texto itálico Para conseguir este resultado aplicamos el mismo procedimiento que hicimoscon los estilos, donde nuestro tema heredará la mayoría de características del tema y solo tendremosque editar el atributo android:textStyle.

<style name="Italic" parent="@android/Theme/Holo/Light"> <item name="android:textStyle">italic</item></style>

Usar un estilo según la versión de AndroidSi deseas condicionar el uso de tus estilos o temas puedes hacerlo a través de cualificadores. Paraque surta efecto este concepto, debemos nominar las carpetas con respecto a la versión. Por ejemplosi deseamos que el estilo se aplique después la versión 14 del SDK entonces usamos el nombrevalues­v14.

Un cualificador es un facotr del cual depende la implementación de nuestros recursos. Esto permiteque nuestra aplicación autogenere el código necesario, lo que nos ahorra la molestia de configurarprogramáticamente el cambio.

Ademas Android Studio tiene un asistente muy versátil que nos permite crear carpetas tipeadas confacilidad.Volvamos al caso de la versión 14, si deseas establecer este cualificador entonces realiza losiguiente:

Page 5: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 5/25

Ve a tu carpeta de recursos y dentro de ella: presiona click derecho > New >Android resourcedirectory

¿Se ha ejecutado un asistente?, ok, entonces lo que sigue es elegir el tipo de recurso queusaremos(Resource Type). En este caso elegiremos values, que es donde guardamos nuestrosestilos. Luego en la lista del lado izquierdo (Avalaible qualifiers) selecciona el cualificador Version(tiene el loguito de Android).

Ahora selecciona con el botón que indica traslado a la derecha. Seguidamente aparecerá un espaciopara que seleccionemos el numero mínimo de la versión del API a establecer. Habíamos dicho 14, asíque digitamos ese número.

Page 6: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 6/25

Presiona OK e inmediatamente estará creada nuetro nuevo directorio de recursos destinados solopara las versiones mayores o iguales a 14.

Ahora puedes ubicar tu archivo styles.xml en este directorio y automáticamente tu aplicacióncondicionará el recurso a ejecutarse cuando sea pertinente.

Los archivos R.style y R.attrAl usar los estilos del sistema estamos haciendo referencia a los valores que poseen las clasesR.style y R.attr.Estas clases son la referencia programática de los recursos predefinidos por el sistema.

En R.style podemos encontrar un sinnumero de estilos para nuestros views y en R.attr podemosreferenciar los atributos actuales del tema que poseen los views.

Utilidades

A continuación veremos algunas utilidades populares para proyectos de desarrollo:

Cambiar el fondo de nuestras actividadesEs normal que deseemos cambiar el aspecto con que se proyecta una actividad en su interior por uncolor llamativo o una imagen de fondo. Para hacerlo, acudimos a la propiedad windowBackground.

Los atributos que empiezan por el prefijo window no son aplicables a un view en concreto. Ellos seaplican 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 númerohexadecimal.

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar"> <item name="android:windowBackground"><strong>@android:color/holo_blue_light</strong></item></style>

Page 7: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 7/25

En este caso usamos un color predefinido por el sistema. El resultado sería este:

Si deseas usar tu propio color hacer declaras tu item <color> y lo asignas:

<strong><color name="yellowPastel">#FDFD96</color></strong>

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar"> <item name="android:colorBackground"><strong>@color/yellowPastel</strong></item> <item name="android:windowBackground"><strong>@color/yellowPastel</strong></item></style>

Ahora tendríamos 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"><strong>@drawable/background</strong></item></style>

La siguiente ilustración muestra una imagen de fondo:

Page 8: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 8/25

Superponer la Action BarEn ocasiones deseamos que nuestra Action Bar no interfiera en la visualizacion de nuestra actividad.Aunque podríamos ocultarla con el método hide(), podemos optar por otro camino al sobreponerla enel fondo de la actividad. Esto nos permitirá constrastarla de forma eficaz.

Para ello solo debemos asignar true a un atributo especial llamado windowActionBarOverlay, el cualpermite habilitar la superposición de la Action Bar. Cabe aclarar que esta efecto se aplica solo a lostemas que se heredan de Theme.Holo.

<style name="AppTheme" parent="android:Theme.Holo"> <item name="android:windowActionBarOverlay">true</item></style>

La anterior descripción produciría 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 estiloWidget.Holo.Light.ActionBar.Solid.Inverse. Este permite obtener las caracteristicas de la Action Bar

Page 9: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 9/25

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 imágenes se les llaman Nine Patch. Son imágenes PNG con una descripción gráficaespecial, que posibilitan su expasión dependiendo del tamaño. 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 acción obscura, el código quetendríamos sería 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 textoPara cambiar el color del texto tendremos que modificar el atributo textColor y asignarle el valor delcolor. Veamos:

<style name="TextColor"><item name="android:textColor">#25383C</item></style>

App de ejemplo

Page 10: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 10/25

Crearemos una pequeña aplicación que use un tema personalizado. Esta actividad contendrá unformulario hipotético para envío de datos a los suscriptores de Hermosa Programación. La idea escrear un tema que abarque los elementos generales de la aplicación y luego crear estilos para viewsespecíficos.

Presiona el siguiente botón para descargar el código de la aplicación:

Veamos como recrear el estilo de esta aplicación

Paso 1Crea un nuevo proyecto en Android Studio con el nombre de “Styler” y añadele una actividad enblanco llamada “Main”.

Paso 2Abre el archivo de diseño activity_main.xml y crea el siguiente diseño:

<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</item> <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">

Descargar CódigoApóyanos con una señal en tu red social favorita y consigue el código completo.

206+1 GoogleTwittear 22Tweet181LikeMe gusta

Page 11: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 11/25

<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 aplicación y hereda sus atributos del temaTheme.Holo.Ligth.DarkActionBar. Atributos nuevos:

android:editTextStyle: Estilo visual de los Edit Texts. Aquó hicimos referencia al estiloEditTextStyle creado mas abajo.

windowFullScreen: ¿Deseas que las actividades de la aplicación se ejecuten en pantallacompleta?, elegimos true, ya que es un hecho.

Header: Representa una cabecera o titulo en nuestro formulario. Este hereda las características de unText View Holo.Light. Atributos nuevos:

textAppearance: Tamaño de la fuente del view. Normalmente nos referiremos a tres tamaños:Small(Pequeño), Medium(Mediano) y Large(Grande).

layoutMarginTop: Se refiere a la margen superior del textview con respecto a los elementosdentro del layout.

Message: Este estilo representa el cuerpo de un mensaje dirigido al usuario. Hereda del mismo padrede 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 unalinea horizontal de 1dp de grosor y un largo ajustado al LinearLayout. Aunque parece un truco raro, esmuy ú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.

Page 12: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 12/25

Hago un paréntesis para señalar el recurso que hemos usado en el background de los edit texts. Setrata 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 descripción:

<?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 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 APIgráfica. Pero en resumen se puede observar que usamos un nodo <shape>, el cual representa unforma primitiva en el lienzo de dibujo.

Para este caso es un rectángulo, el cual tiene un recubrimiento(<stroke>) con nuestro azul predilecto yademas un objeto <corner> que permite redondear las esquinas de nuestro rectángulo.

Paso 3Ahora diseñaremos el layout de nuestra actividad Main con la siguiente descripción:

<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"

Page 13: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 13/25

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" />

<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 suscriptortenemos un textview con estilo de titulo y el texto “TUS DATOS”. Mas abajo hay otro titulo dondeañadimos las opciones adicionales relacionadas a las suscripción, este tiene el texto “OPCIONES”.

Las secciones están separadas por nuestros objetos Separators y el mensaje dirigido a nuestrosusuarios tiene asignado el estilo Message.

Los Text Fields no tienen asignado ningun estilo, ya que su forma es heredada del tema de laaplicación.Nota: No olvides añadir todos los textos representativos a tu archivo strings.xml. Te dejo lasdefiniciones 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">Teléfono</string> <string name="emailField">Email</string> <string name="optionsHeader">OPCIONES</string> <string name="newsletterText">¿Deseas recibir futuros articulos y promociones de Hermosa Programación? <string name="sendButton">Enviar</string>

</resources>

Page 14: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 14/25

Paso 4Y por ultimo ejecutamos el proyecto para visualizar que se hayan aplicado el tema y los estilosparticulares. En caso de que tu proyecto no tenga asignado el tema al elemento de la aplicación en elarchivo 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> > ...

Contenido Recomendado

Desarrollo Android UI. permalink.

TabLayout: ¿CómoAñadir Pestañas EnAndroid?

¿Como Crear DiálogosEn Android?

Tutorial De Layouts EnAndroid

Tutorial Sobre La ActionBar En Android

Page 15: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 15/25

Aplicación Android Con Navigation Drawer YTabs98 comentarios • hace 2 meses

AvatarVictor Alvarado — Hola James, gracias porresponder. Solucioné el problemita, lo quepasaba es que esstaba usando ListView en …

¿Cómo Sincronizar Sqlite Con Mysql EnAndroid?75 comentarios • hace 4 meses

AvatarJohan Ls — long id =cursor.getLong(cursor.getColumnIndex(ContractParaGastos.Columnas._ID));El problema es que cuando lo elimina no se …

Bloques de instrucciones en SQL1 comentario • hace 4 meses

AvatarSleben — Estaría chido una tabla de "Versus"entre como se escribe en MySQL y como seríaen SQL Server.

Llaves foraneas, FOREIGN KEY en SQL3 comentarios • hace 4 meses

AvatarIrving Lozano Alarcon — ok , entiendo estoyutilizando SQL server 2008 , es apenas practicaescolar pero te agradezco Christian .

TAMBIÉN EN HERMOSA PROGRAMACIÓN

7 Comentarios Hermosa Programación Iniciar sesión1

Compartir⤤ ordenar por el mejor

Únete a la discusión...

• Responder •

Miglior Dida • hace un mes

hola no se si sea el lugar indicado. quisiera una ayuda para realizar un componente de intros paraaplicaciones sin que el programador realiza ningun esfuerzo. eso conlleva a crear activitys,view ydemas que son necesarios para una intro. EL PROBLEMA que tengo es que no se como llevar miproyecto a que sea un componente,como lo es un boton que solo tenga q arrastrar y ya. si alguien mepuede ayudar ,se lo agradeceria mucho asi sea alguna pauta

• Responder •

Daniel Enrique Rodriguez Caste • hace un mes

Hola, quiero agradecerte por toda informacion, es muy util al momento de comenzar,

y tengo una inquietud. quiero hacer mi propio Theme, y lo que quiero en el, es ocultar la barra la deNavigationBar, para eso hago que mi Theme herede de android:Theme.Panelesto me esconde las tres barras, (StatusBar, ActionBar y NavigationBar) pero resulta que despues nopuedo hacer aparecer las otras dos barras que me interesan que son: StatusBar y ActionBar, tambienintente que mi Theme no herede de ningun Theme de Android, y hacer que se oculte la NavigationBar,no conozco la propuedad para ocultar solo la Barra de Navegación (NavigationBar).si saber como hacerlo te agradezco la ayuda

• Responder •

James Revelo Urrea • hace un mesModer. > Daniel Enrique Rodriguez Caste

Mira este articulo: https://developer.android.com/...

• Responder •

YIMY JOSUE HERCULES RUBIO • hace 2 meses

Muy interesante tu post, pero me surge la duda de como hacer que sea una imagen animada la que secoloque de fondo.

• Responder •

James Revelo Urrea • hace 2 mesesModer. > YIMY JOSUE HERCULES RUBIO

Hola Yimi, tal vez si usas la clase AnimationDrawable: http://developer.android.com/i...

Con eso puedes relacionar gifs fácilmente.

• Responder •

YIMY JOSUE HERCULES RUBIO • hace 2 meses> James Revelo Urrea

Excelente James, muchas gracias.

• Responder •

James Revelo Urrea • hace 2 mesesModer. > YIMY JOSUE HERCULES RUBIO

Con gusto amigo

¿QUE ES ESTO?

Suscribirse Agrega Disqus a tu sitiod Privacidadὑ

Recomendar 1

Compartir ›

Compartir ›

Compartir ›

Compartir ›

Compartir ›

Compartir ›

Compartir ›

Page 16: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 16/25

Proudly powered by WordPress | Theme: Bizmo by Storefront Themes.

Page 17: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 17/25

Page 18: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 18/25

Page 19: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 19/25

Page 20: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 20/25

Page 21: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 21/25

Page 22: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 22/25

Page 23: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 23/25

Page 24: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 24/25

Page 25: Diseñar Temas y Estilos Para Tus Aplicaciones Android

12/11/2015 Diseñar Temas y Estilos para tus Aplicaciones Android

http://www.hermosaprogramacion.com/2014/10/android­temas­estilos/ 25/25