Ya está disponible la segunda Vista previa para desarrolladores de Android 11; pruébala y comparte tus comentarios.

Cómo administrar los recursos de IU de tu app con Resource Manager

Resource Manager es una nueva ventana de herramientas para importar, crear, administrar y usar recursos en tu app. Para abrir la ventana de herramientas, selecciona View > Tool Windows > Resource Manager (Ver> Ventanas de herramientas > Resource Manager) en la barra de menú o Resource Manager en la barra lateral izquierda.

Figura 1: Resource Manager

  1. Haz clic en Add (Agregar)  para agregar un nuevo recurso a tu proyecto. Puedes agregar recursos vectoriales, de imágenes y otros tipos, o importarlos en tu proyecto.
  2. El menú desplegable del módulo te permite ver los recursos específicos de un módulo.
  3. Usa la barra de búsqueda para buscar el módulo seleccionado de un recurso.
  4. Resource Manager administra los elementos de diseño, los colores y los diseños de tu app. Usa estas pestañas para alternar entre los tipos de recursos.
  5. El botón de filtro te permite mostrar recursos de bibliotecas externas.
  6. En el área de contenido principal, se muestran vistas previas de tus recursos. Haz clic con el botón derecho en uno para ver un menú contextual en el que puedes renombrar el recurso y buscar en qué parte de tu app se usa, entre otras opciones.
  7. Haz clic en estos botones para ver los recursos como mosaicos o en una lista.
  8. Haz clic en estos botones para cambiar el tamaño de la vista previa de los recursos.

Además de las funciones mencionadas anteriormente, Resource Manager ofrece una manera simple de importar de forma masiva elementos de diseño en tu proyecto. Puedes arrastrar y soltar archivos de imagen (incluidos los archivos SVG) directamente en Resource Manager o usar el asistente de Import Drawables (Importar elementos de diseño). Para obtener más información, consulta la sección Cómo importar recursos en tu proyecto a continuación.

Haz doble clic en un recurso para ver información más detallada en Resource Manager. Si tienes varias versiones de un recurso, en esta vista detallada se mostrará cada una junto con los calificadores asociados, como en la figura 2. Desde aquí, también puedes hacer doble clic en una versión específica para abrirla en una ventana del editor.

Figura 2: En Resource Manager, se muestran las versiones de un recurso de imagen para diferentes densidades de pantalla.

Cómo importar elementos de diseño en tu proyecto

Para importar recursos de imagen, arrastra y suelta las carpetas o los archivos de recursos directamente en Resource Manager. Una vez que lo hagas, aparecerá el diálogo Import drawables en el que podrás ver un resumen de los recursos y agregar los calificadores necesarios antes de la importación.

Para importar recursos de imagen en tu proyecto, haz lo siguiente:

  1. Arrastra y suelta las imágenes directamente en la ventana Resource Manager en Android Studio. De manera alternativa, haz clic en el ícono del signo más (+), selecciona Import Drawables como se muestra en la figura 3 y, luego, selecciona los archivos y las carpetas que quieras importar.

    Figura 3: Selecciona Import Drawables en el menú desplegable

  2. Aparecerá el diálogo Import drawables. Como se muestra en la figura 4, en este diálogo, se enumeran los recursos para importar. Si proporcionas varias versiones del mismo recurso, deberás agregar calificadores de configuración del dispositivo que describan la configuración específica que admite el recurso. Por ejemplo, si proporcionas varias versiones del mismo recurso para diferentes densidades de pantalla, puedes agregar un calificador Density (de densidad) en cada una. Ten en cuenta que si hay dos o más recursos con el mismo nombre y los mismos calificadores, solo se importará una versión. Para obtener más información sobre los calificadores de recursos, consulta Cómo proporcionar recursos alternativos.

    Figura 4: Diálogo Import Drawables

  3. Cuando estés listo para importar tus recursos, haz clic en el botón Import (Importar).

En la ventana Resource Manager, se enumeran los recursos listos para usar en tu proyecto, como se muestra en la figura 5.

Figura 5:: En Resource Manager, ahora se muestran las imágenes importadas.

Cómo analizar automáticamente las densidades de los elementos de diseño

Cuando importas un archivo o una carpeta y su ruta de acceso contiene un calificador de densidad, Resource Manager aplica automáticamente el calificador de densidad como parte del proceso de importación. Resource Manager puede analizar tanto los calificadores de densidad de Android como los factores de escalamiento de iOS.

En esta tabla, se enumera cómo se representan las diferentes densidades compatibles con Android y iOS:

Densidad Calificador de densidad de Android Factor de escalamiento de iOS
Densidad baja (~120 dpi) ldpi no admitido
Densidad media (~160 dpi) mdpi escalamiento original
Densidad alta (~240 dpi) hdpi no admitido
Densidad muy alta (~320 dpi) xhdpi @2x
Densidad muy muy alta (~480 dpi) xxhdpi @3x
Densidad extremadamente alta (~640 dpi) xxxhdpi @4x

Estos son algunos ejemplos de cómo las rutas de acceso de las entradas se traducen en rutas de acceso de recursos luego de la importación:

Calificador de densidad de Android: hdpi
Ruta de acceso de la entrada: /UserFolder/icon1/hdpi/icon.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-hdpi/icon.png
Calificador de densidad de Android: xxhdpi
Ruta de acceso de la entrada: /UserFolder/icon1/abc-xxhdpi/icon.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xxhdpi/icon.png
Factor de escalamiento de iOS: @2x
Ruta de acceso de la entrada: /UserFolder/icon1/icon@2x.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon.png
Factor de escalamiento de iOS: @2x
Ruta de acceso de la entrada: /UserFolder/icon1/icon@2x_alternate.png
Ruta de acceso del recurso: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon_alternate.png

Para obtener más información, consulta Cómo admitir diferentes densidades de píxeles.

Cómo arrastrar y soltar elementos en tu diseño

Puedes arrastrar y soltar elementos de diseño desde Resource Manager directamente en un diseño. Al hacerlo, en Resource Manager se crea un valor ImageView correspondiente para ese elemento de diseño, como se muestra en la animación 1:

Animación 1: Acción de arrastrar y soltar elementos de diseño en un diseño en la vista Design (Diseño)

También puedes arrastrar y soltar la vista XML en la pestaña Text (Texto), como se muestra en la animación 2:

Animación 2: Acción de arrastrar y soltar elementos de diseño en un diseño en la vista Text

Cuando sueltas un elemento de diseño en un diseño en la pestaña Text, el código que se genera difiere en función de dónde lo sueltas:

  • Si sueltas el elemento de diseño en un área en blanco, genera el valor ImageView correspondiente en Resource Manager.
  • Si sueltas el elemento de diseño sobre algún atributo, se reemplaza ese valor del atributo con una referencia al elemento de diseño en Resource Manager.
  • Si sueltas un elemento de diseño en un elemento ImageView existente, se reemplaza el atributo original correspondiente en Resource Manager.