The Android Developer Challenge is back! Submit your idea before December 2.

Criar ícones de app com o Image Asset Studio

O Android Studio tem uma ferramenta chamada Image Asset Studio, que ajuda você a criar os próprios ícones para o app com ícones do Material Design, imagens personalizadas e strings de texto. Ele gera um conjunto de ícones na resolução correta para toda densidade de pixels com que o app é compatível. O Image Asset Studio coloca os ícones gerados recentemente em pastas específicas de cada densidade no diretório res/ do projeto. No ambiente de execução, o Android emprega os recursos corretos com base na densidade da tela do dispositivo em que seu app está sendo executado.

O Image Asset Studio ajuda a gerar os seguintes tipos de ícone:

  • Ícones na tela de início
  • Barra de ações e ícones de guia
  • Ícones de notificação

Sobre o Image Asset Studio

O Image Asset Studio ajuda a criar diversos tipos de ícones em diferentes densidades e mostra exatamente onde eles precisam ser colocados no projeto. As seções a seguir descrevem os tipos de ícone que você pode criar e as imagens e os textos que pode usar.

Ícones adaptáveis e legados na tela de início

Um ícone na tela de início é uma imagem que representa o app para os usuários. Ele pode:

  • aparecer na lista de apps instalados em um dispositivo e na tela inicial;
  • representar atalhos para acessar o app (por exemplo, o ícone de atalho de um contato que abre informações detalhadas);
  • ser usado por apps de inicialização;
  • ajudar o usuário a encontrar seu app no Google Play.

Ícones adaptáveis na tela de início podem ser exibidos em diversas formas em diferentes modelos de dispositivo e estão disponíveis no Android 8.0 (API nível 26) e versões posteriores. O Android Studio 3.0 introduz a compatibilidade com a criação de ícones adaptáveis por meio do Image Asset Studio. O Image Asset Studio gera visualizações de um ícone adaptável em formatos de círculo, quadrado arredondado e quadrado, assim como uma visualização completa do ícone. O Image Asset Studio também gera visualizações legadas, redondas e para a Google Play Store. Um ícone legado na tela de início é uma imagem que representa o app na tela e na janela inicial do dispositivo. Esse tipo de ícone é usado em dispositivos com Android 7.1 (API nível 25) ou versões anteriores, que não são compatíveis com ícones adaptáveis e não exibem tantos formatos variados nos respectivos modelos.

O Image Asset Studio coloca os ícones nos locais corretos dos diretórios res/mipmap-density/. Além disso, ele cria uma imagem de 512 x 512 pixels, perfeitamente adequada para a Google Play Store.

É recomendável usar o estilo do Material Design para ícones na tela de início, mesmo quando há compatibilidade com versões anteriores do Android.

Para ver mais informações, consulte Ícones adaptáveis na tela de início e Ícones de produto – Material Design.

Barra de ações e ícones de guia

Os ícones da barra de ações são elementos gráficos que representam ações necessárias individuais. Para ver mais informações, consulte Adicionar e tratar ações, Barra de app – Material Design e Design da barra de ações.

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

O Image Asset Studio coloca os ícones nos locais corretos dos 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 oferecer sua IU do Material Design em 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 de barra de ações. Os drawables vetoriais são adequados para ícones simples e podem reduzir o tamanho do APK.

Ícones de notificação

Notificação é uma mensagem que pode ser exibida para o usuário fora da IU normal do app. O Image Asset Studio coloca os ícones de notificação nos locais corretos dos diretórios res/drawable-density/.

  • Os ícones para Android 2.2 (API nível 8) e versões anteriores são colocados nos diretórios res/drawable-density/.
  • Os ícones para Android 2.3 ao 2.3.7 (APIs níveis 9 a 10) são colocados nos diretórios res/drawable-density-v9/.
  • Os ícones para Android 3 (API nível 11) e versões posteriores são colocados nos diretórios res/drawable-density-v11/.

Se o app é compatível com as versões de Android 2.3 a 2.3.7 (APIs níveis 9 a 10), o Image Asset Studio gera uma versão cinza do ícone. As versões anteriores do Android usam o ícone branco gerado pelo Image Asset Studio.

Para saber mais, consulte Notificações, Material Design para notificações, Notificações, alterações no Android 5.0, Notificações, Android 4.4 e anteriores e Ícones da barra de status, Android 3.0 e anteriores.

Clip art

O Image Asset Studio facilita a importação de ícones do Material Design do Google em formatos VectorDrawable e PNG. Para isso, basta selecionar um ícone na caixa de diálogo. Para saber mais, consulte Ícones do Material Design.

Imagens

Você pode importar as próprias imagens e ajustá-las para o tipo do ícone. O Image Asset Studio é compatível com os seguintes tipos de arquivo: PNG (preferível), JPG (aceitável) e GIF (não recomendado).

Strings de texto

O Image Asset Studio permite digitar uma string de texto em diversas fontes e colocá-la em um ícone. Ele converte o ícone baseado em texto para arquivos PNG para diferentes densidades. Você pode usar as fontes instaladas no seu computador.

Executar o Image Asset Studio

Para iniciar o Image Asset Studio, faça o seguinte:

  1. Na janela Project, selecione a visualização Android.
  2. Clique com o botão direito na pasta res e selecione New > Image Asset.

    Assistente do Image Asset Studio para criação de ícones adaptáveis e legados na tela de início.

  3. Continue seguindo as etapas abaixo para:

Criar ícones adaptáveis e legados na tela de início

Observação: se o app não é compatível com versões posteriores ao Android 7.1, siga a instruções para criar apenas um ícone legado na tela de início.

Depois de abrir o Image Asset Studio, adicione ícones adaptáveis e legados seguindo estas etapas:

  1. No campo Icon Type, selecione Launcher Icons (Adaptive & Legacy).
  2. Na guia Foreground Layer, selecione um Asset Type e especifique o ativo no campo abaixo:
    • Selecione Image para especificar o caminho de um arquivo de imagem.
    • Selecione Clip Art para especificar uma imagem do conjunto de ícones do Material Design.
    • Selecione Text para especificar uma string de texto e selecionar uma fonte.
  3. Na guia Background Layer, selecione um Asset Type e especifique o ativo no campo abaixo. Você pode selecionar uma cor ou especificar uma imagem para usar como camada de fundo.
  4. Na guia Legacy, revise as configurações padrão e confirme que você quer gerar ícones legados, redondos e para a Google Play Store.
  5. Como alternativa, você pode alterar o nome e as configurações de exibição de cada guia Foreground Layer e Background Layer:
    • 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 inferior do assistente, ele será substituído. O nome só pode conter caracteres minúsculos, sublinhados e dígitos.
    • Trim: para ajustar a margem entre a imagem do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaços transparentes sem alterar a proporção. Para manter o ativo de origem inalterado, selecione No.
    • Color: para alterar a cor de um ícone Clip Art ou Text, clique no campo. Na caixa de diálogo Select Color, especifique uma cor e clique em Choose. O novo valor aparecerá no campo.
    • Resize: use o controle deslizante para especificar um fator de escala em porcentagem para redimensionar um ícone de Image, Clip Art ou Text. Esse controle é desativado para a camada de fundo quando você especifica um ativo do tipo Color.
  6. Clique em Next.
  7. Você também pode alterar o diretório de recursos: selecione o conjunto de origem de recursos onde quer adicionar o ativo de imagem, isto é, src/main/res, src/debug/res, src/release/res ou um conjunto de origem personalizado. O conjunto de origem principal se aplica a todas as variações de compilação, inclusive 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 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, consulte Configurar variações de compilação.
  8. Clique em Finish. O Image Asset Studio adiciona as imagens às pastas mipmap de cada densidade.

Criar um ícone legado na tela de início

Observação: se o app é compatível com o Android 8.0, siga as instruções para criar ícones adaptáveis e legados na tela de início.

Depois de abrir o Image Asset Studio, é possível adicionar um ícone na tela de início da seguinte forma:

  1. No campo Icon Type, selecione Launcher Icons (Legacy Only).
  2. Selecione um Asset Type e especifique o ativo no campo abaixo:
    • No campo Clip Art, clique no botão.
    • Na caixa de diálogo Select Icon, selecione 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 é exibido à direita da área Source Asset e na parte inferior do assistente na área de visualização.

  3. Você pode alterar o nome e as configuraçõ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 inferior do assistente, ele será substituído. O nome só pode conter caracteres minúsculos, sublinhados e dígitos.
    • Trim: para ajustar a margem entre a imagem do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaços transparentes sem alterar a proporção. Para manter o ativo de origem inalterado, selecione No.
    • Padding: se quiser ajustar o padding do ativo de origem nos quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o ajuste de margem acontecerá primeiro.
    • Foreground: para alterar a cor do primeiro plano de um ícone de Clip Art ou Text, clique no campo. Na caixa de diálogo Select Color, especifique uma cor e clique em Choose. O novo valor aparecerá no campo.
    • Background: para alterar a cor de fundo, clique no campo. Na caixa de diálogo Select Color, especifique uma cor e clique em Choose. O novo valor aparecerá no campo.
    • Scaling: para ajustar o tamanho do ícone, selecione Crop ou Shrink to Fit. Com a opção "Crop", as bordas da imagem podem ser recortadas, mas com a opção "Shrink" isso não é possível. Caso o ativo de origem ainda não esteja bem ajustado, você pode alterar o padding.
    • Shape: para colocar um pano de fundo atrás do ativo de origem, selecione uma forma, seja de círculo, quadrado, retângulo vertical ou horizontal. Para inserir um pano de fundo transparente, selecione None.
    • Effect: se quiser adicionar um efeito de orelha de cachorro no canto superior direito de um quadrado ou retângulo, selecione DogEar. Caso contrário, selecione None.

    O Image Asset Studio coloca 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 Next.
  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 ativo 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 variações de compilação, inclusive 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 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, consulte Configurar variações de compilação.

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

  6. Clique em Finish.
  7. O Image Asset Studio adiciona as imagens às pastas mipmap de cada densidade.

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

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

  1. No campo Icon Type, selecione Action Bar and Tab Icons.
  2. Selecione um Asset Type e especifique o ativo no campo abaixo:
    • No campo Clip Art, clique no botão.
    • Na caixa de diálogo Select Icon, selecione 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 é exibido à direita da área Source Asset e na parte inferior 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 inferior do assistente, ele será substituído. O nome só pode conter caracteres minúsculos, sublinhados e dígitos.
    • Trim: para ajustar a margem entre a imagem do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaços transparentes sem alterar a proporção. Para manter o ativo de origem inalterado, selecione No.
    • Padding: se quiser ajustar o padding do ativo de origem nos quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o ajuste de margem acontecerá primeiro.
    • Theme: 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 Next.
  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 ativo 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 variações de compilação, inclusive 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 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, consulte Configurar variações de compilação.

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

  6. Clique em Finish.
  7. O Image Asset Studio adiciona as imagens nas pastas drawable de cada densidade.

Criar um ícone de notificação

Depois de abrir o Image Asset Studio, é possível adicionar um ícone de notificação da seguinte forma:

  1. No campo Icon Type, selecione Notification Icons.
  2. Selecione um Asset Type e especifique o ativo no campo abaixo:
    • No campo Clip Art, clique no botão.
    • Na caixa de diálogo Select Icon, selecione 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 é exibido à direita da área Source Asset e na parte inferior 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 inferior do assistente, ele será substituído. O nome só pode conter caracteres minúsculos, sublinhados e dígitos.
    • Trim: para ajustar a margem entre a imagem do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaços transparentes sem alterar a proporção. Para manter o ativo de origem inalterado, selecione No.
    • Padding: se quiser ajustar o padding do ativo de origem nos quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o ajuste de margem acontecerá primeiro.

    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 Next.
  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 ativo 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 variações de compilação, inclusive 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 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, consulte Configurar variações de compilação.

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

  6. Clique em Finish.
  7. O Image Asset Studio adiciona as imagens nas pastas drawable de cada densidade e versão.

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 é executado, a imagem relacionada é 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 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 é aplicada a objetos da IU, como atividades, fragmentos, layouts, visualizações, entre 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. Por exemplo:
  •     <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat="@drawable/myimage" />
        

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

Depois de inserir o recurso de imagem no diretório res/ do projeto, referencie-o 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);
    

Para ver mais informações, consulte Acessar recursos.

No caso de ícones na tela de início, o arquivo AndroidManifest.xml precisa referenciar o local mipmap/. O Image Asset Studio adiciona esse código automaticamente. O código do arquivo de manifesto a seguir referencia o ícone ic_launcher no diretório mipmap/:

    <application android:name="ApplicationTitle"
             android:label="@string/app_label"
             android:icon="@mipmap/ic_launcher" >
    

Excluir ícones de um projeto

Para remover um ícone do projeto:

  1. Na janela Project, selecione a visualização Android.
  2. Expanda a pasta res/minimap para ícones na tela de início ou a pasta res/drawable para outros tipos de ícone.
  3. Localize a subpasta que tem o nome do ícone que você quer excluir.
  4. Essa pasta contém o ícone em diferentes densidades.

  5. Selecione a pasta e pressione a tecla Delete.
  6. Você também pode selecionar Edit > Delete ou clicar com o botão direito no arquivo e selecionar Delete.

    A caixa de diálogo Safe Delete será exibida.

  7. Também é possível selecionar opções para descobrir onde o ícone é usado no projeto. Depois disso, clique em OK.
  8. O Android Studio exclui os arquivos do projeto e da unidade. No entanto, se você optou por pesquisar os locais do projeto onde os arquivos são usados e alguns usos foram encontrados, é possível visualizar esses arquivos e decidir se quer excluí-los ou não. Você precisa excluir ou substituir essas referências para compilar o projeto.

  9. Selecione Build > Clean Project.
  10. O Android Studio remove todos os arquivos de imagem gerados que correspondem ao recurso de imagem excluído. Ele os remove do projeto e da unidade.

  11. Se necessário, corrija os erros que ainda persistem devido a partes do código que referenciam o recurso.
  12. O Android Studio destaca esses erros no código. Depois de remover todas as referências do código, você poderá compilar o projeto.