Criar ícones de apps (Views)

Implementação do Jetpack Compose

Esta página inclui informações sobre como criar e usar ícones de apps que são exclusivos de layouts baseados em visualização. Para mais informações sobre como criar ícones de apps, consulte Criar ícones de apps, que aborda o framework de interface recomendado.

Criar um ícone de guia ou de barra de ações

Use o Image Asset Studio para criar ícones de guia e da barra de ações para layouts baseados em visualizações.

Os ícones da barra de ações são elementos gráficos que representam atividades individuais. Consulte Adicionar e processar ações, Barra de apps – Material Design {:.external} e Design da barra de ações para mais informações.

Os ícones de guia são elementos gráficos usados para representar guias individuais em uma interface com vários itens desse tipo. Todo ícone de guia tem dois estados: não selecionado e selecionado. Consulte Criar visualizações deslizáveis com guias e Guias – Material Design para mais informações.

O Image Asset Studio coloca os ícones nos locais adequados nos diretórios res/drawable-<density>/.

É recomendável usar o estilo do Material Design para ícones de guia e da barra de ações, mesmo quando há compatibilidade com versões anteriores do Android. Use appcompat e outras bibliotecas de suporte para disponibilizar sua interface com Material Design a versões mais antigas da plataforma.

Como alternativa ao Image Asset Studio, você pode usar o Vector Asset Studio para criar ícones de guia e da barra de ações. Os drawables vetoriais são adequados para ícones simples e podem reduzir o tamanho do app.

Depois de abrir o Image Asset Studio, é possível adicionar um ícone de guia ou de barra de ações da seguinte forma:

  1. No campo Icon Type, selecione Action Bar and Tab Icons.

  2. Selecione um Asset Type e especifique o recurso no campo abaixo:

    • No campo Clip Art, clique no botão.

      Na caixa de diálogo Selecionar ícone, escolha um ícone do Material Design e clique em OK.

    • No campo Path, especifique o caminho e o nome do arquivo da imagem. Clique em … para usar uma caixa de diálogo.

    • No campo Text, digite uma linha de texto e selecione uma fonte.

    O ícone aparece à direita da área Recurso de origem e na parte de baixo do assistente na área de visualização.

  3. Você pode alterar o nome e as opções de exibição:

    • Name: caso não queira usar o nome padrão, digite um novo. Se esse nome de recurso já existir no projeto, conforme indicado por um erro na parte de baixo do assistente, ele será substituído. O nome pode conter apenas caracteres minúsculos, sublinhados e dígitos.

    • Trim: para ajustar a margem entre a imagem do ícone e a borda no recurso de origem, selecione Yes. Essa operação remove espaços transparentes sem alterar a proporção. Para manter o recurso de origem inalterado, selecione Não.

    • Padding: se quiser ajustar o padding do recurso de origem nos quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o corte acontecerá primeiro.

    • Tema: selecione HOLO_LIGHT ou HOLO_DARK. Ou, para especificar uma cor na caixa de diálogo Select Color, selecione CUSTOM e clique no campo Custom color.

    O Image Asset Studio cria o ícone dentro de um quadrado transparente para que haja um pouco de padding nas extremidades. O padding oferece espaço adequado para inserir o efeito padrão de ícone com sombra projetada.

  4. Clique em Próxima.

  5. Se quiser, você poderá alterar o diretório de recursos:

    • Res Directory: selecione o conjunto de origem de recursos a que quer adicionar o recurso de imagem: src/main/res, src/debug/res, src/release/res ou um conjunto de origem definido pelo usuário. O conjunto de origem principal é aplicado a todas as variantes de build, incluindo depuração e lançamento. Os conjuntos de origem de depuração e lançamento substituem o conjunto de origem principal e são aplicados a uma versão de um build. 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 inclua o texto "BETA" no canto inferior direito. Para mais informações, consulte Configurar variantes de build.

    A área Output Directories mostra as imagens e pastas em que elas vão aparecer na visualização Project Files da janela Project.

  6. Clique em Concluir.

    O Image Asset Studio adiciona as imagens nas pastas drawable de cada densidade.

Referenciar um recurso de imagem no código

Normalmente, você pode referenciar um recurso de imagem de forma genérica no código. Quando o app for executado, a imagem relacionada será exibida automaticamente, dependendo do dispositivo:

  • Na maioria dos casos, é possível referenciar recursos de imagem como @drawable no código XML ou Drawable no código Java.

    Por exemplo, o código XML do layout a seguir exibe o drawable em uma ImageView:

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

    O código Java 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 a Biblioteca de Suporte, é possível referenciar um recurso de imagem no código XML com uma declaração app:srcCompat. Exemplo:

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

Só é possível acessar recursos de imagem pela linha de execução principal.

Depois de inserir o recurso de imagem no diretório res/ do projeto, você pode referenciá-lo no código Java ou no layout XML usando o ID de recurso. O código Java a seguir define um ImageView para usar o recurso drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Consulte Acessar os recursos do app para mais informações.