Skip to content

Most visited

Recently visited

navigation

Recursos de elementos de diseño

Un recurso de elemento de diseño es un concepto general para un gráfico que se puede dibujar en la pantalla y puedes obtener con API como getDrawable(int), o aplicar a otro recurso XML mediante atributos como android:drawable y android:icon. Hay distintos tipos de elementos de diseño:

Archivo de mapa de bits
Archivo de gráficos de mapa de bits (.png, .jpg o .gif). Crea un BitmapDrawable.
Archivo nine-patch
Archivo PNG con regiones que pueden estirarse para hacer posible el cambio de tamaño según el contenido (.9.png). Crea un NinePatchDrawable.
Lista de capas
Elemento de diseño que gestiona una matriz de otros elementos de diseño. Estos elementos se dibujan en el orden de la matriz: el elemento con el índice más grande se dibuja encima. Crea un LayerDrawable.
Lista de estados
Archivo XML que hace referencia a distintos gráficos de mapa de bits para diferentes estados (por ejemplo, para usar otra imagen cuando se presiona un botón). Crea un StateListDrawable.
Lista de niveles
Archivo XML que define un elemento de diseño capaz de gestionar varios elementos de diseño alternativos (cada uno con un valor numérico máximo). Crea un LevelListDrawable.
Elemento de diseño de transición
Archivo XML que define un elemento de diseño capaz de fundirse entre dos recursos de elementos de diseño. Crea un TransitionDrawable.
Elemento de diseño de inserción
Archivo XML que define un elemento de diseño capaz de insertar otro elemento de diseño en una distancia específica. Resulta útil cuando un elemento View requiere un elemento de diseño de fondo más pequeño que los límites reales de la vista.
Elemento de diseño de recorte
Archivo XML que define un elemento de diseño capaz de recortar otro elemento de diseño según el valor de nivel actual del elemento de diseño. Crea un ClipDrawable.
Elemento de diseño de escala
Archivo XML que define un elemento de diseño capaz de cambiar el tamaño de otro elemento de diseño según el valor de nivel actual. Crea un ScaleDrawable.
Elemento de diseño de forma
Archivo XML que define una forma geométrica, con sus colores y gradientes. Crea un ShapeDrawable.

También puedes consultar el documento sobre recursos de animación para conocer la manera de crear un AnimationDrawable.

Nota: Un recurso de color también se puede usar como un elemento de diseño en XML. Por ejemplo, cuando creas un elemento de diseño de lista de estados, puedes hacer referencia a un recurso de color para el atributo android:drawable (android:drawable="@color/green").

Mapa de bits

Una imagen de mapa de bits. Android admite archivos de mapa de bits en tres formatos: .png (recomendable), .jpg (aceptable) y .gif (no recomendable).

Puedes hacer referencia a un archivo de mapa de bits de forma directa con el nombre del archivo como ID del recurso o crear un ID de recurso de alias en XML.

Nota: Durante el proceso de compilación, la herramienta aapt puede optimizar automáticamente los archivos de mapa de bits mediante compresión sin pérdida de imagen. Por ejemplo, es posible convertir un PNG de color verdadero que no requiera más de 256 colores en un PNG de 8 bits con una paleta de colores. Como resultado, se obtendrá una imagen de la misma calidad que requiere menos memoria. Por lo tanto, ten en cuenta que los binarios de imagen de este directorio pueden cambiar durante la compilación. Si planeas leer una imagen como una secuencia de bits para convertirla a un mapa de bits, dispón tus imágenes en la carpeta res/raw/; no se optimizarán en esta ubicación.

Archivo de mapa de bits

Un archivo de mapa de bits es un archivo .png, .jpg o .gif. Android crea un recurso Drawable para todos estos archivos cuando los guardas en el directorio res/drawable/.

ubicación del archivo:
res/drawable/filename.png (.png, .jpg o .gif)
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento BitmapDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
ejemplo:
Con una imagen guardada en res/drawable/myimage.png, este XML de diseño usa la imagen en un elemento View:
<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

El siguiente código de aplicación obtiene la imagen como un Drawable.

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);
consulta también:

Mapa de bits XML

Un mapa de bits XML es un recurso definido en XML que apunta a un archivo de mapa de bits. Como resultado, se obtiene un alias para un archivo de mapa de bits sin procesar. El XML puede especificar propiedades adicionales para el mapa de bits, como interpolación y representación en mosaicos.

Nota: Puedes usar un elemento <bitmap> como campo secundario de un elemento <item>. Por ejemplo, cuando creas una lista de estados o lista de capas, puedes excluir el atributo android:drawable de un elemento <item> y anidar dentro de este un <bitmap> que defina el elemento de diseño.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento BitmapDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:antialias=["true" | "false"]
    android:dither=["true" | "false"]
    android:filter=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:mipMap=["true" | "false"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
elementos:
<bitmap>
Define la fuente y las propiedades del mapa de bits.

atributos:

xmlns:android
String. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android". Solo es necesario si <bitmap> es el elemento raíz; no es necesario cuando <bitmap> se anida dentro de <item>.
android:src
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño.
android:antialias
Booleano. Habilita o inhabilita el suavizado de contornos.
android:dither
Booleano. Habilita o inhabilita la interpolación del mapa de bits si este no tiene la misma configuración de píxeles que la pantalla (por ejemplo, un mapa de bits ARGB 8888 con una pantalla RGB 565).
android:filter
Booleano. Habilita o inhabilita el filtrado del mapa de bits. El filtrado se usa cuando se encoge o estira el mapa de bits para mejorar la apariencia.
android:gravity
Palabra clave. Define la gravedad del mapa de bits. La gravedad indica la ubicación en la que debe ir el elemento de diseño en su contenedor si el mapa de bits es más chico que el contenedor.

Debe ser uno o más de los siguientes valores constantes (separados por “|”):

ValorDescripción
top Dispone el objeto en la parte superior del contenedor, sin cambiar el tamaño.
bottom Dispone el objeto en la parte inferior del contenedor, sin cambiar el tamaño.
left Dispone el objeto en el extremo izquierdo del contenedor, sin cambiar el tamaño.
right Dispone el objeto en el extremo derecho del contenedor, sin cambiar el tamaño.
center_vertical Dispone el objeto en el centro vertical del contenedor, sin cambiar el tamaño.
fill_vertical Aumenta el tamaño vertical del objeto, si es necesario, para que cubra completamente al contenedor.
center_horizontal Dispone el objeto en el centro horizontal del contenedor, sin cambiar el tamaño.
fill_horizontal Aumenta el tamaño horizontal del objeto, si es necesario, para que cubra completamente al contenedor.
center Dispone al objeto en el centro del contenedor, tanto en el eje vertical como el horizontal (sin cambiar el tamaño).
fill Aumenta el tamaño horizontal y vertical del objeto, si es necesario, para que cubra completamente el contenedor. Es el valor predeterminado.
clip_vertical Opción adicional que se puede establecer para recortar el borde superior o inferior del hijo a los límites del contenedor. El recorte depende de la gravedad vertical: con un valor de gravedad “top” se recorta el borde inferior, con un valor “bottom” se recorta el borde superior y con un valor nulo se recortan ambos bordes.
clip_horizontal Opción adicional que se puede establecer para recortar el borde izquierdo o derecho del campo secundario a los límites del contenedor. El recorte depende de la gravedad horizontal: con un valor de gravedad “left” se recorta el borde derecho, con un valor “right” se recorta el borde izquierdo y con un valor nulo se recortan ambos bordes.
android:mipMap
Booleano. Habilita o inhabilita la sugerencia de mipmap. Para obtener más información, consulta setHasMipMap(). El valor predeterminado es “false”.
android:tileMode
Palabra clave. Define el modo mosaico. Cuando se habilita el modo mosaico, se repite el mapa de bits. En este modo, se ignora la gravedad.

Debe ser uno de los siguientes valores constantes:

ValorDescripción
disabled El mapa de bits no aparece en el modo mosaico. Este es el valor predeterminado.
clamp Replica el color del borde si el sombreador excede de los límites originales.
repeat Repite la imagen del sombreador verticalmente y horizontalmente.
mirror Repite la imagen del sombreador en sentido vertical y horizontal, y alterna imágenes duplicadas para que las imágenes adyacentes siempre encajen.
ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/icon"
    android:tileMode="repeat" />
consulta también:

Nine-patch

Un NinePatch es una imagen PNG en la cual puedes definir sectores que se pueden estirar y que Android puede adecuar cuando el contenido dentro de la vista supera los límites de la imagen normal. Por lo general, uno asigna este tipo de imagen como el fondo de un elemento View con una o más dimensiones establecidas en "wrap_content". Cuando la vista aumenta para adaptarse al contenido, la imagen nine-patch también se ajusta para coincidir con el tamaño del elemento View. Como ejemplo del uso de una imagen nine-patch, podemos mencionar el fondo que usa el widget Button estándar de Android, que se debe estirar para poder adaptar el texto (o la imagen) dentro del botón.

Como en los mapas de bits convencionales, puedes hacer referencia a un archivo nine-patch de forma directa o desde un recurso definido por XML.

Para obtener toda la información sobre cómo crear un archivo nine-patch con sectores que se pueden estirar, consulta el documento sobre gráficos 2D.

Archivo nine-patch

ubicación del archivo:
res/drawable/filename.9.png
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento NinePatchDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
ejemplo:
Con una imagen guardada en res/drawable/myninepatch.9.png, este XML de diseño usa el nine-patch en un elemento View:
<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/myninepatch" />
consulta también:

Nine-patch XML

Un nine-patch XML es un recurso definido en XML que apunta a un archivo nine-patch. El XML puede especificar la interpolación de una imagen.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento NinePatchDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:dither=["true" | "false"] />
elementos:
<nine-patch>
Define la fuente y las propiedades de nine-patch.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
android:src
Recurso de elementos de diseño. Obligatorio. Referencia a un archivo nine-patch.
android:dither
Booleano. Habilita o inhabilita la interpolación del mapa de bits si este no tiene la misma configuración de píxeles que la pantalla (por ejemplo, un mapa de bits ARGB 8888 con una pantalla RGB 565).
ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/myninepatch"
    android:dither="false" />

Lista de capas

Un LayerDrawable es un objeto de diseño que gestiona una matriz de otros elementos de diseño. Cada elemento de diseño de la lista se dibuja en el orden de la lista (el último elemento de diseño de la lista se dibuja encima).

Un elemento <item> representa a cada elemento de diseño dentro de un solo elemento <layer-list>.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento LayerDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>
elementos:
<layer-list>
Obligatorio. Debe ser el elemento raíz. Contiene uno o más elementos <item>.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
<item>
Define un elemento de diseño que se dispondrá en el elemento de diseño de capa, en una posición definida por los atributos. Debe ser un campo secundario de un elemento <selector>. Acepta elementos <bitmap> secundarios.

atributos:

android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño.
android:id
ID del recurso. Un ID de recurso único para este elemento de diseño. Si deseas crear un nuevo ID de recurso para este elemento, usa "@+id/name". El símbolo “+” indica que se debe crear como un ID nuevo. Puedes usar este identificador para obtener y modificar el elemento de diseño con View.findViewById() o Activity.findViewById().
android:top
Entero. Desplazamiento superior en píxeles.
android:right
Entero. Desplazamiento del lado derecho en píxeles.
android:bottom
Entero. Desplazamiento inferior en píxeles.
android:left
Entero. Desplazamiento del lado izquierdo en píxeles.

De forma predeterminada, todos los elementos de diseño se escalan para adaptarse al tamaño de la vista contenedora. Por lo tanto, si dispones tus imágenes en una lista de capas en distintas posiciones, es posible que aumente el tamaño del elemento View y que algunas imágenes se adecuen según sea necesario. Para evitar que los elementos se escalen en la lista, usa un elemento <bitmap> dentro del elemento <item> para especificar el elemento de diseño y definir la gravedad en un componente no escalable, como "center". Por ejemplo, el siguiente <item> define un elemento que se escala para adaptarse al elemento View que lo contiene:

<item android:drawable="@drawable/image" />

Para evitar el ajuste de escala, en el siguiente ejemplo se usa un elemento <bitmap> con gravedad centrada:

<item>
  <bitmap android:src="@drawable/image"
          android:gravity="center" />
</item>
ejemplo:
Archivo XML guardado en res/drawable/layers.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

Observa que en este ejemplo se usa un elemento <bitmap> anidado para definir el recurso del elemento de diseño correspondiente a cada elemento con un valor de gravedad “center”. Esto garantiza que ninguna de las imágenes se escale para adaptarse al tamaño del contenedor debido al cambio de tamaño ocasionado por las imágenes desplazadas.

Este XML de diseño aplica el elemento de diseño en un elemento View:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/layers" />

Como resultado, se obtiene una pila de imágenes con desplazamiento cada vez mayor:

consulta también:

Lista de estados

Un StateListDrawable es un objeto de diseño definido en XML que usa varias imágenes distintas para representar el mismo gráfico, según el estado del objeto. Por ejemplo, un widget Button puede estar en varios estados (presionado, en foco o ninguno de estos) y, mediante un elemento de diseño de lista de estados, puedes cambiar la imagen de fondo para cada estado.

Puedes describir la lista de estados en un archivo XML. Cada gráfico se representa a través de un elemento <item> dentro de un solo elemento <selector>. Cada <item> usa varios atributos para describir el estado en que debería usarse como gráfico del elemento de diseño.

Cuando cambia el estado, se recorre la lista de estados de arriba hacia abajo y se usa el primer elemento que coincida con el estado actual. La selección no se basa en la “mejor coincidencia”; simplemente se trata del primer elemento que cumpla con los mínimos criterios del estado.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento StateListDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_hovered=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_activated=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>
elementos:
<selector>
Obligatorio. Debe ser el elemento raíz. Contiene uno o más elementos <item>.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
android:constantSize
Booleano. Será “true” si el tamaño interno notificado del elemento de diseño permanece constante durante los cambios de estado (el tamaño es el valor máximo de todos los estados). Será “false” si el tamaño varía según el estado actual. El valor predeterminado es “false”.
android:dither
Booleano. Se fija en “true” para habilitar la interpolación del mapa de bits si este no tiene la misma configuración de píxeles que la pantalla (por ejemplo, un mapa de bits ARGB 8888 con una pantalla RGB 565). Se fija en “false” para inhabilitar la interpolación. El valor predeterminado es “true”.
android:variablePadding
Booleano. Será “true” si el relleno del elemento de diseño debe cambiar según el estado seleccionado. Será “false” si el relleno no debe cambiar (según el relleno máximo de todos los estados). Si habilitas esta funcionalidad, deberás realizar tareas de diseño cuando cambie el estado (a menudo, esto no es posible). El valor predeterminado es “false”.
<item>
Define un elemento de diseño que se usará en ciertos estados, según sus atributos. Debe ser un campo secundario de un elemento <selector>.

atributos:

android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño.
android:state_pressed
Booleano. Se fija en “true” si este elemento debe usarse cuando se presiona el objeto (por ejemplo, cuando se toca o selecciona un botón). Se fija en “false” si este elemento debe usarse en el estado predeterminado (no presionado).
android:state_focused
Booleano. Se fija en “true” si este elemento debe usarse cuando el objeto cuenta con foco de entrada (por ejemplo, cuando el usuario seleccione una entrada de texto). Se fija en “false” si este elemento debe usarse en el estado predeterminado (sin foco).
android:state_hovered
Booleano. Se fija en “true” si este elemento debe usarse cuando el cursor se desplaza sobre el objeto. Se fija en “false” si este elemento debe usarse en el estado predeterminado, cuando el cursor no se desplace sobre el objeto. A menudo, este elemento de diseño será el mismo que el del estado “focused”.

Se introdujo en el nivel de API 14.

android:state_selected
Booleano. Se fija en “true” si este elemento debe usarse cuando el usuario navegue con un control direccional y tenga seleccionado el objeto (por ejemplo, cuando navegue por una lista con un control de dirección). Se fija en “false” si este elemento debe usarse cuando el objeto no esté seleccionado.

Este estado se usa cuando el estado de foco (android:state_focused) no es suficiente (por ejemplo, cuando una vista de lista se halla enfocada y se selecciona un elemento de esta con un control de dirección).

android:state_checkable
Booleano. Se fija en “true” si este elemento debe usarse cuando el objeto se pueda marcar. Se fija en “false” si este elemento debe usarse cuando el objeto no se puede marcar. (Solo será útil si el objeto puede realizar una transición entre un widget que se puede marcar y uno que no se puede marcar).
android:state_checked
Booleano. Se fija en “true” si este elemento debe usarse cuando se marca el objeto. Se fija en “false” si este elemento debe usarse cuando el objeto está desmarcado.
android:state_enabled
Booleano. Se fija en “true” si este elemento debe usarse cuando el objeto está habilitado (capaz de recibir eventos “touch” o “click”). Se fija en “false” si este elemento debe usarse cuando el objeto está inhabilitado.
android:state_activated
Booleano. Se fija en “true” si este elemento debe usarse cuando el objeto está activado como selección persistente (por ejemplo, para “destacar” el elemento de lista previamente seleccionado en una vista de navegación persistente). Se fija en “false” si este elemento debe usarse cuando el objeto no está activado.

Se introdujo en el nivel de API 11.

android:state_window_focused
Booleano. Se fija en “true” si este elemento debe usarse cuando la ventana de la aplicación se halla enfocada (la aplicación está en primer plano). Se fija en “false” si este elemento debe usarse cuando la ventana de la aplicación no se halla enfocada (por ejemplo, si se abre el panel de notificaciones o aparece un diálogo).

Nota: Recuerda que Android aplica el primer elemento de la lista de estados que coincida con el estado actual del objeto. Por lo tanto, si el primer elemento de la lista no contiene ninguno de los atributos de estado anteriores, se usará en cada ocasión. Por esta razón, el valor predeterminado siempre debe ser el último (como se demuestra en el siguiente ejemplo).

ejemplo:
Archivo XML guardado en res/drawable/button.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

Este XML de diseño aplica el elemento de diseño de lista de estados en un botón:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />
consulta también:

Lista de niveles

Un elemento de diseño capaz de gestionar varios elementos de diseño alternativos (cada uno con un valor numérico máximo). Si se fija el valor del nivel de un elemento de diseño con setLevel(), se cargará el recurso del elemento de diseño en la lista de niveles cuyo valor android:maxLevel sea superior o igual al valor pasado al método.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento LevelListDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<level-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
</level-list>
elementos:
<level-list>
Debe ser el elemento raíz. Contiene uno o más elementos <item>.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
<item>
Define un elemento de diseño que se usará a cierto nivel.

atributos:

android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño que se insertará.
android:maxLevel
Entero. Nivel máximo permitido para este elemento.
android:minLevel
Entero. Nivel mínimo permitido para este elemento.
ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/status_off"
        android:maxLevel="0" />
    <item
        android:drawable="@drawable/status_on"
        android:maxLevel="1" />
</level-list>

Una vez aplicado en una View, el nivel se puede cambiar con setLevel() o setImageLevel().

consulta también:

Elemento de diseño de transición

Un TransitionDrawable es un elemento de diseño capaz de fundirse entre los dos recursos de elementos de diseño.

Un elemento <item> representa a cada elemento de diseño dentro de un solo elemento <transition>. No se admiten más de dos elementos. Para realizar una transición hacia adelante, llama a startTransition(). Para realizar una transición hacia atrás, llama a reverseTransition().

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento TransitionDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>
elementos:
<transition>
Obligatorio. Debe ser el elemento raíz. Contiene uno o más elementos <item>.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
<item>
Define un elemento de diseño que se usará como parte de la transición del elemento de diseño. Debe ser un campo secundario de un elemento <transition>. Acepta elementos <bitmap> secundarios.

atributos:

android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño.
android:id
ID del recurso. Un ID de recurso único para este elemento de diseño. Si deseas crear un nuevo ID de recurso para este elemento, usa "@+id/name". El símbolo “+” indica que se debe crear como un ID nuevo. Puedes usar este identificador para obtener y modificar el elemento de diseño con View.findViewById() o Activity.findViewById().
android:top
Entero. Desplazamiento superior en píxeles.
android:right
Entero. Desplazamiento del lado derecho en píxeles.
android:bottom
Entero. Desplazamiento inferior en píxeles.
android:left
Entero. Desplazamiento del lado izquierdo en píxeles.
ejemplo:
Archivo XML guardado en res/drawable/transition.xml:
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on" />
    <item android:drawable="@drawable/off" />
</transition>

Este XML de diseño aplica el elemento de diseño en un elemento View:

<ImageButton
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/transition" />

Y el siguiente código realiza una transición de 500 ms del primer elemento al segundo:

ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);
consulta también:

Elemento de diseño de inserción

Elemento de diseño definido en XML que inserta otro elemento de diseño en una distancia específica. Resulta útil cuando un elemento View requiere un fondo de dimensiones inferiores a los límites reales de la vista.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento InsetDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:insetTop="dimension"
    android:insetRight="dimension"
    android:insetBottom="dimension"
    android:insetLeft="dimension" />
elementos:
<inset>
Define el elemento de diseño de inserción. Debe ser el elemento raíz.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño que se insertará.
android:insetTop
Dimensión. La inserción superior, como valor de dimensión o recurso de dimensión.
android:insetRight
Dimensión. La inserción del lado derecho, como valor de dimensión o recurso de dimensión.
android:insetBottom
Dimensión. La inserción inferior, como valor de dimensión o recurso de dimensión.
android:insetLeft
Dimensión. La inserción del lado izquierdo, como valor de dimensión o recurso de dimensión.
ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/background"
    android:insetTop="10dp"
    android:insetLeft="10dp" />
consulta también:

Elemento de diseño de recorte

Un elemento de diseño definido en XML que recorta otro elemento de diseño según el nivel actual de este elemento de diseño. Puedes controlar el nivel de recorte del elemento de diseño secundario a lo ancho y alto según el nivel, y también un valor de gravedad para controlar la ubicación en el contenedor. Por lo general, se usa para implementar componentes como barras de progreso.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento ClipDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />
elementos:
<clip>
Define el elemento de diseño de recorte. Debe ser el elemento raíz.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño que se recortará.
android:clipOrientation
Palabra clave. La orientación del recorte.

Debe ser uno de los siguientes valores constantes:

ValorDescripción
horizontal Recorta el elemento de diseño horizontalmente.
vertical Recorta el elemento de diseño verticalmente.
android:gravity
Palabra clave. Especifica el lugar de recorte dentro del elemento de diseño.

Debe ser uno o más de los siguientes valores constantes (separados por “|”):

ValorDescripción
top Dispone el objeto en la parte superior del contenedor, sin cambiar el tamaño. Cuando clipOrientation es "vertical", el recorte se realiza en la parte inferior del elemento de diseño.
bottom Dispone el objeto en la parte inferior del contenedor, sin cambiar el tamaño. Cuando clipOrientation es "vertical", el recorte se realiza en la parte superior del elemento de diseño.
left Dispone el objeto en el extremo izquierdo del contenedor, sin cambiar el tamaño. Es el valor predeterminado. Cuando clipOrientation es "horizontal", el recorte se realiza en el lateral derecho del elemento de diseño. Es el valor predeterminado.
right Dispone el objeto en el extremo derecho del contenedor, sin cambiar el tamaño. Cuando clipOrientation es "horizontal", el recorte se realiza en el lateral izquierdo del elemento de diseño.
center_vertical Dispone el objeto en el centro vertical del contenedor, sin cambiar el tamaño. El recorte funciona como el valor de gravedad "center".
fill_vertical Aumenta el tamaño vertical del objeto, si es necesario, para que cubra completamente al contenedor. Cuando clipOrientation sea "vertical", no habrá recorte porque el elemento de diseño cubre el espacio vertical (a menos que el nivel del elemento de diseño sea 0 y, por ello, no visible).
center_horizontal Dispone el objeto en el centro horizontal del contenedor, sin cambiar el tamaño. El recorte funciona como el valor de gravedad "center".
fill_horizontal Aumenta el tamaño horizontal del objeto, si es necesario, para que cubra completamente al contenedor. Cuando clipOrientation sea "horizontal", no habrá recorte porque el elemento de diseño cubre el espacio horizontal (a menos que el nivel del elemento de diseño sea 0 y, por ello, no visible).
center Dispone al objeto en el centro del contenedor, tanto en el eje vertical como el horizontal (sin cambiar el tamaño). Cuando clipOrientation sea "horizontal", el recorte se aplicará a la izquierda y a la derecha. Cuando clipOrientation sea "vertical", el recorte se aplicará en la parte superior e inferior.
fill Aumenta el tamaño horizontal y vertical del objeto, si es necesario, para que cubra completamente el contenedor. No habrá recorte porque el elemento de diseño cubre el espacio horizontal y vertical (a menos que el nivel del elemento de diseño sea 0 y, por ello, no visible).
clip_vertical Opción adicional que se puede establecer para recortar el borde superior o inferior del hijo a los límites del contenedor. El recorte depende de la gravedad vertical: con un valor de gravedad “top” se recorta el borde inferior, con un valor “bottom” se recorta el borde superior y con un valor nulo se recortan ambos bordes.
clip_horizontal Opción adicional que se puede establecer para recortar el borde izquierdo o derecho del campo secundario a los límites del contenedor. El recorte depende de la gravedad horizontal: con un valor de gravedad “left” se recorta el borde derecho, con un valor “right” se recorta el borde izquierdo y con un valor nulo se recortan ambos bordes.
ejemplo:
Archivo XML guardado en res/drawable/clip.xml:
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/android"
    android:clipOrientation="horizontal"
    android:gravity="left" />

El siguiente XML de diseño usa el elemento de diseño de recorte en un elemento View:

<ImageView
    android:id="@+id/image"
    android:background="@drawable/clip"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

El siguiente código obtiene el elemento de diseño y aumenta el recorte para mostrar la imagen de manera progresiva:

ImageView imageview = (ImageView) findViewById(R.id.image);
ClipDrawable drawable = (ClipDrawable) imageview.getDrawable();
drawable.setLevel(drawable.getLevel() + 1000);

Si se aumenta el nivel, disminuye la cantidad de recorte y la imagen se muestra poco a poco. Aquí se muestra a un nivel de 7000:

Nota: El nivel predeterminado es 0: la imagen está completamente recortada y no es visible. Cuando el nivel es 10 000, la imagen no se recorta y es completamente visible.

consulta también:

Elemento de diseño de escala

Un elemento de diseño definido en XML que cambia el tamaño de otro elemento de diseño según el nivel actual.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento ScaleDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                          "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                          "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:scaleHeight="percentage"
    android:scaleWidth="percentage" />
elementos:
<scale>
Define el elemento de diseño de escala. Debe ser el elemento raíz.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
android:drawable
Recurso de elementos de diseño. Obligatorio. Referencia a un recurso de elemento de diseño.
android:scaleGravity
Palabra clave. Especifica la posición de gravedad después del ajuste de escala.

Debe ser uno o más de los siguientes valores constantes (separados por “|”):

ValorDescripción
top Dispone el objeto en la parte superior del contenedor, sin cambiar el tamaño.
bottom Dispone el objeto en la parte inferior del contenedor, sin cambiar el tamaño.
left Dispone el objeto en el extremo izquierdo del contenedor, sin cambiar el tamaño. Es el valor predeterminado.
right Dispone el objeto en el extremo derecho del contenedor, sin cambiar el tamaño.
center_vertical Dispone el objeto en el centro vertical del contenedor, sin cambiar el tamaño.
fill_vertical Aumenta el tamaño vertical del objeto, si es necesario, para que cubra completamente al contenedor.
center_horizontal Dispone el objeto en el centro horizontal del contenedor, sin cambiar el tamaño.
fill_horizontal Aumenta el tamaño horizontal del objeto, si es necesario, para que cubra completamente al contenedor.
center Dispone al objeto en el centro del contenedor, tanto en el eje vertical como el horizontal (sin cambiar el tamaño).
fill Aumenta el tamaño horizontal y vertical del objeto, si es necesario, para que cubra completamente el contenedor.
clip_vertical Opción adicional que se puede establecer para recortar el borde superior o inferior del hijo a los límites del contenedor. El recorte depende de la gravedad vertical: con un valor de gravedad “top” se recorta el borde inferior, con un valor “bottom” se recorta el borde superior y con un valor nulo se recortan ambos bordes.
clip_horizontal Opción adicional que se puede establecer para recortar el borde izquierdo o derecho del campo secundario a los límites del contenedor. El recorte depende de la gravedad horizontal: con un valor de gravedad “left” se recorta el borde derecho, con un valor “right” se recorta el borde izquierdo y con un valor nulo se recortan ambos bordes.
android:scaleHeight
Porcentaje. Es la altura de la escala, expresada como porcentaje del límite del elemento de diseño. El formato del valor es XX%. Por ejemplo: “100%”, “12.5%”, etc.
android:scaleWidth
Porcentaje. Es el ancho de la escala, expresada como porcentaje del límite del elemento de diseño. El formato del valor es XX%. Por ejemplo: “100%”, “12.5%”, etc.
ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/logo"
    android:scaleGravity="center_vertical|center_horizontal"
    android:scaleHeight="80%"
    android:scaleWidth="80%" />
consulta también:

Elemento de diseño de forma

Se trata de una forma genérica definida en XML.

ubicación del archivo:
res/drawable/filename.xml
El nombre del archivo se usa como ID del recurso.
tipo de datos del recurso compilado:
Puntero de recurso para un elemento GradientDrawable.
referencia del recurso:
En Java: R.drawable.filename
En XML: @[package:]drawable/filename
sintaxis:
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>
elementos:
<shape>
Elemento de diseño de forma. Debe ser el elemento raíz.

atributos:

xmlns:android
String. Obligatorio. Define el espacio de nombres del XML, que debe ser "http://schemas.android.com/apk/res/android".
android:shape
Palabra clave. Define el tipo de forma. Estos son los valores válidos:
ValorDescripción
"rectangle" Rectángulo que cubre el elemento View contenedor. Es la forma predeterminada.
"oval" Forma ovalada que cubre las dimensiones del elemento View contenedor.
"line" Línea horizontal que se extiende a lo ancho del elemento View contenedor. Esta forma requiere el elemento <stroke> para definir el espesor de la línea.
"ring" Forma de anillo.

Los siguientes atributos solo se usan cuando android:shape="ring":

android:innerRadius
Dimensión. Radio de la parte interna del anillo (el orificio del centro), como valor de dimensión o recurso de dimensión.
android:innerRadiusRatio
Flotante. Radio de la parte interna del anillo, expresado como proporción del ancho del anillo. Por ejemplo, si android:innerRadiusRatio="5", el radio interno es igual al ancho del anillo dividido por 5. android:innerRadius anula este valor. El valor predeterminado es 9.
android:thickness
Dimensión. Espesor del anillo, como valor de dimensión o recurso de dimensión.
android:thicknessRatio
Flotante. Espesor del anillo, expresado como proporción del ancho del anillo. Por ejemplo, si android:thicknessRatio="2", el espesor es igual al ancho del anillo dividido por 2. android:innerRadius anula este valor. El valor predeterminado es 3.
android:useLevel
Booleano. Se fija en “true” si se usa como LevelListDrawable. Por lo general, debe fijarse en “false”. De lo contrario, es posible que la forma no aparezca.
<corners>
Genera esquinas redondeadas en la forma. Solo servirá si la forma es un rectángulo.

atributos:

android:radius
Dimensión. Radio de todas las esquinas, como valor de dimensión o recurso de dimensión. Los atributos siguientes lo anulan en cada esquina.
android:topLeftRadius
Dimensión. Radio de la esquina superior izquierda, como valor de dimensión o recurso de dimensión.
android:topRightRadius
Dimensión. Radio de la esquina superior derecha, como valor de dimensión o recurso de dimensión.
android:bottomLeftRadius
Dimensión. Radio de la esquina inferior izquierda, como valor de dimensión o recurso de dimensión.
android:bottomRightRadius
Dimensión. Radio de la esquina inferior derecha, como valor de dimensión o recurso de dimensión.

Nota: En cada esquina, se debe proporcionar (inicialmente) un radio de esquina superior a 1. De lo contrario, las esquinas no se redondearán. Si deseas que no se redondeen determinadas esquinas, es posible usar android:radius para fijar un radio de esquina predeterminado superior a 1. A continuación, debes anular cada esquina con los valores deseados y fijar en cero (“0dp”) las esquinas redondeadas.

<gradient>
Especifica un color de gradiente para la forma.

atributos:

android:angle
Entero. El ángulo del gradiente (en grados). De izquierda a derecha, 0. De abajo hacia arriba, 90. Debe ser un múltiplo de 45. El valor predeterminado es 0.
android:centerX
Flotante. Posición X relativa para el centro del gradiente (“0-1.0”).
android:centerY
Flotante. Posición Y relativa del centro del gradiente (“0-1.0”).
android:centerColor
Color. Color opcional entre el color inicial y final, como valor hexadecimal o recurso de color.
android:endColor
Color. Color final, como valor hexadecimal o recurso de color.
android:gradientRadius
Flotante. Radio del gradiente. Solo sirve cuando android:type="radial".
android:startColor
Color. Color inicial, como valor hexadecimal o recurso de color.
android:type
Palabra clave. Tipo de patrón del gradiente que se aplicará. Estos son los valores válidos:
ValorDescripción
"linear" Gradiente lineal. Es el valor predeterminado.
"radial" Gradiente radial. El color inicial es el color del centro.
"sweep" Gradiente con línea de barrido.
android:useLevel
Booleano. Se fija en “true” si se usa como LevelListDrawable.
<padding>
Relleno que se aplicará al elemento del View contenedor (se rellena la posición, no la forma, del contenido del elemento View).

atributos:

android:left
Dimensión. Relleno izquierdo, como valor de dimensión o recurso de dimensión.
android:top
Dimensión. Relleno superior, como valor de dimensión o recurso de dimensión.
android:right
Dimensión. Relleno derecho, como valor de dimensión o recurso de dimensión.
android:bottom
Dimensión. Relleno inferior, como valor de dimensión o recurso de dimensión.
<size>
El tamaño de la forma.

atributos:

android:height
Dimensión. Altura de la forma, como valor de dimensión o recurso de dimensión.
android:width
Dimensión. Ancho de la forma, como valor de dimensión o recurso de dimensión.

Nota: De manera predeterminada, la forma se adecua al tamaño del elemento View contenedor en proporción a las dimensiones definidas aquí. Cuando usas la forma en una ImageView, puedes restringir el ajuste de escala fijando android:scaleType en "center".

<solid>
Un color sólido para cubrir la forma.

atributos:

android:color
Color. Color que se aplicará a la forma, como valor hexadecimal o recurso de color.
<stroke>
Línea de trazo para la forma.

atributos:

android:width
Dimensión. Espesor de la línea, como valor de dimensión o recurso de dimensión.
android:color
Color. Color de la línea, como valor hexadecimal o recurso de color.
android:dashGap
Dimensión. Distancia entre los puntos de una línea, como valor de dimensión o recurso de dimensión. Solo servirá si se fija android:dashWidth.
android:dashWidth
Dimensión. Tamaño de cada línea de puntos, como valor de dimensión o recurso de dimensión. Solo servirá si se fija android:dashGap.
ejemplo:
Archivo XML guardado en res/drawable/gradient_box.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

Este XML de diseño aplica el elemento de diseño de forma a un elemento View:

<TextView
    android:background="@drawable/gradient_box"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

En este código de la aplicación, se obtiene el elemento de diseño de forma y se usa en un elemento View.

Resources res = getResources();
Drawable shape = res. getDrawable(R.drawable.gradient_box);

TextView tv = (TextView)findViewByID(R.id.textview);
tv.setBackground(shape);
consulta también:
This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)