Android: estilos y temas

UNA styleresource define el formato y busca una interfaz de usuario. Un estilo se puede aplicar a una Vista individual (desde dentro de un archivo de diseño) oa una Actividad o aplicación completa (desde dentro del archivo de manifiesto).

Definición de estilos

Un estilo se define en un recurso XML que está separado del XML que especifica el diseño. Este archivo XML se encuentra enres/values/ directorio de su proyecto y tendrá <resources>como el nodo raíz que es obligatorio para el archivo de estilo. El nombre del archivo XML es arbitrario, pero debe usar la extensión .xml.

Puede definir varios estilos por archivo usando <style>pero cada estilo tendrá su nombre que identifica de forma única el estilo. Los atributos de estilo de Android se establecen mediante<item> etiqueta como se muestra a continuación -

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>

El valor de <item> puede ser una cadena de palabras clave, un color hexadecimal, una referencia a otro tipo de recurso u otro valor, según la propiedad de estilo.

Usando estilos

Una vez que su estilo está definido, puede usarlo en su archivo de diseño XML usando style atributo de la siguiente manera -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView
      android:id="@+id/text_id"
      style="@style/CustomFontStyle"
      android:text="@string/hello_world" />

</LinearLayout>

Para comprender el concepto relacionado con el estilo de Android, puede consultar el ejemplo de demostración de estilo .

Herencia de estilo

Android admite la herencia de estilo de una manera muy similar a la hoja de estilo en cascada en el diseño web. Puede usar esto para heredar propiedades de un estilo existente y luego definir solo las propiedades que desea cambiar o agregar.

Para implementar un tema personalizado, cree o edite MyAndroidApp / res / values / themes.xml y agregue lo siguiente:

<resources>
   ...
   <style name="MyCustomTheme" parent="android:style/Theme">
   <item name="android:textColorPrimary">#ffff0000</item>
   </style>
   ...
</resources>

En su AndroidManifest.xml, aplique el tema a las actividades que desea diseñar:

<activity
   android:name="com.myapp.MyActivity"
   ...
   android:theme="@style/MyCustomTheme"
   />

Su nuevo tema se aplicará a su actividad y el texto ahora es rojo brillante.

Aplicar colores a los atributos del tema

Su recurso de color se puede aplicar a algunos atributos del tema, como el fondo de la ventana y el color del texto principal, agregando elementos <item> a su tema personalizado. Estos atributos se definen en su archivo styles.xml. Por ejemplo, para aplicar el color personalizado al fondo de la ventana, agregue los siguientes dos elementos <item> a su tema personalizado, definido en el archivo MyAndroidApp / res / values / styles.xml -

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

Uso de un parche de nueve personalizado con botones

Un dibujable de nueve parches es un tipo especial de imagen que se puede escalar en ancho y alto manteniendo su integridad visual. Los nueve parches son la forma más común de especificar la apariencia de los botones de Android, aunque se puede usar cualquier tipo de diseño.

una muestra de botón de nueve parches

Pasos para crear botones de nueve parches

Guarde este mapa de bits como /res/drawable/my_nine_patch.9.png
Define un nuevo estilo
Aplicar el nuevo estilo de botón al atributo buttonStyle de su tema personalizado

Define a new Style

<resources>
   ...
      <style name="MyCustomButton" parent="android:Widget.Button">
      <item name="android:background">@drawable/my_nine_patch</item>
      </style>
   ...
</resources>

Apply the theme

<resources>
   ...
      <style name="MyCustomTheme" parent=...>
         ...
         <item name="android:buttonStyle">@style/MyCustomButton</item>
      </style>
   ...
</resources>

Temas de Android

Espero que hayas entendido el concepto de estilo, así que ahora intentemos entender qué es un Theme. Un tema no es más que un estilo de Android aplicado a una Actividad o aplicación completa, en lugar de una Vista individual.

Así, cuando se aplica un estilo como tema, cada Viewen la Actividad o aplicación aplicará cada propiedad de estilo que admita. Por ejemplo, puede aplicar el mismoCustomFontStyle estilo como tema para una actividad y luego todo el texto dentro de ese Activity tendrá una fuente de espacio único verde.

Para establecer un tema para todas las actividades de su aplicación, abra el AndroidManifest.xml archivar y editar el <application> etiqueta para incluir el android:themeatributo con el nombre del estilo. Por ejemplo

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

Pero si desea que un tema se aplique a una sola actividad en su aplicación, agregue el atributo android: theme solo a la etiqueta <activity>. Por ejemplo

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

Hay varios temas predeterminados definidos por Android que puede usar directamente o heredarlos usando parent atributo de la siguiente manera -

<style name="CustomTheme" parent="android:Theme.Light">
   ...
</style>

Para comprender el concepto relacionado con el tema de Android, puede consultar Ejemplo de demostración de tema .

Diseñando la paleta de colores

El diseño de diseño se puede implementar en función de los colores basados en ellos, por ejemplo, ya que el siguiente diseño está diseñado en función de los colores (azul)

El diseño anterior se ha diseñado en función del archivo style.xml, que se ha colocado en res/values/

<resource>
   <style name="AppTheme" parent="android:Theme.Material">	
      <item name ="android:color/primary">@color/primary</item>
      <item name ="android:color/primaryDark">@color/primary_dark</item>
      <item name ="android:colorAccent/primary">@color/accent</item>
   </style>
<resource>

Estilos y temas predeterminados

La plataforma Android proporciona una gran colección de estilos y temas que puede usar en sus aplicaciones. Puede encontrar una referencia de todos los estilos disponibles en elR.styleclase. Para utilizar los estilos enumerados aquí, reemplace todos los guiones bajos en el nombre del estilo con un punto. Por ejemplo, puede aplicar el tema Theme_NoTitleBar con "@android: style / Theme.NoTitleBar". Puede ver el siguiente código fuente para estilos y temas de Android:

↰ Previous page Next page ↱