Skip to content

Most visited

Recently visited

navigation

Adicionar gráficos vetoriais de várias densidades

O Android Studio inclui uma ferramenta denominada Vector Asset Studio que ajuda a adicionar ícones de material design e importar arquivos Scalable Vector Graphic (SVG) e Adobe Photoshop Document (PSD) para um projeto como recursos drawable vetoriais. O uso de drawables vetoriais em vez de bitmaps reduz o tamanho do APK porque o mesmo arquivo pode ser redimensionado para diferentes densidades de tela sem perda de qualidade da imagem. Para versões mais antigas do Android que não são compatíveis com drawables vetoriais, o Vector Asset Studio pode, durante a compilação, transformar drawables vetoriais em diferentes tamanhos de bitmap para cada densidade de tela.

Sobre o Vector Asset Studio

O Vector Asset Studio adiciona um gráfico vetorial ao projeto como arquivo XML que descreve a imagem. A manutenção de um único arquivo XML pode ser mais fácil que a atualização de diversos gráficos rasterizados em várias resoluções.

O Android 4.4 (API de nível 20) e anteriores não são compatíveis com drawables vetoriais. Se o nível mínimo de API for definido como um desses níveis de API, você terá duas opções para usar o Vector Asset Studio: gerar arquivos Portable Network Graphic (PNG), o padrão, ou usar a Support Library.

Para manter compatibilidade com versões anteriores, o Vector Asset Studio gera imagens rasterizadas do drawable vetorial. Os drawables vetoriais e rasterizados são empacotados juntos no APK. Você pode fazer referência a drawables vetoriais como Drawable em código Java ou @drawable em código XML. Quando o aplicativo for executado, a imagem vetorial ou rasterizada correspondente será automaticamente exibida, dependendo do nível de API.

Se você quiser usar somente drawables vetoriais, use a Android Support Library 23.2 ou posterior. Essa técnica exige uma alteração no arquivo build.gradle antes de executar o Vector Asset Studio, como descrito em Compatibilidade com versões anteriores da Support Library. A classe VectorDrawableCompat na Support Library permite a compatibilidade com VectorDrawable no Android 2.1 (API de nível 7) ou posterior.

Tipos de gráficos vetoriais compatíveis

A especificação de material design do Google oferece ícones de material design que podem ser usados em aplicativos Android. O Vector Asset Studio ajuda você a escolher, importar e dimensionar ícones de material design, bem como a definir opacidade e a configuração de espelhamento da direita para a esquerda (RTL).

O Vector Asset Studio também permite importar os seus próprios arquivos SVG e PSD. O SVG é um padrão aberto com base em XML do World Wide Web Consortium (W3C). O formato do arquivo PSD é compatível com recursos do Adobe Photoshop. O Vector Asset Studio é compatível com os padrões essenciais, mas não com todos os recursos dos formatos SVG e PSD. Quando você especifica um arquivo SVG ou PSD, o Vector Asset Studio informa imediatamente se o código de gráficos é compatível ou não. Ele converte o arquivo em um arquivo XML contendo código VectorDrawable. Se ocorrerem erros, verifique se o drawable vetorial foi exibido corretamente. Para obter mais informações sobre os recursos permitidos do PSD, consulte Compatibilidade e restrições para arquivos PSD.

Para o Android 5.0 (API de nível 21) ou posterior, você pode usar a classe AnimatedVectorDrawable para animar as propriedades da classe VectorDrawable. Com a Support Library, você pode usar a classe AnimatedVectorDrawableCompat para animar as propriedades da classe VectorDrawable para Android 3.0 (API de nível 11) ou posterior. Para obter mais informações, consulte Animar drawables vetoriais.

Considerações para arquivos SVG e PSD

Um drawable vetorial é adequado para ícones simples. Os ícones de material design oferecem bons exemplos dos tipos de imagens que funcionam bem como drawables vetoriais em um aplicativo. Por outro lado, muitos ícones de inicialização de aplicativos contêm muitos detalhes. Portanto, eles funcionam melhor como imagens rasterizadas.

O carregamento inicial de um drawable vetorial pode custar mais ciclos de CPU que a imagem rasterizada correspondente. Depois disso, o uso de memória e o desempenho são semelhantes para os dois. Recomendamos que você limite uma imagem vetorial a no máximo 200 x 200 dp. Caso contrário, o desenho pode ser muito demorado.

Embora os drawables vetoriais permitam uma ou mais cores, muitas vezes faz sentido colorir os ícones com preto (android:fillColor="#FF000000"). O uso dessa abordagem permite adicionar um tom ao drawable vetorial colocado em um layout. A cor do ícone é alterada para a cor do tom. Se a cor do ícone não for preta, a cor poderá se mesclar com o tom, em vez de substituí-lo.

Soluções de compatibilidade com versões anteriores de drawables vetoriais

A tabela a seguir resume as duas técnicas que podem ser usadas para compatibilidade com versões anteriores:

Técnica Drawables no APK Elementos XML VectorDrawable Versão Sinalizadores de compilação Código do aplicativo
Geração de PNGs Vetorial e rasterizado Subconjunto compatível

SVG: Android Plugin para Gradle 1.5.0 ou posterior

PSD: Android Studio 2.2 ou posterior

Padrão Diversas técnicas de codificação compatíveis
Support Library 23.2 ou posterior Vetorial Totalmente compatível Android plugin para Gradle 2.0 ou posterior Exige instruções da Support Library Subconjunto de técnicas de codificação compatíveis

O uso de drawables vetoriais pode produzir um APK menor, mas o carregamento inicial desses drawables pode ser mais demorado.

Geração de PNGs

O Android 5.0 (API de nível 21) ou posterior é compatível com drawables vetoriais. Se o aplicativo tiver um nível de API mínimo inferior, o Vector Asset Studio adicionará o arquivo de drawable vetorial ao projeto. Além disso, durante a compilação, o Gradle criará imagens rasterizadas PNG em várias resoluções. O Gradle gera as densidades de PNG especificadas pela propriedade generatedDensities da Domain Specific Language (DSL) em um arquivo build.gradle.

Para o Android 5.0 (API de nível 21) ou posterior, o Vector Asset Studio é compatível com todos os elementos VectorDrawable. Para compatibilidade com versões anteriores do Android 4.4 (API de nível 20) ou anteriores, o Vector Asset Studio é compatível com os seguintes 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

Somente o Android 5.0 (API de nível 21) ou posterior é compatível com atributos dinâmicos como, por exemplo, android:fillColor="?android:attr/colorControlNormal".

É possível alterar o código XML gerado pelo Vector Asset Studio, embora isso não seja considerado uma prática recomendada. A alteração de valores no código não deve causar problemas, desde que os valores sejam válidos e estáticos. Se você quiser adicionar elementos XML, precisará garantir sua compatibilidade de acordo com o nível mínimo de API.

Biblioteca de suporte

Essa técnica exige a Android Support Library 23.2 ou posterior e o Android Plugin para Gradle 2.0 ou posterior, e usa somente drawables vetoriais. A classe VectorDrawableCompat na Support Library permite a compatibilidade com VectorDrawable no Android 2.1 (API de nível 7) ou posterior.

Antes de usar o Vector Asset Studio, é necessário adicionar uma instrução ao arquivo build.gradle:

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

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

Também é necessário usar técnicas de codificação compatíveis com a Support Library, como o uso do atributo app:srcCompat em vez de android:src para os drawables vetoriais. Para obter mais informações, consulte Android Support Library 23.2.

Executar o Vector Asset Studio

Para iniciar o Vector Asset Studio:

  1. No Android Studio, abra um projeto de aplicativo Android.
  2. Na janela Project, selecione a vista Android.
  3. Clique com o botão direito do mouse na pasta res e selecione New > Vector Asset.
  4. Algumas outras vistas e pastas do projeto também têm esse item de menu.

    O Vector Asset Studio é exibido.

    Figura 1. Vector Asset Studio.

  5. Se a caixa de diálogo Need Newer Android Plugin for Gradle for exibida, corrija a sua versão do Gradle da seguinte forma:
    1. Selecione File > Project Structure.
    2. Na caixa de diálogo Project Structure, selecione Project.
    3. No campo Android Plugin Version, altere a versão do Android Plugin para Gradle para 1.5.0 ou posterior e clique em OK.
    4. O Gradle sincroniza o projeto.

    5. Na visualização Android da janela Project, clique com o botão direito na pasta res e selecione New > Vector Asset.
    6. O Vector Asset Studio é exibido.

  6. Continue com Importing a Vector Graphic.

Importar um gráfico vetorial

O Vector Asset Studio ajuda a importar um arquivo de gráfico vetorial para o projeto do aplicativo. Siga um destes procedimentos:

Adicionar um ícone de material design

Depois de abrir o Vector Asset Studio, é possível adicionar um ícone de material design da seguinte forma:

  1. No Vector Asset Studio, selecione Material Icon.
  2. No campo Icon, clique no botão.
  3. Na caixa de diálogo Select Icon, selecione um ícone de material design e clique em OK.
  4. O ícone será exibido em Vector Drawable Preview.

  5. Opcionalmente, altere o nome, o tamanho, a opacidade e a configuração de espelhamento da direita para a esquerda (RTL) do recurso:
    • Name - digite um novo nome se não quiser usar o nome padrão. O Vector Asset Studio criará automaticamente um nome único (adicionando um número ao final do nome) se esse nome de recurso já existir no projeto. O nome pode conter apenas caracteres minúsculos, sublinhados e dígitos.
    • Override - selecione essa opção se quiser ajustar o tamanho da imagem. Quando você digita um novo tamanho, a alteração é exibida na área de visualização.
    • O padrão é 24 x 24 dp, definido na especificação do material design. Desmarque a caixa de seleção para voltar ao padrão.

    • Opacity - use o controle deslizante para ajustar a opacidade da imagem. A alteração é exibida na área de visualização.
    • Enable auto mirroring for RTL layout - selecione essa opção se quiser que uma imagem espelhada seja exibida quando a direção do layout for da direita para a esquerda, em vez de da esquerda para a direita. Por exemplo, alguns idiomas são lidos da direita para a esquerda. Se você tiver um ícone de seta, poderá ser necessário exibir uma imagem espelhada do ícone nesse caso. Observe que, se você estiver trabalhando com um projeto antigo, poderá também ser necessário adicionar android:supportsRtl="true" ao manifesto do aplicativo. O espelhamento automático é compatível com o Android 5.0 (API de nível 21) ou posterior, bem como com a Support Library.
  6. Clique em Next.
  7. Altere opcionalmente o diretório dos módulos e recursos:
    • Res Directory - selecione o conjunto de origem do recurso onde quer adicionar o drawable vetorial: src/main/res, src/debug/res, src/release/res ou um conjunto de origem definido pelo usuário. O conjunto de origem principal se aplica a todas as variações de compilação, incluindo de depuração e versão final. Os conjuntos de origem de depuração e versão final modificam o conjunto de origem principal e aplicam-se a uma versão de compilação. O conjunto de origem de depuração é usado apenas para depuração. Para definir um novo conjunto de origem, selecione File > Project Structure > app > Build Types. Por exemplo, você pode definir um conjunto de origem beta e criar uma versão de ícone que contenha o texto "BETA" no canto inferior direito. Para saber mais, leia Configurar variantes de compilação.

    A área Output Directories exibe o drawable vetorial e o diretório onde ele será exibido.

  8. Clique em Finish.
  9. O Vector Asset Studio adiciona um arquivo XML que define o drawable vetorial ao projeto na pasta app/src/main/res/drawable/. Na visualização Android da janela Project, você pode visualizar o arquivo XML vetorial gerado na pasta drawable.

  10. Compile o projeto.
  11. Se o nível mínimo de API for Android 4.4 (API de nível 20) ou anterior e você não tiver ativado a técnica da Support Library, o Vector Asset Studio gerará arquivos PNG. Na visualização Project Files da janela Project, você poderá ver os arquivos PNG e XML na pasta app/build/generated/res/pngs/debug/.

    Você não deve editar os arquivos rasterizados gerados. Em vez disso, trabalhe com o arquivo XML vetorial. O sistema de compilação gera automaticamente novos arquivos rasterizados quando necessário. Portanto, não é necessário mantê-los.

Importar um arquivo SVG ou PSD

Depois de abrir o Vector Asset Studio, é possível importar um arquivo SVG ou PSD da seguinte forma:

  1. No Vector Asset Studio, selecione Local file.
  2. O arquivo deve estar em uma unidade local. Se estiver localizado na rede, por exemplo, será necessário antes fazer o download dele para uma unidade local.

  3. Especifique um Image file clicando em .
  4. A imagem será exibida em Vector Drawable Preview.

    Se o arquivo SVG ou PSD tiver recursos incompatíveis, será exibido um erro na parte inferior do Vector Asset Studio, como mostrado na figura 2.

    Figura 2. O Vector Asset Studio exibindo alguns erros.

    Se forem exibidos erros, será necessário garantir a renderização correta do drawable vetorial importado. Role a lista para ver os erros.

    Para obter uma lista dos elementos compatíveis, consulte Soluções de compatibilidade com versões anteriores de drawables vetoriais. Para obter mais informações sobre os arquivos PSD permitidos, consulte Compatibilidade e restrições para arquivos PSD.

  5. Opcionalmente, altere o nome, o tamanho, a opacidade e a configuração de espelhamento da direita para a esquerda (RTL) do recurso:
    • Name - digite um novo nome se não quiser usar o nome padrão. O Vector Asset Studio criará automaticamente um nome único (adicionando um número ao final do nome) se esse nome de recurso já existir no projeto. O nome pode conter apenas caracteres minúsculos, sublinhados e dígitos.
    • Override - selecione essa opção se quiser ajustar o tamanho da imagem. Após a seleção, o tamanho será alterado para o tamanho da própria imagem. Sempre que você alterar o tamanho, a alteração será exibida na área de visualização. O padrão é 24 x 24 dp, definido na especificação do material design.
    • Opacity - use o controle deslizante para ajustar a opacidade da imagem. A alteração é exibida na área de visualização.
    • Enable auto mirroring for RTL layout - selecione essa opção se quiser que uma imagem espelhada seja exibida quando a direção do layout for da direita para a esquerda, em vez de da esquerda para a direita. Por exemplo, alguns idiomas são lidos da direita para a esquerda. Se você tiver um ícone de seta, poderá ser necessário exibir uma imagem espelhada do ícone nesse caso. Observe que, se você estiver trabalhando com um projeto antigo, poderá ser necessário adicionar android:supportsRtl="true" ao manifesto do aplicativo. O espelhamento automático é compatível com o Android 5.0 (API de nível 21) ou posterior, bem como com a Support Library.
  6. Clique em Next.
  7. Se quiser, você poderá alterar o diretório de recursos:
    • Res Directory - selecione o conjunto de origem do recurso onde quer adicionar o drawable vetorial: src/main/res, src/debug/res, src/release/res ou um conjunto de origem definido pelo usuário. O conjunto de origem principal se aplica a todas as variações de compilação, incluindo de depuração e versão final. Os conjuntos de origem de depuração e versão final modificam o conjunto de origem principal e aplicam-se a uma versão de compilação. O conjunto de origem de depuração é usado apenas para depuração. Para definir um novo conjunto de origem, selecione File > Project Structure > app > Build Types. Por exemplo, você pode definir um conjunto de origem beta e criar uma versão de ícone que contenha o texto "BETA" no canto inferior direito. Para saber mais, leia Configurar variantes de compilação.

    A área Output Directories exibe o drawable vetorial e o diretório onde ele será exibido.

  8. Clique em Finish.
  9. O Vector Asset Studio adiciona um arquivo XML que define o drawable vetorial ao projeto na pasta app/src/main/res/drawable/. Na visualização Android da janela Project, você pode visualizar o arquivo XML vetorial gerado na pasta drawable.

  10. Compile o projeto.
  11. Se o nível mínimo de API for Android 4.4 (API de nível 20) ou anterior e você não tiver ativado a técnica da Support Library, o Vector Asset Studio gerará arquivos PNG. Na visualização Project Files da janela Project, você poderá ver os arquivos PNG e XML na pasta app/build/generated/res/pngs/debug/.

    Você não deve editar os arquivos rasterizados gerados. Em vez disso, trabalhe com o arquivo XML vetorial. O sistema de compilação gera automaticamente novos arquivos rasterizados quando necessário. Portanto, não é necessário mantê-los.

Adicionar um drawable vetorial a um layout

Em um arquivo de layout, você pode definir qualquer widget relacionado a ícone, como ImageButton, ImageView e assim por diante, apontando para um drawable vetorial. Por exemplo, o layout a seguir mostra um drawable vetorial exibido em um botão:

Figura 3. Um drawable vetorial exibido em um botão em um layout.

Para exibir um drawable vetorial em um widget, como mostrado na figura:

  1. Abra um projeto e importe um drawable vetorial.
  2. Esse exemplo usa um projeto Phone/Tablet gerado com o assistente de novo projeto.

  3. Na visualização Android da janela Project, clique duas vezes em um arquivo XML de layout, como content_main.xml.
  4. Clique na guia Design para exibir o editor de layout.
  5. Arraste o widget ImageButton da janela Palette para o editor de layout.
  6. Na caixa de diálogo Resources, selecione Drawable no painel esquerdo e selecione o drawable vetorial importado. Clique em OK.
  7. O drawable vetorial é exibido no ImageButton do layout.

  8. Para alterar a cor da imagem para a cor de realce definida no tema, na janela Properties, localize a propriedade tint e clique em .
  9. Na caixa de diálogo Resources, selecione Color no painel esquerdo e selecione colorAccent. Clique em OK.
  10. A cor da imagem é alterada para a cor de realce no layout.

Se o projeto usar a Support Library, o código de ImageButton deverá ser semelhante a este:

<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" />

Se o projeto não usar a Support Library, o código do drawable vetorial deverá ser android:src="@drawable/ic_build_black_24dp".

Fazer referência a um drawable vetorial em código

Normalmente, você pode fazer referência a um recurso de drawable vetorial de forma genérica no código. Quando o aplicativo for executado, a imagem vetorial ou rasterizada correspondente será exibida automaticamente, dependendo do nível de API:

Somente é possível acessar recursos de drawable vetorial no encadeamento principal.

Na técnica da Support Library, você precisa usar técnicas de codificação compatíveis com a Support Library. Para obter mais informações, consulte Android Support Library 23.2.

Modificar código XML gerado pelo Vector Asset Studio

Você pode modificar o código XML do drawable vetorial, mas não os PNGs e o código XML correspondente gerados pela compilação. No entanto, isso não é recomendável.

Ao usar a técnica de geração de PNGs, o Vector Asset Studio verifica se o drawable vetorial e os PNGs correspondem e se o manifesto contém o código correto. Se você adicionar código não compatível no Android 4.4 (API de nível 20) ou anterior, a imagem vetorial e a imagem do PNG poderão ser diferentes. Também é preciso verificar se o manifesto contém o código compatível com as alterações.

Para modificar o arquivo XML vetorial quando você não usa a técnica da Support Library:

  1. Na janela Project, clique duas vezes no arquivo XML vetorial gerado na pasta drawable.
  2. O arquivo XML é exibido no editor e nas janelas Preview.

    Figura 4. Um arquivo XML vetorial exibido no editor de código e na janela Preview.

  3. Edite o código XML de acordo com o que é compatível com o nível de API mínimo:
  4. Compile o projeto e verifique se o drawable vetorial e as imagens rasterizadas correspondentes têm a mesma aparência.
  5. Lembre-se de que os PNGs gerados podem ser exibidos de forma diferente na janela Preview e no aplicativo. Essa diferença é causada pelos mecanismos de renderização diferentes e pelas alterações feitas no drawable vetorial antes da compilação. Se você adicionar código ao arquivo XML vetorial criado pelo Vector Asset Studio, nenhum recurso incompatível no Android 4.4 (API de nível 20) ou anterior aparecerá nos arquivos PNG gerados. Como resultado, quando adiciona código, você deve sempre verificar se os PNGs gerados correspondem ao drawable vetorial. Para isso, você pode clicar duas vezes no PNG na visualização Project Files da janela Project. A margem esquerda do editor de código também exibe a imagem PNG quando o código faz referência ao drawable, como mostrado na figura 5.

    Figura 5. A imagem PNG exibida na margem esquerda do editor de código.

Excluir um drawable vetorial de um projeto

Para excluir um drawable vetorial de um projeto:

  1. Na janela Project, exclua o arquivo XML vetorial gerado selecionando-o e pressionando a tecla Delete (ou selecione Edit > Delete).
  2. A caixa de diálogo Safe Delete é exibida.

  3. Opcionalmente, selecione opções para descobrir onde o arquivo é usado no projeto e clique em OK.
  4. O Android Studio exclui o arquivo do projeto e da unidade. No entanto, se você optou por pesquisar os locais do projeto que usam o arquivo e alguns desses locais forem encontrados, poderá vê-los e decidir se exclui o arquivo ou não.

  5. Selecione Build > Clean Project.
  6. Todos os arquivos PNG e XML gerados automaticamente e correspondentes ao drawable vetorial excluído serão removidos do projeto e da unidade.

Entregar um aplicativo contendo drawables vetoriais

Se você usou a técnica da Support Library ou o nível de API mínimo for Android 5.0 (API de nível 21) ou posterior, o APK conterá os drawables vetoriais adicionados com o Vector Asset Studio. Esses APKs serão menores se as imagens vetoriais forem convertidas em PNGs.

Quando o nível mínimo de API incluir o Android 4.4 (API de nível 20) ou anterior, e você tiver drawables vetoriais e imagens rasterizadas correspondentes no projeto, terá duas opções para entregar os arquivos APK:

Compatibilidade e restrições para arquivos PSD

O Vector Asset Studio não é compatível com todos os recursos de arquivos PSD. A lista a seguir resume as características compatíveis e incompatíveis de arquivos PSD, bem como alguns detalhes de conversão.

Documento

Compatíveis:

Detalhes de conversão:

Incompatíveis:

Formas

Compatíveis:

Incompatíveis:

Traços e preenchimentos

Compatíveis:

Detalhes de conversão:

Incompatíveis:

Opacity

Compatíveis:

Detalhes de conversão:

Camadas

Compatíveis:

Detalhes de conversão:

Incompatíveis:

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!

Follow Google Developers on WeChat

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)