Importar ícones de design de material para um projeto Android

143

Existe uma maneira fácil de importar todos os ícones do repositório de ícones do Material Design para um projeto Android sem o risco de fazê-lo manualmente?

icons material-design

— Ivan Aranibar
fonte

358

Dê uma olhada no Vector Asset Studio

Siga estas etapas para iniciar o Vector Asset Studio:

No Android Studio, abra um projeto de aplicativo Android.

Na janela Projeto, selecione a visualização Android.

Clique com o botão direito do mouse na pasta res e selecione Novo> Ativo de Vetor.

Depois de abrir o Vector Asset Studio, você pode adicionar um ícone de material da seguinte maneira:

Selecione "Ícone do material" (clicando no Clip Art: ICON)

Clique em Escolher

Selecione um ícone de material

— mpkuth
fonte

24

Esta resposta é incrível! Não apenas você pode escolher o ícone do design do material que já está incluído no Android Studio (sem plug-ins adicionais), mas também obterá o VectorDrawable e (aguarde ...): "Se o seu nível mínimo de API estiver definido em uma dessas APIs níveis, Vector ativos Studio também dirige Gradle para gerar imagens raster do drawable vector para compatibilidade com versões anteriores"

— lenrok258

5

Você pode até mudar a cor no arquivo xml e novos pngs serão gerados durante a compilação (em app / build / generate / res / pngs / debug ). Me gusta! :-)

— lenrok258

2

Voto positivo para esta resposta! Caso seu ícone não apareça em "Material Icon", você pode baixá-lo em Material Icons . Se você escolher o formato SVG, selecione Local SVG File no Vector Asset e gere o arquivo xml para o ícone. Se você escolher o formato PNG, clique com o botão direito do mouse em res-> novo ativo de imagem-> selecione Imagem-> no caminho: escolha a imagem grande (xxxhdpi) e gere o png para cada densidade.

— noe

11

No Android Studio 2.2 Preview 5, não há mais o botão "Escolher" no Vector Asset Studio, mas é preciso clicar na pequena representação do ícone (abaixo do nome). Levei um tempo para descobrir isso ...

— balu

2

estúdio de ativos vector recente tem um tipo de clip art em vez de ícone material, clique no ícone android abaixo lá para escolher o seu ícone

— Gigarthan

23

Você pode usar este novo plug-in para o android studio Plug - in do Gerador de ícones de design de material para Android para ajudá-lo a trabalhar com esses ícones de materiais fornecidos pelo Google: Google material-design-icons

— Ouss StinGray
fonte

1

Eu instalei, mas como eu o uso?

— gldraphael

1

@gldraphael - Depois de instalado, selecione "Arquivo" - "Novo" - "Ícone do design do material". Selecione um tamanho de 48dp para garantir que cada um dos arquivos gerados possua a altura / largura padrão de 48, 72, 96, 144 e 192 pixels. Obviamente, selecione um tamanho de DP menor, se necessário.

— Martyn Davis

2

@MartynDavis thanks. Eu achei isso. O que eu mais gosto é o fato de que também posso escolher a cor.

— gldraphael

15

Na pasta drawable> right click> new> vector asset, em seguida, clique no ícone:

— Dale
fonte

6

Aqui está um script que clona o repositório github dos ícones de design de material em

https://github.com/google/material-design-icons

e cria um índice de todos os arquivos. Ele também copia os arquivos svg para subdiretórios por categoria. Você pode usar isso como base para copiar os arquivos nos quais está interessado em seu projeto - apenas modifique a instrução find e cp copy ao seu gosto. Se, por exemplo, você precisar dos png em um determinado tamanho - eles estão em diretórios vizinhos e você precisará modificar o comando find and copy de acordo.

#!/bin/bash
# WF 2016-06-04
# get google material design icons
# see http://stackoverflow.com/questions/28684759/import-material-design-icons-into-an-android-project
tmp=/tmp/icons
index=$tmp/index.html
mkdir -p $tmp
cd $tmp
if [ ! -d material-design-icons ]
then
  git clone https://github.com/google/material-design-icons
fi
cat << EOF > $index
<html>
  <head>
    <head>
    <body>
      <h1>Google Material Design Icons</h1>
EOF
for icon in `find . -name *.svg | grep production | grep 48`
do
    svg=`basename $icon .svg`
    category=`echo $icon | cut -f3 -d '/'`
    echo $category $svg.svg
    mkdir -p $tmp/$category
    cp $icon $tmp/$category
    echo "    <img src='"$icon"' title='"$category $svg"' >" >> $index
done
cat << EOF >> $index
  </body>
</html>
EOF

— Wolfgang Fahl
fonte

1

Script doce. Como esse é um tipo de caso de uso descartável para esse repositório, sugira a alteração para o git clone - profundidade = 1 para obter um clone superficial. Downloads um pouco mais rápidos.

— mbac32768 4/04/19

1

Achei este link útil para mim.

https://dev.materialdesignicons.com/getting-started/android

implementação gradle está disponível

dependencies {
    implementation 'net.steamcrafted:materialiconlib:1.1.5'
}

Após adicionar a dependência do gradle, você pode criar o item de menu dessa maneira.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" <!-- important, you'll have to include this to use the custom xml attributes -->
    xmlns:tools="http://schemas.android.com/tools" >

    <!-- example of a menu item with an icon -->
    <item
        android:title="Disable Wifi"
        app:showAsAction="always"
        app:materialIcon="wifi_off" <!-- This sets the icon, HAS AUTOCOMPLETE ;) -->
        app:materialIconColor="#FE0000" <!-- Sets the icon color -->
    />

</menu>

— Jamali Naveed
fonte