Nhập biểu tượng thiết kế vật liệu vào một dự án Android


143

Có cách nào dễ dàng để nhập tất cả các biểu tượng của kho lưu trữ biểu tượng Thiết kế Vật liệu vào dự án Android mà không gặp phải rủi ro khi thực hiện thủ công không?

Câu trả lời:


357

Hãy xem Vector Asset Studio

Thực hiện theo các bước sau để bắt đầu Vector Asset Studio:

  • Trong Android Studio, mở một dự án ứng dụng Android.
  • Trong cửa sổ Project, chọn giao diện Android.
  • Nhấp chuột phải vào thư mục res và chọn New> Vector Asset.

Sau khi bạn mở Vector Asset Studio, bạn có thể thêm một biểu tượng vật liệu như sau:

  • Chọn "Biểu tượng vật chất" (bằng cách nhấp vào Clip Art: ICON)
  • Nhấp vào Chọn
  • Chọn một biểu tượng vật liệu

24
Câu trả lời này thật tuyệt vời! Bạn không chỉ có thể chọn biểu tượng thiết kế vật liệu đã được gói trong Android Studio (không có bất kỳ plugin bổ sung nào) mà bạn cũng sẽ nhận được VectorDrawable và (chờ nó ...): "Nếu mức API tối thiểu của bạn được đặt ở một trong những API này các cấp độ, Vector Asset Studio cũng chỉ đạo Gradle tạo ra các hình ảnh raster của vectơ có thể vẽ được để tương thích ngược "
lenrok258

5
Bạn thậm chí có thể thay đổi màu trong tệp xml và png mới sẽ được tạo trong quá trình xây dựng (trong ứng dụng / build / created / res / pngs / debug ). Nhớ gusta! :-)
lenrok258

2
Upvote cho câu trả lời này! Trong trường hợp biểu tượng của bạn không xuất hiện trong chọn "Biểu tượng vật chất", bạn có thể tải xuống từ Biểu tượng vật liệu , nếu bạn chọn định dạng SVG, chọn Tệp SVG cục bộ trong Tài sản Vector và tạo tệp xml cho biểu tượng. Nếu bạn chọn định dạng PNG, nhấp chuột phải vào res-> Tài sản hình ảnh mới-> chọn Hình ảnh-> trong Đường dẫn: chọn hình ảnh lớn (xxxhdpi) và tạo png cho mọi mật độ.
noe

11
Kể từ Android Studio 2.2 Preview 5, không còn nút "Chọn" trong Vector Asset Studio nữa nhưng người ta phải nhấp vào biểu tượng nhỏ của biểu tượng (bên dưới tên). Mất một lúc tôi mới hiểu được điều đó
balu

2
studio tài sản vector gần đây có loại hình nghệ thuật thay vì biểu tượng vật chất, nhấp vào biểu tượng Android bên dưới để chọn biểu tượng của bạn
Gigarthan

23

Bạn có thể sử dụng plugin mới này cho studio android Trình tạo biểu tượng thiết kế vật liệu Android để giúp bạn làm việc với các biểu tượng vật liệu này do Google cung cấp: Google icon-design-icon


1
Tôi đã cài đặt nó, nhưng làm thế nào để tôi sử dụng nó?
gldraphael

1
@gldraphael - Sau khi cài đặt, chọn "Tệp" - "Mới" - "Biểu tượng thiết kế vật liệu". Chọn kích thước 48dp để đảm bảo rằng mỗi tệp được tạo có chiều cao / chiều rộng tiêu chuẩn 48, 72, 96, 144 & 192 pixel. Tất nhiên chọn kích thước dp nhỏ hơn nếu cần.
Martyn Davis

2
@MartynDavis cảm ơn. Tôi tìm thấy nó mặc dù. Điều tôi thích nhất ở đây là thực tế là tôi cũng có thể chọn màu.
gldraphael

15

Mở thư mục drawable> right click> new> vector asset, sau đó nhấp vào biểu tượng:

Ảnh chụp màn hình Android Studio hiển thị vị trí không rõ ràng để nhấp vào đâu


6

Đây là một đoạn script nhân bản kho github của các biểu tượng thiết kế vật liệu tại

https://github.com/google/m vật liệu-design-ions

và tạo một chỉ mục của tất cả các tập tin. Nó cũng sao chép các tập tin svg vào thư mục con theo thể loại. Bạn có thể sử dụng điều này làm cơ sở để sao chép các tệp bạn quan tâm vào dự án của mình - chỉ cần sửa đổi câu lệnh sao chép tìm và cp theo ý thích của bạn. Nếu bạn ví dụ cần png's ở một kích thước nhất định - chúng nằm trong các thư mục lân cận và bạn cần sửa đổi lệnh find và copy cho phù hợp.

nhập mô tả hình ảnh ở đây

#!/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

1
Kịch bản ngọt ngào. Vì đây là một trường hợp sử dụng vứt đi cho repo đó đề nghị thay đổi thành git clone --depth = 1 để có được một bản sao nông. Tải nhanh hơn một chút.
mbac32768

1

Tôi tìm thấy liên kết này hữu ích cho tôi.

https://dev.m Materialdesignicons.com/getting-started/android

thực hiện lớp có sẵn

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

Sau khi thêm phụ thuộc lớp, bạn có thể tạo mục menu theo cách này.

<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>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.