Si necesitas mostrar imágenes estáticas en tu app, puedes usar la clase Drawable
y sus subclases para dibujar imágenes y formas. Un Drawable
es una abstracción general que representa algo que se puede dibujar. Las diversas subclases ayudan en situaciones específicas de imágenes, y puedes extenderlas para definir tus propios elementos de diseño que se comportan de maneras únicas.
Hay dos formas de definir un Drawable
y crear una instancia de él, además de usar los constructores de clase:
- Aumenta un recurso de imagen (un archivo de mapa de bits) guardado en tu proyecto.
- Aumenta un recurso XML que define las propiedades del elemento de diseño.
Nota: Es posible que prefieras usar un elemento de diseño vectorial, que define una imagen con un conjunto de puntos, líneas y curvas, junto con la información de color asociada. Esto permite que los elementos de diseño vectoriales se escalen para diferentes tamaños sin perder calidad. Para obtener más información, consulta Descripción general de los elementos de diseño vectoriales.
Cómo crear elementos de diseño a partir de recursos de imágenes
Puedes hacer referencia a un archivo de imagen desde los recursos de tu proyecto para agregar gráficos a tu app. Los tipos de archivo admitidos son PNG (preferido), JPG (aceptable) y GIF (no recomendable). Los íconos, logotipos y demás gráficos de las apps, como los que se usan en los juegos, son adecuados para esta técnica.
Para usar un recurso de imagen, agrega el archivo al directorio res/drawable/
de tu proyecto. Una vez que estés en el proyecto, puedes hacer referencia al recurso de imagen desde tu código o tu diseño XML. De cualquier manera, se hace referencia a él con un
ID de recurso, que es el nombre del archivo sin la extensión del tipo de archivo. Por ejemplo, haz referencia a my_image.png
como my_image
.
Nota: Durante el proceso de compilación, la herramienta aapt
puede optimizar automáticamente los recursos de imagen que se encuentran en el directorio res/drawable/
mediante la compresión de imágenes sin pérdidas. Por ejemplo, un archivo PNG con color verdadero que no requiera más de 256 colores se puede convertir en un PNG de 8 bits con una paleta de colores. Como resultado, se genera una imagen de la misma calidad, pero que requiere menos memoria. Como resultado, los objetos binarios de imagen de este directorio pueden cambiar en el tiempo de compilación. Si planeas leer una imagen como un flujo de bits para convertirla en un mapa de bits, coloca tus imágenes en la carpeta res/raw/
, donde la herramienta aapt
no las modifica.
En el siguiente fragmento de código, se muestra cómo compilar un ImageView
que use una imagen creada a partir de un recurso de elementos de diseño y la agregue al diseño:
Kotlin
private lateinit var constraintLayout: ConstraintLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // Instantiate an ImageView and define its properties val i = ImageView(this).apply { setImageResource(R.drawable.my_image) contentDescription = resources.getString(R.string.my_image_desc) // set the ImageView bounds to match the Drawable's dimensions adjustViewBounds = true layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT) } // Create a ConstraintLayout in which to add the ImageView constraintLayout = ConstraintLayout(this).apply { // Add the ImageView to the layout. addView(i) } // Set the layout as the content view. setContentView(constraintLayout) }
Java
ConstraintLayout constraintLayout; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Create a ConstraintLayout in which to add the ImageView constraintLayout = new ConstraintLayout(this); // Instantiate an ImageView and define its properties ImageView i = new ImageView(this); i.setImageResource(R.drawable.my_image); i.setContentDescription(getResources().getString(R.string.my_image_desc)); // set the ImageView bounds to match the Drawable's dimensions i.setAdjustViewBounds(true); i.setLayoutParams(new ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); // Add the ImageView to the layout and set the layout as the content view. constraintLayout.addView(i); setContentView(constraintLayout); }
En otros casos, te recomendamos que controles tu recurso de imagen como un objeto Drawable
, como se muestra en el siguiente ejemplo:
Kotlin
val myImage: Drawable = ResourcesCompat.getDrawable(context.resources, R.drawable.my_image, null)
Java
Resources res = context.getResources(); Drawable myImage = ResourcesCompat.getDrawable(res, R.drawable.my_image, null);
Advertencia: Cada recurso único de tu proyecto puede mantener un solo estado, sin importar cuántos objetos diferentes crees para él. Por ejemplo, si creas una instancia de dos objetos Drawable
a partir del mismo recurso de imagen y cambias una propiedad (como el valor alfa) de un objeto, también afectará al otro. Cuando se trata de varias instancias de un recurso de imagen, en lugar de transformar directamente el objeto Drawable
, debes realizar una animación de interpolación.
En el siguiente fragmento de XML, se muestra cómo agregar un recurso de elemento de diseño a una ImageView
en el diseño XML:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/my_image" android:contentDescription="@string/my_image_desc" />
Para obtener más información sobre cómo usar los recursos del proyecto, consulta Recursos y elementos.
Nota: Cuando uses recursos de imagen como fuente de los elementos de diseño, asegúrate de que las imágenes tengan el tamaño apropiado para varias densidades de píxeles. Si las imágenes no son correctas, se escalarán verticalmente para ajustarse, lo que puede generar artefactos en tus elementos de diseño. Para obtener más información, consulta Cómo brindar compatibilidad con diferentes densidades de píxeles.
Cómo crear elementos de diseño a partir de recursos de XML
Si quieres crear un objeto Drawable
que en principio no dependa de variables definidas por tu código o la interacción del usuario, una buena opción es definir Drawable
en XML. Incluso si esperas que tu Drawable
cambie sus propiedades durante la interacción del usuario con tu app, considera definir el objeto en XML, ya que puedes modificar las propiedades después de crear una instancia del objeto.
Después de definir tu Drawable
en XML, guarda el archivo en el directorio res/drawable/
de tu proyecto. En el siguiente ejemplo, se muestra el XML que define un recurso TransitionDrawable
, el cual se hereda de Drawable
:
<!-- res/drawable/expand_collapse.xml --> <transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/image_expand"/> <item android:drawable="@drawable/image_collapse"/> </transition>
Luego, llama a Resources#getDrawable()
y pasa el ID de recurso de tu archivo en formato XML para recuperar el objeto y crear una instancia de él. Cualquier subclase Drawable
que admita el método inflate()
puede definirse en XML y tu app puede crear instancias de este.
Cada clase de elemento de diseño que admite el aumento XML usa atributos XML específicos que ayudan a definir las propiedades del objeto. El siguiente código crea una instancia de TransitionDrawable
y lo establece como contenido de un objeto ImageView
:
Kotlin
val transition= ResourcesCompat.getDrawable( context.resources, R.drawable.expand_collapse, null ) as TransitionDrawable val image: ImageView = findViewById(R.id.toggle_image) image.setImageDrawable(transition) // Description of the initial state that the drawable represents. image.contentDescription = resources.getString(R.string.collapsed) // Then you can call the TransitionDrawable object's methods. transition.startTransition(1000) // After the transition is complete, change the image's content description // to reflect the new state.
Java
Resources res = context.getResources(); TransitionDrawable transition = (TransitionDrawable) ResourcesCompat.getDrawable(res, R.drawable.expand_collapse, null); ImageView image = (ImageView) findViewById(R.id.toggle_image); image.setImageDrawable(transition); // Description of the initial state that the drawable represents. image.setContentDescription(getResources().getString(R.string.collapsed)); // Then you can call the TransitionDrawable object's methods. transition.startTransition(1000); // After the transition is complete, change the image's content description // to reflect the new state.
Para obtener más información sobre los atributos XML admitidos, consulta las clases enumeradas anteriormente.
Elementos de diseño de forma
Un objeto ShapeDrawable
puede ser una buena opción cuando quieres dibujar de forma dinámica un gráfico bidimensional. Puedes dibujar formas básicas de manera programática en un objeto ShapeDrawable
y aplicar los estilos que necesite tu app.
ShapeDrawable
es una subclase de Drawable
. Por este motivo, puedes usar una ShapeDrawable
donde se espere una Drawable
. Por ejemplo, puedes usar un objeto ShapeDrawable
para establecer el fondo de una vista si lo pasas al método setBackgroundDrawable()
de la vista. También puedes dibujar la forma como su propia vista personalizada y agregarla a un diseño en tu app.
Debido a que ShapeDrawable
tiene su propio método draw()
, puedes crear una subclase de View
que dibuje el objeto ShapeDrawable
durante el evento onDraw()
, como se muestra en el siguiente ejemplo de código:
Kotlin
class CustomDrawableView(context: Context) : View(context) { private val drawable: ShapeDrawable = run { val x = 10 val y = 10 val width = 300 val height = 50 contentDescription = context.resources.getString(R.string.my_view_desc) ShapeDrawable(OvalShape()).apply { // If the color isn't set, the shape uses black as the default. paint.color = 0xff74AC23.toInt() // If the bounds aren't set, the shape can't be drawn. setBounds(x, y, x + width, y + height) } } override fun onDraw(canvas: Canvas) { drawable.draw(canvas) } }
Java
public class CustomDrawableView extends View { private ShapeDrawable drawable; public CustomDrawableView(Context context) { super(context); int x = 10; int y = 10; int width = 300; int height = 50; setContentDescription(context.getResources().getString( R.string.my_view_desc)); drawable = new ShapeDrawable(new OvalShape()); // If the color isn't set, the shape uses black as the default. drawable.getPaint().setColor(0xff74AC23); // If the bounds aren't set, the shape can't be drawn. drawable.setBounds(x, y, x + width, y + height); } protected void onDraw(Canvas canvas) { drawable.draw(canvas); } }
Puedes usar la clase CustomDrawableView
en la muestra de código anterior como lo harías con cualquier otra vista personalizada. Por ejemplo, puedes agregarla de manera programática a una actividad de tu app, como se muestra en el siguiente ejemplo:
Kotlin
private lateinit var customDrawableView: CustomDrawableView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) customDrawableView = CustomDrawableView(this) setContentView(customDrawableView) }
Java
CustomDrawableView customDrawableView; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); customDrawableView = new CustomDrawableView(this); setContentView(customDrawableView); }
Si deseas usar la vista personalizada en el diseño XML, la clase CustomDrawableView
debe anular el constructor View(Context, AttributeSet)
, al que se llama cuando la clase se aumenta desde XML. En el siguiente ejemplo, se muestra cómo declarar el CustomDrawableView
en el diseño XML:
<com.example.shapedrawable.CustomDrawableView android:layout_width="fill_parent" android:layout_height="wrap_content" />
La clase ShapeDrawable
, como muchos otros tipos de elementos de diseño en el paquete android.graphics.drawable
, te permite definir varias propiedades del objeto mediante el uso de métodos públicos. Algunas propiedades de ejemplo que puedes ajustar incluyen transparencia alfa, filtro de color, interpolación, opacidad y color.
También puedes definir formas básicas de elementos de diseño con recursos XML. Para obtener más información, consulta Elemento de diseño de forma en Tipos de recursos de elementos de diseño.
Elementos de diseño de NinePatch
Un gráfico NinePatchDrawable
es una imagen de mapa de bits extensible que puedes usar como fondo de una vista. Android cambia automáticamente el tamaño del gráfico para adaptarse al contenido de la vista. Un ejemplo de uso de una imagen de NinePatch es el fondo que usan los botones estándar de Android: los botones deben estirarse para adaptarse a cadenas de varias longitudes. Un gráfico de NinePatch es una imagen PNG estándar que incluye un borde adicional de 1 píxel.
Debe guardarse con la extensión 9.png
en el directorio res/drawable/
de tu proyecto.
Usa el borde para definir las áreas extensibles y estáticas de la imagen. Para indicar una sección extensible, dibuja una (o más) líneas negras de 1 píxel de ancho en las partes izquierda y superior del borde (los demás píxeles del borde deben ser completamente transparentes o blancos). Puedes tener todas las secciones expansibles que quieras. El tamaño relativo de las secciones expandibles sigue siendo el mismo, por lo que la sección más grande siempre sigue siendo la más grande.
También puedes definir una sección opcional del elemento de diseño de la imagen (de hecho, las líneas de relleno) dibujando una línea a la derecha y otra en la parte inferior. Si un objeto View
establece el gráfico de NinePatch como fondo y, luego, especifica el texto de la vista, se expande para que todo el texto ocupe solo el área designada por las líneas inferior y derecha (si se incluyen).
Si no se incluyen las líneas de padding, Android usa las líneas izquierda y superior para definir esta área del elemento de diseño.
Para aclarar la diferencia entre las líneas, la izquierda y la superior definen los píxeles de la imagen que se pueden replicar para estirar la imagen. Las líneas inferior y derecha definen el área relativa dentro de la imagen que el contenido de la vista puede ocupar.
En la figura 1, se muestra un ejemplo de un gráfico de NinePatch que se usa para definir un botón:
Este gráfico de NinePatch define un área extensible con las líneas izquierda y superior, y el área del elemento de diseño con las líneas inferior y derecha. En la imagen superior, las líneas grises punteadas identifican las regiones de la imagen que se replican para estirar la imagen. El rectángulo rosado en la imagen inferior identifica la región en la que se permite el contenido de la vista. Si el contenido no cabe en esta región, la imagen se estirará para que encaje.
La herramienta Draw 9-patch ofrece una manera muy práctica de crear tus imágenes de NinePatch con un editor de gráficos WYSIWYG. Incluso genera advertencias si la región que definiste para el área expandible corre el riesgo de generar artefactos de dibujo como resultado de la replicación de píxeles.
En el siguiente ejemplo de XML de diseño, se muestra cómo agregar un gráfico de NinePatch a un par de botones. La imagen de NinePatch se guarda en res/drawable/my_button_background.9.png
.
<Button android:id="@+id/tiny" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerInParent="true" android:text="Tiny" android:textSize="8sp" android:background="@drawable/my_button_background"/> <Button android:id="@+id/big" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:text="Biiiiiiig text!" android:textSize="30sp" android:background="@drawable/my_button_background"/>
Ten en cuenta que los atributos layout_width
y layout_height
se establecieron en wrap_content
para que el botón se ajuste perfectamente al texto.
En la Figura 2, se muestran los dos botones renderizados desde la imagen XML y la de NinePatch que se muestra arriba. Observa cómo el ancho y la altura del botón varían con el texto, y la imagen de fondo se extiende para adaptarse a él.
Elementos de diseño personalizados
Cuando quieras crear algunos dibujos personalizados, podrás hacerlo si extiendes la clase Drawable
(o cualquiera de sus subclases).
El método más importante para implementar es draw(Canvas)
, ya que proporciona el objeto Canvas
que debes usar para brindar tus instrucciones de dibujo.
En el siguiente código, se muestra una subclase simple de Drawable
que dibuja un círculo:
Kotlin
class MyDrawable : Drawable() { private val redPaint: Paint = Paint().apply { setARGB(255, 255, 0, 0) } override fun draw(canvas: Canvas) { // Get the drawable's bounds val width: Int = bounds.width() val height: Int = bounds.height() val radius: Float = Math.min(width, height).toFloat() / 2f // Draw a red circle in the center canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, redPaint) } override fun setAlpha(alpha: Int) { // This method is required } override fun setColorFilter(colorFilter: ColorFilter?) { // This method is required } override fun getOpacity(): Int = // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE PixelFormat.OPAQUE }
Java
public class MyDrawable extends Drawable { private final Paint redPaint; public MyDrawable() { // Set up color and text size redPaint = new Paint(); redPaint.setARGB(255, 255, 0, 0); } @Override public void draw(Canvas canvas) { // Get the drawable's bounds int width = getBounds().width(); int height = getBounds().height(); float radius = Math.min(width, height) / 2; // Draw a red circle in the center canvas.drawCircle(width/2, height/2, radius, redPaint); } @Override public void setAlpha(int alpha) { // This method is required } @Override public void setColorFilter(ColorFilter colorFilter) { // This method is required } @Override public int getOpacity() { // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE return PixelFormat.OPAQUE; } }
Luego, puedes agregar tu elemento de diseño donde quieras, por ejemplo, en un ImageView
, como se muestra a continuación:
Kotlin
val myDrawing = MyDrawable() val image: ImageView = findViewById(R.id.imageView) image.setImageDrawable(myDrawing) image.contentDescription = resources.getString(R.string.my_image_desc)
Java
MyDrawable mydrawing = new MyDrawable(); ImageView image = findViewById(R.id.imageView); image.setImageDrawable(mydrawing); image.setContentDescription(getResources().getString(R.string.my_image_desc));
En Android 7.0 (nivel de API 24) y versiones posteriores, también puedes definir instancias de tu elemento de diseño personalizado con XML de las siguientes maneras:
- Puedes usar el nombre completo de la clase como el nombre del elemento XML. Para este enfoque, la clase del elemento de diseño personalizado debe ser una clase pública de nivel superior:
<com.myapp.MyDrawable xmlns:android="http://schemas.android.com/apk/res/android" android:color="#ffff0000" />
- Usa
drawable
como el nombre de la etiqueta XML y especifica el nombre de clase completamente calificado del atributo de clase. Este enfoque se puede usar tanto para clases públicas de nivel superior como para clases internas estáticas públicas:<drawable xmlns:android="http://schemas.android.com/apk/res/android" class="com.myapp.MyTopLevelClass$MyDrawable" android:color="#ffff0000" />
Cómo agregar un tono a los elementos de diseño
Con Android 5.0 (nivel de API 21) y versiones posteriores, puedes ajustar el tono de los mapas de bits y nueve parches definidos como máscaras alfa. Puedes cambiar el tono con recursos de color o atributos de tema que se resuelven como recursos de color (por ejemplo, ?android:attr/colorPrimary
). Por lo general, creas estos elementos solo una vez y los colorea automáticamente para que coincidan con tu tema.
Puedes aplicar un tono a los objetos BitmapDrawable
, VectorDrawable
o NinePatchDrawable
con el método setTint()
. También puedes establecer el color y el modo del tono en tus diseños con los atributos android:tint
y android:tintMode
.
Cómo extraer colores destacados de una imagen
La biblioteca de compatibilidad de Android incluye la clase Palette
, que te permite extraer colores destacados de una imagen.
Puedes cargar tus elementos de diseño como un Bitmap
y pasarlo a Palette
para acceder a sus colores.
Para obtener más información, consulta Cómo seleccionar colores con la API de Palette.