Cómo agregar gráficos vectoriales de varias densidades

Android Studio incluye una herramienta llamada Vector Asset Studio que permite agregar íconos de material e importar archivos de gráficos vectoriales redimensionables (SVG) y Adobe Photoshop Document (PSD) a tu proyecto como recursos de elementos de diseño vectoriales. El uso de elementos de diseño vectoriales en lugar de mapas de bits reduce el tamaño de tu APK porque se puede cambiar el tamaño del mismo archivo para diferentes densidades de pantalla sin perder la calidad de imagen. Para versiones anteriores de Android que no admiten elementos de diseño vectoriales, Vector Asset Studio puede, durante el tiempo de compilación, diversificar los tamaños de tus elementos de diseño vectoriales de mapa de bits para cada densidad de pantalla.

Acerca de Vector Asset Studio

Vector Asset Studio agrega un gráfico vectorial al proyecto como un archivo XML que describe la imagen. Mantener un archivo XML puede ser más sencillo que actualizar varios gráficos de trama en varias resoluciones.

Android 4.4 (nivel de API 20) y las versiones anteriores no admiten elementos de diseño vectoriales. Si tu nivel mínimo de API se fija en uno de estos valores, tienes dos opciones al usar Vector Asset Studio: generar archivos de Portable Network Graphic (PNG) (predeterminada) o usar la biblioteca de compatibilidad.

Para ofrecer compatibilidad con versiones anteriores, Vector Asset Studio genera imágenes de trama del elemento de diseño vectorial. Puedes hacer referencia a los elementos de diseño vectoriales como Drawable en código Java o @drawable en código XML; cuando se ejecuta tu app, se muestra la imagen de trama o vectorial correspondiente de manera automática según el nivel de API.

Si deseas usar solo los elementos de diseño vectoriales, puedes utilizar la biblioteca de compatibilidad de Android 23.2 o versiones posteriores. Esta técnica requiere un cambio en tu archivo build.gradle antes de ejecutar Vector Asset Studio, como se describe en Compatibilidad con versiones anteriores de la biblioteca de compatibilidad. La clase VectorDrawableCompat de esa biblioteca te permite admitir VectorDrawable en Android 2.1 (nivel de API 7) y versiones posteriores.

Tipos de gráficos vectoriales compatibles

La especificación de material design de Google proporciona íconos de material que puedes usar en tus apps de Android. Vector Asset Studio te ayuda a elegir, importar y determinar el tamaño de los íconos de material, así como también definir la opacidad y la configuración de la orientación de derecha a izquierda (RTL).

Asimismo, Vector Asset Studio te permite importar tus propios archivos SVG y PSD. SVG es un estándar abierto que se basa en XML del World Wide Web Consortium (W3C). El formato de archivo PSD admite las funciones de Adobe Photoshop. Vector Asset Studio admite los estándares esenciales, pero no todas las funciones de SVG y PSD. Cuando especificas un archivo SVG o PSD, Vector Asset Studio ofrece comentarios inmediatos sobre si el código de gráficos es compatible o no. Convierte el archivo en un archivo XML que contenga el código VectorDrawable. Si recibes errores, debes verificar que tu elemento de diseño vectorial tenga la apariencia que esperas. Para obtener más información sobre las funciones de PSD permitidas, consulta Compatibilidad y restricciones para archivos PSD.

En el caso de Android 5.0 (nivel de API 21) y las versiones posteriores, puedes usar la clase AnimatedVectorDrawable a fin de animar las propiedades de la clase VectorDrawable. Con la biblioteca de compatibilidad, puedes usar la clase AnimatedVectorDrawableCompat a fin de animar la clase VectorDrawable para Android 3.0 (nivel de API 11) y versiones posteriores. Para obtener más información, consulta Cómo animar elementos de diseño vectoriales.

Consideraciones para archivos SVG y PSD

Un elemento de diseño vectorial es apropiado para íconos simples. Los íconos de material proporcionan buenos ejemplos de los tipos de imágenes que funcionan bien como elementos de diseño vectoriales en una app. Por el contrario, muchos íconos de inicio de apps tienen grandes cantidades de detalles, de modo que funcionan mejor como imágenes de trama.

La carga inicial de un elemento de diseño vectorial puede requerir más ciclos de CPU que la imagen de trama correspondiente. Luego, el uso de memoria y el rendimiento son similares entre ambos. Te recomendamos limitar una imagen vectorial a un máximo de 200 × 200 dp; de lo contrario, el diseño puede llevar mucho tiempo.

Aunque los elementos de diseño vectoriales admiten uno o más colores, en muchos casos conviene dar color negro a los íconos (android:fillColor="#FF000000"). Aplicando este enfoque, puedes agregar un matiz al elemento de diseño vectorial que colocaste en un diseño, y el color del ícono cambiará al del matiz. Si no es negro el color del ícono, este puede combinarse con el color del matiz.

Soluciones de compatibilidad con versiones anteriores de elementos de diseño vectoriales

En la siguiente tabla, se resumen las dos técnicas que puedes usar para brindar compatibilidad con versiones anteriores:

Técnica Elementos de diseño en el APK Elementos XML VectorDrawable Versión Marcas de compilación Código de app
Generación de imágenes PNG Vectoriales y de trama Subconjunto compatible

complemento de Android para Gradle 1.5.0 o posterior

Android Studio 2.2 o posterior

Predeterminado Variedad de técnicas de codificación admitidas
Biblioteca de compatibilidad 23.2 o posterior Vector Compatibilidad completa Complemento de Android para Gradle 2.0 o posterior Se solicitan instrucciones de la biblioteca de compatibilidad. Subconjunto de técnicas de codificación admitidas

El uso de elementos de diseño vectoriales puede generar un APK más pequeño, pero la carga inicial de los elementos de diseño vectoriales puede llevar más tiempo.

Generación de imágenes PNG

Android 5.0 (nivel de API 21) y las versiones posteriores proporcionan compatibilidad con elementos de diseño vectoriales. Si tu app tiene un nivel mínimo de API inferior, Vector Asset Studio agrega el archivo de elemento de diseño vectorial a tu proyecto. Además, durante el tiempo de compilación, Gradle crea imágenes de trama PNG con varias resoluciones. Gradle genera las densidades PNG especificadas por la propiedad generatedDensities del lenguaje específico de dominio (DSL) en un archivo build.gradle.

Para Android 5.0 (nivel de API 21) y versiones posteriores, Vector Asset Studio admite todos los elementos VectorDrawable. Para ofrecer compatibilidad con Android 4.4 (nivel de API 20) y versiones anteriores, Vector Asset Studio admite los siguientes elementos XML:

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

Puedes cambiar el código XML que genera Vector Asset Studio, aunque no recomendamos hacerlo. El cambio de valores en el código no debería causar problemas mientras estos sean válidos y estáticos. Si deseas agregar elementos XML, debes asegurarte de que sean compatibles según el nivel mínimo de tu API.

Biblioteca de compatibilidad

Esta técnica exige la biblioteca de compatibilidad de Android 23.2 o versiones posteriores, y un complemento de Android para Gradle 2.0 (o versiones posteriores) y usa solo elementos de diseño vectoriales. La clase VectorDrawableCompat de la biblioteca de compatibilidad te permite admitir VectorDrawable en Android 2.1 (nivel de API 7) y versiones posteriores.

Antes de usar Vector Asset Studio, debes agregar una declaración a tu archivo build.gradle:

    android {
      defaultConfig {
        vectorDrawables.useSupportLibrary = true
      }
    }

    dependencies {
      compile 'com.android.support:appcompat-v7:23.2.0'
    }
    

También debes aplicar técnicas de codificación que admita la biblioteca de compatibilidad, como el uso del atributo app:srcCompat en lugar de android:src para elementos de diseño vectoriales. Para obtener más información, consulta Biblioteca de compatibilidad de Android 23.2.

Cómo ejecutar Vector Asset Studio

Para iniciar Vector Asset Studio:

  1. En Android Studio, abre un proyecto de app de Android.
  2. En la ventana Project, selecciona la vista Android.
  3. Haz clic con el botón derecho en la carpeta res y selecciona New > Vector Asset.
  4. Algunas otras vistas de proyecto y carpetas también cuentan con este elemento de menú.

    Aparecerá Vector Asset Studio.

    Figura 1: Vector Asset Studio

  5. Si en su lugar aparece el diálogo Need Newer Android Plugin for Gradle, corrige tu versión de Gradle de la siguiente manera:
    1. Selecciona File > Project Structure.
    2. En el diálogo Project Structure, selecciona Project.
    3. En el campo Android Plugin Version, cambia el complemento de Android para la versión de Gradle a 1.5.0 o una versión posterior y haz clic en OK.
    4. Gradle sincronizará el proyecto.

    5. En la vista Android de la ventana Project, haz clic con el botón derecho en la carpeta res y selecciona New > Vector Asset.
    6. Aparecerá Vector Asset Studio.

  6. Continúa con la importación de un gráfico vectorial.

Cómo importar un gráfico vectorial

Vector Asset Studio te ayuda a importar un archivo de gráficos vectoriales al proyecto de tu app. Realiza uno de los siguientes procedimientos:

Agrega un ícono de material

Después de abrir Vector Asset Studio, puedes agregar un ícono de material de la siguiente manera:

  1. En Vector Asset Studio, selecciona Material Icon.
  2. En el campo "Icon", haz clic en el botón.
  3. Aparecerá el diálogo Select Icon. Para filtrar qué íconos estarán visibles, selecciona una categoría de ícono de la lista de la izquierda o escribe en el campo de búsqueda como se muestra en la figura 2.

    Figura 2. Filtrado de íconos de material en Vector Asset Studio

  4. Selecciona un ícono de material y haz clic en OK. El ícono aparecerá en la vista previa del elemento de diseño vectorial.

  5. De forma opcional, puedes cambiar la configuración de nombre, tamaño, opacidad y orientación de derecha a izquierda (RTL) del recurso:
    • Name: Escribe un nombre nuevo si no deseas usar el predeterminado. Vector Asset Studio crea automáticamente un nombre único (agrega un número al final del nombre) si ya existe ese nombre de recurso en el proyecto. El nombre solo puede contener caracteres en minúscula, guiones bajos y números.
    • Override: Selecciona esta opción si deseas ajustar el tamaño de la imagen. Cuando escribas un tamaño nuevo, el cambio aparecerá en el área de vista previa.
    • El valor predeterminado es 24 × 24 dp, que se define en la especificación de material design. Deselecciona la casilla de verificación para volver al valor predeterminado.

    • Opacity: Usa el control deslizante para ajustar la opacidad de la imagen. El cambio aparecerá en el área de vista previa.
    • Enable auto mirroring for RTL layout: Selecciona esta opción si deseas mostrar una imagen con otra orientación cuando el diseño sea de derecha a izquierda, en lugar de izquierda a derecha. Por ejemplo, algunos idiomas se leen de derecha a izquierda; si tienes un ícono de flecha, tal vez desees mostrar una imagen con otra orientación en ese caso. Ten en cuenta que si estás trabajando con un proyecto anterior, es posible que también debas agregar android:supportsRtl="true" al manifiesto de la app. La orientación automática es compatible con Android 5.0 (nivel de API 21) y versiones posteriores, y con la biblioteca de compatibilidad.
  6. Haz clic en Next.
  7. Como opción, puedes cambiar el módulo y el directorio de recursos:
    • Res Directory: Selecciona el conjunto de orígenes de recursos en el cual desees agregar el recurso de imagen (src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definidos por el usuario). El conjunto de orígenes principal se aplicará a todas las variantes de compilación, incluidas la depuración y el lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anularán el conjunto de orígenes principales y se aplicarán a una versión de una compilación. El conjunto de orígenes de depuración solo se empleará para depuración. Para definir un conjunto de orígenes nuevo, selecciona File > Project Structure > app > Build Types. Por ejemplo, puedes definir un conjunto de orígenes Beta y crear una versión de un ícono que incluya el texto "BETA" en la esquina inferior derecha. Para obtener más información, consulta Cómo configurar variantes de compilación.

    En el área Output Directories, se muestran el elemento de diseño vectorial y el directorio en el que aparecerá.

  8. Haz clic en Finish.
  9. Vector Asset Studio agregará un archivo XML que definirá el elemento de diseño vectorial del proyecto en la carpeta app/src/main/res/drawable/. Desde la vista Android de la ventana Project, podrás ver el archivo XML vectorial generado en la carpeta drawable.

  10. Compila el proyecto.
  11. Si el nivel mínimo de API corresponde a Android 4.4 (nivel de API 20) o una versión inferior, y no habilitaste la técnica de la biblioteca de compatibilidad, Vector Asset Studio generará archivos PNG. En la vista Project Files de la ventana Project, podrás ver los archivos PNG y XML generados en la carpeta app/build/generated/res/pngs/debug/.

    No debes editar archivos de trama. En lugar de esto, debes trabajar con el archivo XML vectorial. El sistema de compilación regenera los archivos de trama automáticamente cuando es necesario. Por ello, no es necesario que los mantengas.

Importa un archivo SVG o PSD

Después de abrir Vector Asset Studio, puedes importar un archivo SVG o PSD de la siguiente manera:

  1. En Vector Asset Studio, selecciona Local file.
  2. El archivo debe estar en una unidad local. Si se ubica en la red, por ejemplo, debes descargarlo primero en una unidad local.

  3. Especifica un Image file haciendo clic en .
  4. La imagen aparece en Vector Drawable Preview.

    Si el archivo SVG o PSD contiene funciones que no son compatibles, aparecerá un error en la parte inferior de Vector Asset Studio, como se ve en la figura 3.

    Figura 3. Vector Asset Studio muestra algunos errores

    Si ves errores, debes asegurarte de que se represente de manera apropiada el elemento de diseño vectorial importado. Desplázate por la lista para ver los errores.

    Para obtener una lista de elementos compatibles, consulta Soluciones de compatibilidad con versiones anteriores de elementos de diseño vectoriales. Para obtener más información sobre los archivos de PSD permitidos, consulta Compatibilidad y restricciones para archivos PSD.

  5. De forma opcional, puedes cambiar la configuración de nombre, tamaño, opacidad y orientación de derecha a izquierda (RTL) del recurso:
    • Name: Escribe un nombre nuevo si no deseas usar el predeterminado. Vector Asset Studio crea automáticamente un nombre único (agrega un número al final del nombre) si ya existe ese nombre de recurso en el proyecto. El nombre solo puede contener caracteres en minúscula, guiones bajos y números.
    • Override: Selecciona esta opción si deseas ajustar el tamaño de la imagen. Después de seleccionarla, el tamaño pasará a ser el de la imagen. Cada vez que se modifique el tamaño, el cambio aparecerá en el área de la vista previa. El valor predeterminado es 24 × 24 dp, que se define en la especificación de material design.
    • Opacity: Usa el control deslizante para ajustar la opacidad de la imagen. El cambio aparecerá en el área de vista previa.
    • Enable auto mirroring for RTL layout: Selecciona esta opción si deseas mostrar una imagen con otra orientación cuando el diseño sea de derecha a izquierda, en lugar de izquierda a derecha. Por ejemplo, algunos idiomas se leen de derecha a izquierda; si tienes un ícono de flecha, tal vez desees mostrar una imagen con otra orientación en ese caso. Ten en cuenta que si estás trabajando con un proyecto anterior, es posible que debas agregar android:supportsRtl="true" al manifiesto de la app. La orientación automática es compatible con Android 5.0 (nivel de API 21) y versiones posteriores, y con la biblioteca de compatibilidad.
  6. Haz clic en Next.
  7. Como opción, puedes cambiar el directorio de recursos:
    • Res Directory: Selecciona el conjunto de orígenes de recursos en el cual desees agregar el recurso de imagen (src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definidos por el usuario). El conjunto de orígenes principal se aplicará a todas las variantes de compilación, incluidas la depuración y el lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anularán el conjunto de orígenes principales y se aplicarán a una versión de una compilación. El conjunto de orígenes de depuración solo se empleará para depuración. Para definir un conjunto de orígenes nuevo, selecciona File > Project Structure > app > Build Types. Por ejemplo, puedes definir un conjunto de orígenes Beta y crear una versión de un ícono que incluya el texto "BETA" en la esquina inferior derecha. Para obtener más información, consulta Cómo configurar variantes de compilación.

    En el área Output Directories, se muestran el elemento de diseño vectorial y el directorio en el que aparecerá.

  8. Haz clic en Finish.
  9. Vector Asset Studio agregará un archivo XML que definirá el elemento de diseño vectorial del proyecto en la carpeta app/src/main/res/drawable/. Desde la vista Android de la ventana Project, podrás ver el archivo XML vectorial generado en la carpeta drawable.

  10. Compila el proyecto.
  11. Si el nivel mínimo de API corresponde a Android 4.4 (nivel de API 20) o una versión inferior, y no habilitaste la técnica de la biblioteca de compatibilidad, Vector Asset Studio generará archivos PNG. En la vista Project Files de la ventana Project, podrás ver los archivos PNG y XML generados en la carpeta app/build/generated/res/pngs/debug/.

    No debes editar archivos de trama. En lugar de esto, debes trabajar con el archivo XML vectorial. El sistema de compilación regenera los archivos de trama automáticamente cuando es necesario. Por ello, no es necesario que los mantengas.

Cómo agregar un elemento de diseño vectorial a un diseño

En un archivo de diseño, puedes configurar cualquier widget relacionado con el ícono, como ImageButton y ImageView, entre otros, para señalar un elemento de diseño vectorial. Por ejemplo, en el siguiente diseño, aparece un elemento de diseño vectorial que se muestra en un botón:

Figura 4. Elemento de diseño vectorial que se muestra en un botón de un diseño

Para mostrar un elemento de diseño vectorial en un widget, como en la figura, haz lo siguiente:

  1. Abre un proyecto e importa un elemento de diseño vectorial.
  2. En este ejemplo, se usa un proyecto para tablet o teléfono generado con el nuevo asistente de proyectos.

  3. En la vista Android de la ventana Project, haz doble clic en un archivo XML de diseño, como content_main.xml.
  4. Haz clic en la pestaña Design para mostrar el editor de diseño.
  5. Arrastra el widget ImageButton de la ventana Palette al editor de diseño.
  6. En el diálogo Resources, selecciona Drawable en el subpanel izquierdo y luego el elemento de diseño vectorial que importaste. Haz clic en OK.
  7. El elemento de diseño vectorial aparecerá en el ImageButton del diseño.

  8. Para cambiar el color de la imagen al color de énfasis definido en el tema, en la ventana Properties, ubica la propiedad tint y haz clic en .
  9. En el diálogo Resources, selecciona Color en el subpanel izquierdo y luego colorAccent. Haz clic en OK.
  10. El color de la imagen cambiará al color de énfasis del diseño.

Si en el proyecto se usa la biblioteca de compatibilidad, el código ImageButton debe ser como el siguiente:

    <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:srcCompat="@drawable/ic_build_black_24dp"
      tools:layout_editor_absoluteX="11dp"
      tools:layout_editor_absoluteY="225dp"
      android:id="@+id/imageButton"
      android:tint="@color/colorAccent" />
    

Si en el proyecto no se usa la biblioteca de compatibilidad, el código del elemento de diseño vectorial, en su lugar, será android:src="@drawable/ic_build_black_24dp".

Cómo hacer referencia a un elemento de diseño vectorial en el código

Normalmente, puedes hacer referencia a un recurso de elemento de diseño vectorial de manera genérica en tu código y, cuando se ejecuta tu app, se muestra automáticamente la imagen vectorial o de trama correspondiente según el nivel de API:

  • En la mayoría de los casos, puedes hacer referencia a los elementos de diseño vectoriales como @drawable en código XML o Drawable en código Java.
  • Por ejemplo, el siguiente código XML de diseño aplica la imagen en una vista:

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

    El siguiente código Java permite obtener la imagen como un Drawable:

    Kotlin

        val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());
        

    El método getResources() reside en la clase Context, que se aplica a los objetos de IU, como actividades, fragmentos, diseños y vistas, entre otros.

  • Si tu app usa la biblioteca de compatibilidad (incluso si no tienes una declaración vectorDrawables.useSupportLibrary = true en tu archivo build.gradle), también puedes hacer referencia a un elemento de diseño vectorial con una declaración app:srcCompat. Por ejemplo:
  •     <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat="@drawable/myimage" />
        
  • En algunas ocasiones, es posible que debas encasillar el recurso de elemento de diseño en su clase exacta, como cuando debes usar funciones específicas de la clase VectorDrawable. Para hacerlo, puedes usar el código Java de la siguiente manera:
  • Kotlin

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            val vectorDrawable = drawable as VectorDrawable
        } else {
            val bitmapDrawable = drawable as BitmapDrawable
        }
        

    Java

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
           VectorDrawable vectorDrawable = (VectorDrawable) drawable;
        } else {
           BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
        }
        

Solo puedes acceder a los recursos de elementos de diseño vectoriales desde el subproceso principal.

Para la técnica de biblioteca de compatibilidad, debes usar técnicas de codificación compatibles. Para obtener más información, consulta Biblioteca de compatibilidad de Android 23.2.

Cómo modificar el código XML generado por Vector Asset Studio

Puedes modificar el código XML del elemento de diseño vectorial, pero no los PNG ni el código XML correspondiente generado durante la compilación. Sin embargo, no lo recomendamos.

Cuando se usa la técnica de generación de PNG, Vector Asset Studio verifica que coincidan el elemento de diseño vectorial y los PNG, y que el manifiesto contenga el código correspondiente. Si agregas un código que no es compatible con Android 4.4 (nivel de API 20) y versiones anteriores, tus imágenes vectoriales y PNG pueden diferir. También debes asegurarte de que el manifiesto contenga el código para admitir tus cambios.

Para modificar el archivo XML vectorial cuando no uses la técnica de la biblioteca de compatibilidad, haz lo siguiente:

  1. En la ventana Project, haz doble clic en el archivo XML vectorial generado en la carpeta drawable.
  2. El archivo XML aparecerá en el editor y en la ventana Preview.

    Figura 5. Se muestra un archivo XML vectorial en el editor de código y en la ventana "Preview".

  3. Edita el código XML según lo que admita el nivel mínimo de API:
  4. Compila el proyecto y comprueba que el elemento de diseño vectorial y las imágenes de trama correspondientes tengan el mismo aspecto.
  5. Recuerda que los PNG generados se pueden mostrar de manera diferente en la ventana Preview respecto de la app debido a los diferentes motores de representación y a los cambios realizados en el elemento de diseño vectorial antes de una compilación. Si agregas código al archivo XML vectorial creado por Vector Asset Studio, las funciones que no sean compatibles con Android 4.4 (nivel de API 20) o versiones anteriores no aparecerán en los archivos PNG generados. Como resultado, cuando agregas un código, siempre debes comprobar que los PNG generados coincidan con el elemento de diseño vectorial. Para ello, puedes hacer doble clic en el PNG en la vista Project Files de la ventana Project; en el margen izquierdo del editor de código también se muestra la imagen PNG cuando tu código hace referencia al elemento de diseño, como se muestra en la figura 6.

    Figura 6. Se muestra una imagen PNG en el margen izquierdo del editor de código

Cómo borrar un elemento de diseño vectorial de un proyecto

Para quitar un elemento de diseño vectorial de un proyecto:

  1. En la ventana Project, borra el archivo XML vectorial generado seleccionando el archivo y presionando la tecla Delete (o selecciona Edit > Delete).
  2. Aparecerá el diálogo Safe Delete.

  3. Si lo deseas, puedes seleccionar opciones para determinar el área de tu proyecto en la que se usa el archivo y hacer clic en OK.
  4. Android Studio borrará el archivo del proyecto y de la unidad. Sin embargo, si decides buscar áreas del proyecto en las que se use el archivo y se detecten algunos casos de uso, podrás verlas y decidir si deseas borrarlo.

  5. Selecciona Build > Clean Project.
  6. Se borrará del proyecto y la unidad cualquier archivo XML y PNG generado de manera automática que corresponda al elemento de diseño vectorial borrado.

Cómo publicar una app que contenga elementos de diseño vectoriales

Si usaste la técnica de la biblioteca de compatibilidad, o si tu nivel de API mínimo corresponde a Android 5.0 (nivel de API 21) o una versión posterior, tu APK contiene los elementos de diseño vectoriales que agregaste con Vector Asset Studio. Estos APK serán más pequeños que cuando se convierten las imágenes vectoriales en PNG.

Si el nivel mínimo de tu API incluye Android 4.4 (nivel de API 20) o una versión anterior, y tienes los elementos de diseño vectorial y las imágenes de trama correspondientes en tu proyecto, podrás proporcionar tus archivos APK de dos formas:

  • Crea un APK que incluya los elementos de diseño vectoriales y las representaciones de trama correspondientes. Esta solución es la más sencilla de implementar.
  • Crea APK por separado para diferentes niveles de API. Si no incluyes las imágenes de trama correspondientes en el APK para Android 5.0 (nivel de API 21) y versiones posteriores, el tamaño del APK puede ser muy inferior. Para obtener más información, consulta Compatibilidad con varios APK.

Compatibilidad y restricciones de archivos PSD

Vector Asset Studio no admite todas las funciones de archivos PSD. En la siguiente lista, se resumen funciones de PSD compatibles y no compatibles, así como también detalles de conversión.

Documento

Qué se admite

  • Un modo de color de PSD de mapa de bits, escala de grises, indexado, RGB, lab o CMYK
  • Una profundidad de color de 8, 16 o 32 bits

Detalles de conversión:

  • Las dimensiones del documento PSD se convierten en las dimensiones del elemento de diseño vectorial y de la ventana de visualización

Qué no se admite:

  • Un modo de color de PSD bitonal o multicanal

Formas

Qué se admite

  • Máscaras de recorte, si la base de recorte es otra forma
  • Operaciones de forma, como la fusión o adición, la intersección, la resta y la exclusión

Qué no se admite:

  • La regla de relleno par e impar que usan las formas de Photoshop. En Android 6.0 (nivel de API 23) y versiones anteriores, los elementos de diseño vectoriales solo admiten la regla de relleno distinta de cero. En las formas que se intersectan, esta limitación puede conducir a una representación de diferencias entre el PSD y el elemento de diseño vectorial resultante. Para solucionar este problema, agrega android:fillType="evenOdd" en la forma del elemento de diseño vectorial. Por ejemplo:
        <vector xmlns:android="https://schemas.android.com/apk/res/android"
            android:viewportHeight="168"
            android:height="24dp"
            android:viewportWidth="209"
            android:width="24dp">
    
            <path
                android:fillAlpha="1.0"
                android:fillColor="#000000"
                android:fillType="evenOdd"
                android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
        </vector>
        

Trazos y rellenos

Qué se admite

  • Trazos, incluidos el color, la opacidad, el ancho, la unión, la restricción, los guiones y la alineación
  • Rellenos y trazos de colores sólidos
  • Colores de relleno y trazo especificados como RGB, Lab o CMYK

Detalles de conversión:

  • Si un trazo es discontinuo, se recorta con una base de recorte o usa una alineación diferente de la central, Vector Asset Studio lo convierte en una forma de relleno en el elemento de diseño vectorial

Qué no se admite:

  • Rellenos y trazos de color que no sean los sólidos, como los gradientes

Opacidad

Qué se admite

  • Capas de formas con valor de opacidad 0

Detalles de conversión:

  • Vector Asset Studio multiplica la opacidad de relleno con la opacidad de capa para computar el Alfa de relleno
  • La herramienta multiplica la opacidad de base de recorte (si existe esta última) con el Alfa de relleno para computar el Alfa de relleno final
  • La herramienta multiplica la opacidad de trazo con la opacidad de capa para computar el alfa de trazo
  • La herramienta multiplica la opacidad de la base de recorte (si existe esta última) con el alfa de trazo para computar el alfa de relleno final

Capas

Qué se admite

  • Cualquier capa de forma visible

Detalles de conversión:

  • Vector Asset Studio preserva el nombre de las capas en el archivo del elemento de diseño vectorial

Qué no se admite:

  • Efectos de capas
  • Capas de ajustes y texto
  • Modos de combinación (ignorados)

Compatibilidad y restricciones para archivos SVG

Vector Asset Studio no admite todas las funciones de archivos SVG. En la siguiente sección, se resumen las funciones compatibles y no compatibles cuando la herramienta convierte un archivo SVG a VectorDrawable, así como también detalles de conversión.

Funciones admitidas

VectorDrawable admite todas las funciones de Tiny SVG 1.2 excepto por text.

Formas

VectorDrawable admite rutas de acceso SVG.

La herramienta convierte formas básicas como círculos, cuadrados y polígonos en trazados.

Transformaciones

La herramienta admite matrices de transformación y las aplica directamente a las rutas de acceso secundarias.

Grupos

La herramienta admite elementos de grupo para traslación, escalamiento y rotación. Los grupos no admiten una propiedad de opacidad.

La herramienta también aplica cualquier estilo de opacidad o grupo a las rutas de acceso secundarias.

Rellenos y trazos

Las rutas se pueden rellenar y trazar mediante colores sólidos o gradientes (lineales, radiales o angulares). Solo se admiten trazos centrados. No se admiten los modos de fusión ni las rutas discontinuas.

Máscaras

La herramienta admite una máscara de recorte por grupo.

Funciones no compatibles con el importador SVG

Las funciones que no estén incluidas en la lista de la sección Funciones admitidas no son compatibles. Entre las funciones no admitidas más destacadas, se incluyen las siguientes:

  • Efectos de filtro: No se admiten efectos como sombras paralelas, desenfoques ni matrices de colores
  • Texto: Se recomienda la conversión de texto a formas mediante otras herramientas
  • Rellenos de patrón