Skip to content

Most visited

Recently visited

navigation

Criar ícones com o Image Asset Studio

Vídeo

Pixels independentes de densidade

O Android Studio tem uma ferramenta chamada Image Asset Studio que ajuda a criar ícones personalizados para o aplicativo com ícones do Material, imagens personalizadas e strings de texto. Ele gera um conjunto de ícones na resolução correta para toda densidade de tela generalizada a que seu aplicativo oferece suporte. O Image Asset Studio coloca os ícones gerados recentemente em pastas específicas de cada densidade no diretório res/ do projeto. Em tempo de execução, o Android emprega os recursos corretos com base na densidade da tela do dispositivo em que seu aplicativo está sendo executado.

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

Sobre o Image Asset Studio

O Image Asset Studio ajuda a criar diversos tipos de ícones em diferentes densidades e mostra exatamente onde eles devem ser colocados no projeto. Ele inclui ferramentas para ajustar os ícones e adicionar pano de fundo, tudo isso enquanto exibe o resultado em um painel de visualização para que eles fiquem exatamente como você quer. Essas ferramentas podem simplificar muito a criação de ícones e o processo de importação. As seções a seguir descrevem os tipos de ícone que você pode criar e as imagens e os textos que pode usar.

Ícones de inicialização

Um ícone de inicialização é uma imagem que representa o seu aplicativo para os usuários. Ele pode:

O Image Asset Studio cria ícones separados automaticamente para as densidades de tela mais comuns recomendadas, incluindo mdpi, hdpi, xhdpi, xxhdpi e xxxhdpi. Isso garante que o ícone seja exibido com qualidade em diversas telas e dispositivos. Ele coloca os ícones nos locais corretos dos diretórios res/mipmap-density/. Além disso, cria uma imagem de 512 x 512 pixels perfeitamente adequada à Google Play Store.

Recomendamos usar o estilo do Material Design para ícones de inicialização, mesmo se oferecer suporte a versões anteriores do Android.

Acesse Ícones de inicialização e Ícones para produtos — Material Design para saber mais.

Barra de ação e ícones de aba

Os ícones de barra de ação são elementos colocados na barra de ação e que representam itens de ação individuais. Leia Como adicionar e tratar ações, Barra do aplicativo — Material Design e Desenho da barra de ação para ver mais detalhes.

Os ícones de aba são elementos gráficos usados para representar abas individuais em uma interface multiaba. Todo ícone de aba tem dois estados: não selecionado e selecionado. Leia Como criar vistas deslizáveis com abas e Abas — Material Design para obter mais informações.

O Image Asset Studio cria ícones individuais automaticamente para as densidades de tela mais comuns recomendadas, que incluem mdpi, hdpi, xhdpi e xxhdpi. Ele coloca os ícones nos locais corretos dos diretórios res/drawable-density/.

Recomendamos usar o estilo do Material Design para ícones de barra de ação e aba, mesmo se oferecer suporte a versões anteriores do Android. Use appcompat e outras bibliotecas de suporte para oferecer sua IU do Material Design a versões mais antigas da plataforma.

Uma alternativa ao Image Asset Studio é usar o Vector Asset Studio para criar ícones de barra de ação e de aba. Os drawables de vetor funcionam bem para ícones simples e podem reduzir o tamanho do seu APK.

Ícones de notificação

Uma notificação é uma mensagem que pode ser exibida ao usuário fora da IU normal do aplicativo. Quando você instrui o sistema a emitir uma notificação, ela aparece primeiro como um ícone na área das notificações. Para ver os detalhes da notificação, o usuário abre a gaveta de notificações. A área das notificações e a gaveta de notificações são áreas controladas pelo sistema que o usuário pode visualizar a qualquer momento.

O Image Asset Studio cria ícones individuais automaticamente para as densidades de tela mais comuns recomendadas, que incluem mdpi, hdpi, xhdpi e xxhdpi. Ele coloca os ícones nos locais corretos dos diretórios res/drawable-density/.

Se o seu aplicativo oferece suporte ao Android 2.3 até o 2.3.7 (APIs de nível 9 e 10), o Image Asset Studio gera uma versão cinza do ícone. As versões anteriores do Android usam o ícone branco que o Image Asset Studio gera.

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 para saber mais.

Clipart

O Image Asset Studio facilita importar ícones do Material do Google em formato PNG: basta selecionar um ícone na caixa de diálogo. Para saber mais, leia Ícones do Material.

Imagens

Você pode importar as próprias imagens e ajustá-las para o tipo do ícone. O Image Asset Studio oferece suporte aos 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.

Como executar o Image Asset Studio

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

  1. No Android Studio, abra um projeto de aplicativo Android.
  2. Na janela Project, selecione a vista Android.
  3. Selecione a pasta res e, em seguida, clique em File > New > Image Asset.
  4. Uma alternativa é clicar com o botão direito do mouse na pasta res e selecionar New > Image Asset.

    Algumas outras vistas e pastas do projeto também têm esse item de menu.

    O Image Asset Studio é aberto.

  5. Agora você pode Criar um ícone de inicialização, Criar um ícone de barra de ação ou aba ou Criar um ícone de notificação.

Criar um ícone de inicialização

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

  1. No campo Icon Type, selecione Launcher 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 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 na área Source Asset, no lado direito, e na área de pré-visualização, na parte inferior do assistente.

  3. Você pode alterar o nome e as configurações de exibição:
    • Name – se não quiser 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 pode conter apenas caracteres minúsculos, sublinhados e dígitos.
    • Trim – para ajustar a margem entre o elemento gráfico do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaço transparente sem alterar o fator de proporção. Para não alterar o ativo de origem, selecione No. Padrão: No
    • Padding – se quiser ajustar o preenchimento do ativo de origem em todos os quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o ajuste de margem acontece primeiro. Padrão: 0%
    • 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. Padrão: 000000
    • 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. Padrão: FFFFFF
    • Scaling – para ajustar o tamanho do ícone, selecione Crop ou Shrink to Fit. Com “Crop”, as bordas da imagem podem ser removidas, mas com “Shrink”, não. Você poderá ajustar o preenchimento, se necessário, se o ativo de origem não couber no espaço pretendido. Padrão: Shrink to Fit
    • Shape - para colocar um fundo por trás do ativo de origem, selecione uma figura, seja um círculo, quadrado ou retângulo vertical ou horizontal. Para inserir um fundo transparente, selecione None. Padrão: Square
    • Effect – se quiser adicionar um efeito de orelha de cachorro na parte superior direita de um quadrado ou retângulo, selecione DogEar. Se não quiser adicionada nada, selecione None. Padrão: None

    O Image Asset Studio coloca o ícone dentro de um quadrado transparente para que haja um pouco de preenchimento nas extremidades. O preenchimento 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 do recurso 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 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 mostra as imagens e pastas em que eles aparecerão na vista Project Files da janela Project.

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

Criar uma barra de ação ou um ícone de aba

Depois de abrir o Image Asset Studio, é possível adicionar um ícone de barra de ação ou aba 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 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 na área Source Asset, no lado direito, e na área de pré-visualização, na parte inferior do assistente.

  3. Você pode alterar o nome e as opções de exibição:
    • Name – se não quiser 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 pode conter apenas caracteres minúsculos, sublinhados e dígitos.
    • Trim – para ajustar a margem entre o elemento gráfico do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaço transparente sem alterar o fator de proporção. Para não alterar o ativo de origem, selecione No. Padrão: No
    • Padding – se quiser ajustar o preenchimento do ativo de origem em todos os quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o ajuste de margem acontece primeiro. Padrão: 0%
    • 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. Padrão: None

    O Image Asset Studio cria o ícone dentro de um quadrado transparente para que haja um pouco de preenchimento nas extremidades. O preenchimento 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 do recurso 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 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 mostra as imagens e pastas em que eles aparecerão na vista 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 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 na área Source Asset, no lado direito, e na área de pré-visualização, na parte inferior do assistente.

  3. Você pode alterar o nome e as opções de exibição:
    • Name – se não quiser 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 pode conter apenas caracteres minúsculos, sublinhados e dígitos.
    • Trim – para ajustar a margem entre o elemento gráfico do item e a borda do ativo de origem, selecione Yes. Essa operação remove espaço transparente sem alterar o fator de proporção. Para não alterar o ativo de origem, selecione No. Padrão: No
    • Padding – se quiser ajustar o preenchimento do ativo de origem em todos os quatro lados, mova o controle deslizante. Selecione um valor entre -10% e 50%. Se você também selecionar Trim, o ajuste de margem acontece primeiro. Padrão: 0%

    O Image Asset Studio cria o ícone dentro de um quadrado transparente para que haja um pouco de preenchimento nas extremidades. O preenchimento 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 do recurso 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 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 mostra as imagens e pastas em que eles aparecerão na vista 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 aplicativo é executado, a imagem correspondente é exibida automaticamente, dependendo do dispositivo:

Você só pode acessar recursos de imagem do encadeamento 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 ativa uma ImageView para usar o recurso de drawable/myimage.png.

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

Consulte Acesso aos recursos para saber mais.

Para ícones de inicialização, o arquivo AndroidManifest.xml deve 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 um ícone do projeto

Para remover um ícone do projeto:

  1. Na janela Project, selecione a vista Android.
  2. Expanda a pasta res/minimap para um ícone de inicialização ou a res/drawable para outros tipos de ícone.
  3. Localize uma subpasta que tenha o nome do ícone que você deseja 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 do mouse no arquivo e selecionar Delete.

    A caixa de diálogo Safe Delete é exibida.

  7. É possível também 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 em que o arquivo é usado, e foram detectados alguns usos, poderá vê-los e decidir se ainda deseja excluir o arquivo ou não. Você deve excluir ou substituir essas referências para poder 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 em virtude de partes do código que referenciam o recurso.
  12. O Android Studio destaca esses erros no código. Quando tiver removido todas as referências do código, você poderá compilar o projeto.

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)