Adicionar gráficos vetoriais de várias densidades (Views)

Conceitos e implementação do Jetpack Compose

O Android Studio inclui uma ferramenta chamada Vector Asset Studio que ajuda a adicionar ícones do Material Design e importar arquivos Scalable Vector Graphic (SVG) e Adobe Photoshop Document (PSD) para seu projeto como recursos drawable vetoriais. O uso de drawables vetoriais em vez de bitmaps reduz o tamanho do APK, uma vez que o mesmo arquivo pode ser redimensionado para diferentes densidades de tela sem perda de qualidade da imagem. Para versões anteriores 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 um 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 versões anteriores não tem suporte a drawables vetoriais. Se o nível da API mínimo for definido como um desses níveis da API, você terá duas opções ao usar o Vector Asset Studio: gerar arquivos Portable Network Graphic (PNG), o padrão, ou usar a técnica de compatibilidade com versões anteriores no AndroidX.

Para manter a 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 app for executado, a imagem vetorial ou rasterizada correspondente será automaticamente exibida, dependendo do nível da API.

Compatibilidade com versões anteriores no AndroidX

Essa técnica exige o AndroidX 1.0 ou mais recente e o plug-in do Android para o Gradle 3.2 ou mais recente e usa apenas drawables vetoriais. A classe VectorDrawableCompat no AndroidX permite oferecer suporte a VectorDrawable no Android 2.1 (nível da API 7) e versões mais recentes.

Antes de usar o Vector Asset Studio, adicione uma instrução ao arquivo build.gradle:

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

Também é necessário usar técnicas de programação do AndroidX para compatibilidade com versões anteriores, como o uso do atributo app:srcCompat em vez de android:src para drawables vetoriais. Para mais informações, consulte AndroidX.

Adicionar um drawable vetorial a um layout

Em um arquivo de layout, você pode definir qualquer widget relacionado a ícones, 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 1. Um drawable vetorial exibido no botão de um layout:

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

  1. Abra um projeto e importe um drawable vetorial.

    Esse exemplo usa um projeto Phone/Tablet gerado com o assistente de novo projeto.

  2. Na visualização Android da janela Project, clique duas vezes em um arquivo XML de layout, como content_main.xml.

  3. Clique na guia Design para exibir o Layout Editor.

  4. Arraste o widget ImageButton da janela Palette para o Layout Editor.

  5. Na caixa de diálogo Resources, selecione Drawable no painel esquerdo e depois o drawable vetorial importado. Clique em OK.

    O drawable vetorial será exibido no ImageButton do layout.

  6. Para mudar a cor da imagem para a cor de destaque definida no tema, na janela Propriedades, localize a propriedade tonalidade e clique em … .

  7. Na caixa de diálogo Resources, selecione Color no painel esquerdo e depois colorAccent. Clique em OK.

    A cor da imagem é alterada para a cor de realce no layout.

Se o projeto usar o AndroidX, 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 o AndroidX, o código do drawable vetorial 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 drawable vetorial de forma genérica no código. Quando o app é executado, a imagem vetorial ou rasterizada correspondente é exibida automaticamente, dependendo do nível da API:

  • Na maioria dos casos, é possível fazer referência a drawables vetoriais como @drawable no código XML ou Drawable no código Java.

    Por exemplo, o layout de código XML a seguir aplica a imagem a uma visualização:

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

    O código a seguir recupera a imagem como um Drawable:

    Kotlin

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

    Java

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

    O método getResources() fica na classe Context, que se aplica a objetos da interface, como atividades, fragmentos, layouts, visualizações e outros.

  • Se o app usa o AndroidX, mesmo que você não tenha uma instrução vectorDrawables.useSupportLibrary = true no arquivo build.gradle, também vai ser possível referenciar um drawable vetorial com uma instrução app:srcCompat. Exemplo:

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

  • Pode ser necessário fazer um typecast do recurso drawable para sua classe exata, como quando é necessário usar recursos específicos da classe VectorDrawable. Para isso, use um código como este:

    Kotlin

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

    Java

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

Só é possível acessar recursos de drawables vetoriais na linha de código principal.

Para o Android 5.0 (nível da API 21) ou versões mais recentes, você pode usar a classe AnimatedVectorDrawable para animar as propriedades da classe VectorDrawable. Com o AndroidX, você pode usar a classe AnimatedVectorDrawableCompat para animar a classe VectorDrawable para o Android 3.0 (nível da API 11) e versões mais recentes. Para mais informações, consulte Animar gráficos drawable.