Android - ขนาดไอคอนเรียกใช้


350

สำหรับHDPI, XHDPIฯลฯ อะไรควรเป็นขนาดที่เหมาะสมที่สุดของไอคอนตัวเรียกใช้? ฉันต้องสร้าง9-Patchภาพเพื่อให้ไอคอนปรับขนาดอัตโนมัติหรือควรสร้างไอคอนแยกกันหรือไม่


9
คุณไม่ได้สร้างภาพ 9 ภาพสำหรับไอคอนตัวเรียกใช้ 9-patch ใช้สำหรับรูปภาพ (ทรัพยากร) ภายในแอปพลิเคชัน @edwoollard ได้ให้คำตอบที่ถูกต้อง สำหรับข้อมูลเพิ่มเติมไปที่ลิงค์นี้ที่นี่: developer.android.com/guide/practices/ui_guidelines/ …
Siddharth Lele

แต่เพียงขอความอยากรู้เราสามารถใช้ 9-patches สำหรับไอคอนตัวเรียกใช้งานได้หรือไม่?
Mohammad Jafar Mashhadi

คุณสามารถมีขนาดแตกต่างกันสำหรับไอคอน: play.google.com/store/apps/…
Vipul Patel

ฉันจะตั้งค่าไอคอนที่แตกต่างกัน 2 แบบได้อย่างไร: หนึ่งอันสำหรับแอพ Android หนึ่งอันสำหรับแอป Chromebook เป็นไปได้ไหม?
Kiem Duong

คำตอบ:


705

ฉันจะสร้างภาพแยกต่างหากสำหรับแต่ละภาพ:

LDPI should be 36 x 36.

MDPI should be 48 x 48.

TVDPI should be 64 x 64.

HDPI should be 72 x 72.

XHDPI should be 96 x 96.

XXHDPI should be 144 x 144.

XXXHDPI should be 192 x 192.

จากนั้นให้ใส่แต่ละอันไว้ในก้านแยกของโฟลเดอร์ที่สามารถถอดออกได้

นอกจากนี้คุณยังจะต้องให้รุ่นใหญ่ของไอคอนของคุณเมื่ออัปโหลดแอปของคุณบน Google Play WEB 512 x 512สโตร์และนี้ควรจะเป็น นี่คือขนาดใหญ่เพื่อให้ Google สามารถ rescale มันขนาดใดก็ได้เพื่อโฆษณาแอปของคุณทั่ว Google Play Store และไม่เพิ่ม pixelation ให้โลโก้ของคุณ

โดยทั่วไปทั้งหมดของไอคอนอื่น ๆ ควรจะอยู่ในสัดส่วนที่ไอคอน MDPI at 48 x 48'พื้นฐาน'

LDPI is MDPI x 0.75.

TVDPI is MDPI x 1.33.

HDPI is MDPI x 1.5.

XHDPI is MDPI x 2.

XXHDPI is MDPI x 3.

XXXHDPI is MDPI x 4.

นี่คือทั้งหมดที่อธิบายไว้ในหน้า Iconography ของเว็บไซต์ Android Developers: http://developer.android.com/design/style/iconography.html


3
คุณวางเวอร์ชัน WED ที่ไหน
Mafro34

10
@ Mafro34 ฉันคิดว่าคุณหมายถึงเวอร์ชั่นของเว็บเหรอ? เมื่อคุณเสร็จสิ้นแอปและอัปโหลดไปยัง Google Play Store ในที่สุดก็จะขอให้คุณอัปโหลดไอคอนแอพขนาด 512 x 512 ซึ่งหมายความว่าพวกเขาสามารถใช้ไอคอนได้ทุกที่ในเว็บไซต์และแอปเพื่อโฆษณาแอปของคุณ
edwoollard

@ Mafro34 พวกเขาขอ 512 x 512 เพื่อให้พวกเขาสามารถปรับขนาดไอคอนให้เล็กลงตามขนาดที่พวกเขาต้องการในตำแหน่งที่แตกต่างกันของแอพและเว็บไซต์
edwoollard

@edwoollard อุ๊ปส์ขอโทษฉันไม่เห็นบรรทัดสุดท้ายของคุณ (" this is all explained ...") สิ่งที่คุณมีก็คือภาพรวมของข้อกำหนด (การพัฒนา) ของพวกเขา
ashes999

ฉันได้สร้างสคริปต์ที่ส่งออกไอคอนตัวเปิดใช้ Android ที่ velara3.com และจากการวิจัยของฉัน XXHDPI คือ 180x180 ไม่ใช่ 144 ดูที่ developer.android.com/guide/practices/screens_support.html ค้นหาในหน้า "180x180 (3.0x) เพื่อเพิ่มความหนาแน่นสูงพิเศษ" อย่างไรก็ตามฉันได้เห็นสถานที่ 144 แห่ง
1.21 gigawatts

121

อย่าสร้างภาพ 9 ภาพสำหรับไอคอนตัวเรียกใช้ คุณต้องสร้างภาพแยกสำหรับแต่ละภาพ

LDPI - 36 x 36
MDPI - 48 x 48
HDPI - 72 x 72
XHDPI - 96 x 96
XXHDPI - 144 x 144
XXXHDPI - 192 x 192.
WEB - 512 x 512 (Require when upload application on Google Play)

หมายเหตุ: ใช้รูปภาพ WEB (512 x 512) เมื่อคุณอัปโหลดแอปพลิเคชัน Android ของคุณใน Market

|| ขนาดไอคอนของแอป Android ||

อุปกรณ์ทั้งหมด

hdpi=281*164
mdpi=188*110
xhdpi=375*219
xxhdpi=563*329
xxxhdpi=750*438

48 × 48 (mdpi)
72 × 72 (hdpi)
96 × 96 (xhdpi)
144 × 144 (xxhdpi)
192 × 192 (xxxhdpi)
512 × 512 (Google Play store)

2
@ RED.Skull ไม่เขาหมายถึงไอคอนที่คุณอัปโหลดไปยังแผงควบคุม Google Developer ที่ผู้ใช้จะดูในตลาด
Mirko

6
@Ogen - มันเป็นนิสัยที่ดีในการถามคำถามใช่หน่วยเป็นพิกเซล
Chirag

เป็นไปได้หรือไม่ที่จะจัดเตรียมรุ่น 192 x 192 ในโฟลเดอร์ mipmap-xxxhdpi และลดขนาดระบบลงอย่างเหมาะสมหรือไม่
eliasbagley

@eliasbagley: แน่นอนว่าใช้งานได้ แต่ไม่เหมาะสม (ไม่เช่นนั้นจะไม่มีโฟลเดอร์ทั้งหมดของความหนาแน่นเฉพาะ)
Jonik

98

ไอคอน Android ต้องการห้าขนาดแยกกันสำหรับความหนาแน่นของพิกเซลหน้าจอที่แตกต่างกัน ไอคอนสำหรับความละเอียดต่ำจะถูกสร้างขึ้นโดยอัตโนมัติจากพื้นฐาน

mdpi (Baseline): 160 dpi 1×
hdpi: 240 dpi 1.5×
xhdpi: 320 dpi 2×
xxhdpi: 480 dpi 3×
xxxhdpi: 640 dpi 4× (launcher icon only)

ไอคอนตัวเรียกใช้ (.Png)

48 × 48 (mdpi)
72 × 72 (hdpi)
96 × 96 (xhdpi)
144 × 144 (xxhdpi)
192 × 192 (xxxhdpi)
512 × 512 (Google Play store)

แถบการกระทำไอคอนไดอะล็อกและแท็บ

24 × 24 area in 32 × 32 (mdpi)
36 × 36 area in 48 × 48 (hdpi)
48 × 48 area in 64 × 64 (xhdpi)
72 × 72 area in 96 × 96 (xxhdpi)
96 × 96 area in 128 × 128 (xxxhdpi)*

ไอคอนแจ้งเตือน

22 × 22 area in 24 × 24 (mdpi)
33 × 33 area in 36 × 36 (hdpi)
44 × 44 area in 48 × 48 (xhdpi)
66 × 66 area in 72 × 72 (xxhdpi)
88 × 88 area in 96 × 96 (xxxhdpi)*

ไอคอนบริบทขนาดเล็ก

16 × 16 (mdpi)
24 × 24 (hdpi)
32 × 32 (xhdpi)
48 × 48 (xxhdpi)
64 × 64 (xxxhdpi)*

ขนาด xxxhdpi ต้องการโดยไอคอนตัวเรียกใช้เท่านั้นเนื่องจากไซต์ทางการสนับสนุนหลายหน้าจอระบุ


1
ขอขอบคุณที่เพิ่มขนาดสำหรับบริบทต่างๆ คุณมีแหล่งที่มาสำหรับสิ่งนี้หรือไม่?
Krøllebølle

การอ้างอิงขนาดไอคอนในไซต์ android อยู่ที่ไหน
มาห์ดี

39

ไอคอนที่ปรับเปลี่ยนได้

เริ่มต้นด้วย Android 8.0 มีไอคอนแบบปรับได้ซึ่งประกอบด้วยสองเลเยอร์แยกกัน ทั้งสองเลเยอร์คือ 108 x 108 dp

ป้อนคำอธิบายรูปภาพที่นี่

(ภาพดัดแปลงมาจากเอกสาร Android )

ขนาด

หากคุณรองรับเวอร์ชันต่ำกว่า Android 8.0 คุณยังคงต้องรวมขนาดดั้งเดิม ( 48dp) ฉันทำเครื่องหมายขนาดพิกเซลเป็นสีแดงสำหรับแต่ละความละเอียดด้านล่าง

ป้อนคำอธิบายรูปภาพที่นี่

อย่าทำด้วยมือ

ฉันคิดว่าคุณสามารถทำสิ่งเหล่านี้ด้วยมือถ้าคุณต้องการ แต่ฉันต้องบอกว่าวันที่ฉันทำมันจบลงแล้ว Android Studio 3.0 Asset Studioค่อนข้างดีและจะสร้างทุกอย่างให้คุณ สิ่งที่คุณต้องทำคือให้ภาพพื้นหน้าและพื้นหลังขนาดใหญ่เพียงพอ (ฉันใช้ภาพ 1024 x 1024 px)

เพื่อเปิดแอสเซทสตูดิโอไปที่File> New> ภาพสินทรัพย์

ป้อนคำอธิบายรูปภาพที่นี่


ไอคอนดั้งเดิมจะต้องมีพื้นหลังด้วยหรือไม่
นักพัฒนา android

@android Developer คุณสามารถเลือก "Legacy only" เป็นประเภทไอคอนหากคุณต้องการสร้างไอคอนโดยไม่ระบุเลเยอร์พื้นหลัง หากคุณเลือก "Adaptive and Legacy" ไอคอนแบบดั้งเดิมจะถูกสร้างขึ้นโดยการรวมส่วนหน้าและเลเยอร์พื้นหลัง
Suragch

เลเยอร์พื้นหลังจริง (เป็นเลเยอร์ที่แตกต่าง) จะใช้กับอุปกรณ์ Android 8.0 ขึ้นไปเท่านั้น
Suragch

จะเป็นอย่างไรถ้าฉันต้องการสไตล์ไอคอนแบบปรับตัวที่จะใช้เฉพาะจาก Android O และสไตล์ลักษณะดั้งเดิม (โดยไม่มีพื้นหลังพิเศษแม้ว่าจะรวมอยู่ด้วย) ก่อนหน้านี้หรือไม่ เป็นไปได้ไหมที่จะหลีกเลี่ยงพื้นหลังใน Android O ฉันไม่ชอบสไตล์ไอคอนแบบปรับได้ ...
พัฒนา Android

ผู้พัฒนา @android เพียงแค่สร้างไอคอนในสองรอบ ก่อนอื่นให้ทำ "Adaptive and Legacy" และเตรียมเลเยอร์ทั้งสอง (คุณสามารถระบุได้ว่าจะไม่สร้างไอคอนเลกาซี่ในตอนนี้ แต่มันไม่สำคัญ) จากนั้นทำ "เลกาซี่เท่านั้น" และเลือกรูปภาพที่คุณต้องการ (ตัวอย่างเช่นภาพเบื้องหน้า) หากไอคอนเลกาซี่ถูกสร้างขึ้นแล้วในการผ่านครั้งแรกพวกเขาจะถูกเขียนทับด้วยภาพใหม่ (ไร้ฉากหลัง) ในการผ่านครั้งที่สอง จำไว้ว่าคุณสามารถลบไฟล์ใด ๆ เหล่านี้และแทนที่ด้วยรูปภาพที่คุณสร้างขึ้นด้วยมือ
Suragch

24

ไม่จำเป็นต้องใช้เครื่องมือของบุคคลที่สามเมื่อ Android Studio สามารถสร้างไอคอนให้เราได้

  • File-> New->Image Asset

  • จากนั้นเลือกLauncher Iconsเป็นประเภทสินทรัพย์:

  • เลือกภาพความละเอียดสูงสำหรับไฟล์รูปภาพ:

สร้างไอคอนตัวเรียกใช้ Android

  • Next-> Finishเพื่อสร้างไอคอน

สร้างไอคอน ic laucher

ในที่สุดก็อัพเดตandroid:iconฟิลด์ชื่อAndroidManifest.xmlหากจำเป็น


4
Android Studio ดูเหมือนจะสร้างช่องว่างภายในเพิ่มเติมรอบ ๆ ไอคอนของฉันแม้ว่าฉันจะบอกให้ตัดขอบช่องว่างและทำให้แน่ใจว่าแถบเลื่อนช่องว่างไปทางด้านซ้าย บั๊กที่มีกับ Android Studio อาจจะเป็นฉันหายไปหรือ
จาง

วิธีนี้ (น่าเสียดาย) sucks เนื่องจากการเสริมช่องว่างพิเศษของ Android Studio ทำให้ ...
Micro

คลิกขวาที่โฟลเดอร์ res และเลือกใหม่> สินทรัพย์รูปภาพ ไปที่ .. developer.android.com/studio/write/image-asset-studio.html
Waruna Manjula

9

ให้ภาพอย่างน้อย 512px X 512px และใช้เครื่องมือนี้: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

มันจะสร้างไอคอนทั้งหมดสำหรับคุณในขนาดที่ถูกต้องรวมถึงภาพบนเว็บสำหรับ play store


เจ๋ง แต่ก็ไม่ได้สร้างขนาด ldpi: ข้อมูลภาพ PNG, 36 x 36, 8-bit / color RGBA, ไม่มีการสอดประสาน ขนาดนี้ใช้กับอุปกรณ์ที่ใช้ Jelly Beans :) ..
Hudson Santos

สร้างโครงการใหม่ด้วย Android Studio และคุณจะเห็นว่าไม่มีโฟลเดอร์ ldpi อีกต่อไป ฉันจะสมมติว่าคุณไม่ต้องการพวกเขาอีกต่อไป
LuckyMalaka

7

LDPI ควรเป็น 36 x 36

MDPI 48 x 48

TVDPI 64 x 64

HDPI 72 x 72

XHDPI 96 x 96

XXHDPI 144 x 144

XXXHDPI 192 x 192


1
คำตอบของคุณให้อะไรที่คนอื่นยังไม่ได้ โปรดอย่าปลิงหาคำตอบของคนอื่นเพื่อชื่อเสียง ... รับด้วยตัวเอง
edwoollard

ดูเหมือนว่าจะมีการคัดลอก + วางจากคำตอบนี้: stackoverflow.com/a/12768159/1974224
Cristik

7

ตามแนวทางการออกแบบวัสดุ ( ที่นี่ภายใต้ "กริดหน่วย DP") ไอคอนผลิตภัณฑ์ของคุณควรมีขนาด 48 dp โดยมีการเว้นที่ 1dp ยกเว้นกรณีของ XXXHDPI โดยที่การเว้นวรรคควรเป็น 4dp

ดังนั้นขนาดพิกเซลคือ:

  • 48 × 48 (mdpi) พร้อมช่องว่างภายใน 1 dp
  • 72 × 72 (hdpi) พร้อมการขยาย 1 dp
  • 96 × 96 (xhdpi) พร้อมช่องว่างภายใน 1 dp
  • 144 × 144 (xxhdpi) พร้อมช่องว่างภายใน 1 dp
  • 192 × 192 (xxxhdpi) พร้อมช่องว่างภายใน 4 dp

ฉันแนะนำให้หลีกเลี่ยงการใช้ VectorDrawable เนื่องจากตัวเรียกใช้งานบางตัวไม่รองรับ แต่ฉันคิดว่า WEBP ควรใช้ได้ตราบใดที่คุณมี minSdk ที่สนับสนุนความโปร่งใสสำหรับพวกเขา (API 18 ขึ้นไป - Android 4.3)

หากคุณเผยแพร่บน Play Store ความต้องการของสิ่งที่จะอัปโหลดมี (ตามที่นี่ ):

  • 32-bit PNG (พร้อมอัลฟ่า)
  • ขนาด: 512px คูณ 512px
  • ขนาดไฟล์สูงสุด: 1024KB

6

เช่นเดียวกับ @ MartinVonMartinsgrünพูดถึงตอนนี้มีเครื่องมือที่ดีกว่าอยู่แล้วยืนยันกำเนิดในสตูดิโอ Android

สำหรับไอคอนแอปพลิเคชัน (แถบเครื่องมือ, ActionBar, DrawableLeft ฯลฯ ) ใช้: http://romannurik.github.io/AndroidAssetStudio/icons-actionbar.html

สำหรับตัวเรียกใช้งาน (ไอคอนแอปพลิเคชัน) ใช้: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

แต่นี่คือเทคนิคและวิธีในการรับความละเอียดที่ดีกว่าสำหรับไอคอนและไอคอนตัวเรียกใช้

ขั้นตอนที่ 1 :

ก่อนอื่นให้ไปที่https://materialdesignicons.comแล้วเลือกไอคอนของคุณ หรือหากคุณมีไอคอนของคุณในความละเอียดที่ดีแล้วข้ามขั้นตอนนี้ คลิกที่ไอคอนที่ต้องการและคลิกที่ "ส่งออกขั้นสูง" มันจะเปิดหน้าต่างดังต่อไปนี้พยายามสร้างไอคอนให้ใหญ่ที่สุด

จากนั้นคลิกที่ "ไอคอน" เพื่อสร้างไอคอน (.png) เคล็ดลับก็คือพยายามสร้างไอคอนขนาดใหญ่ที่สุดเท่าที่จะเป็นไปได้สำหรับอุปกรณ์ที่มีความละเอียดสูงและเครื่องมือจะจัดการมันทั้งหมดสำหรับอุปกรณ์ขนาดเล็ก แต่ถ้าคุณใช้ไอคอนขนาดเล็กในขณะที่สร้างไอคอนสำหรับอุปกรณ์ระดับไฮเอนด์

ขั้นตอนที่ 2 :

จากนั้นไปที่หน้าเครื่องมือและอัปโหลดไอคอนป้อนคำอธิบายรูปภาพที่นี่

คลิกที่ "กำหนดเอง" ถ้าคุณต้องการสีไอคอนของคุณ ไม่ว่าคุณจะอัปโหลดไอคอนสีใดโดยใช้ Custom คุณสามารถสร้างสีใดก็ได้ที่คุณต้องการ จากนั้นเลือกชื่อและคลิก "ดาวน์โหลด. ZIP" นี่จะดาวน์โหลดไฟล์. zip พร้อมไอคอนสำหรับการแก้ไขปัญหาทั่วไปส่วนใหญ่ คุณสามารถคัดลอกและวางโฟลเดอร์ res ในโฟลเดอร์โครงการแอปพลิเคชันของคุณและคุณจะเห็นไอคอนในส่วน drawable


4

ฉันโพสต์สคริปต์เพื่อสร้างไอคอนแพลตฟอร์มทั้งหมดสำหรับแอพ PhoneGap จากไฟล์ไอคอน SVG ไฟล์เดียว หากคุณมีบิตแมปที่มีอยู่ฉันยังมีบันทึกย่อบางส่วนที่อาจช่วยให้คุณสร้างเวกเตอร์ SVG จากบิตแมปที่มีอยู่ วิธีนี้ใช้ไม่ได้กับบิตแมปทั้งหมด แต่อาจใช้ได้กับคุณ


ฉันพัฒนาใน Sencha Touch ดังนั้นจึงมีรหัสเพื่อสร้างไอคอนสำหรับ Sencha ง่ายต่อการลบและปรับให้เข้ากับความต้องการของคุณ ฉันให้ความสำคัญกับการมีส่วนร่วมในการช่วยสร้างหน้าจอเริ่มต้นขึ้น
Tony O'Hagan

ฮ่าฮ่า ... ฉันเพิ่งทำสิ่งนี้ในสคริปต์ zsh อืม
dylnmc

เฟรมเวิร์กที่โดดเด่นยังมีตัวสร้างรูปภาพสำหรับหน้าจอ Splash และไอคอนแอป
Tony O'Hagan

2

ฉันมีปัญหาเดียวกัน แต่เมื่อตระหนักถึงการจัดเรียงไอคอนกราฟิกของฉันภายในสแควร์ที่อนุญาต (512 x 512 ในกรณีของฉัน) ไม่ได้ขยายใหญ่สุด ดังนั้นฉันจึงหมุนภาพและสามารถปรับขนาดเพื่อเติมมุมให้ดีขึ้น แล้วฉันคลิกขวาบนของresโฟลเดอร์ในโครงการของฉันใน Android สตูดิโอแล้วเลือกNewแล้วImage Assetก็เอาฉันผ่านตัวช่วยสร้างที่ฉันได้ไปเลือกไฟล์ภาพของฉันที่จะใช้งาน จากนั้นถ้าคุณทำเครื่องหมายในช่องที่เขียนว่า "ตัดพื้นที่ว่างรอบข้าง" มันทำให้แน่ใจได้ว่าขอบทั้งหมดที่สามารถแตะที่ด้านข้างของจัตุรัสได้ ขั้นตอนเหล่านี้ทำให้มันใหญ่กว่าของเดิมมาก


1

เปิดภาพและขนาดภาพสแลชสำหรับการส่งแอป Google Play Store

  1. ไอคอนความละเอียดสูง PFB ตารางสำหรับขนาดที่ต้องการ 32- บิต PNG (พร้อมอัลฟ่า), ขนาด: 512px คูณ 512px, ขนาดไฟล์สูงสุด: 1024KB

ต้องการไอคอนเรียกใช้และขนาดภาพสแปลช

  1. โดยรวมต้องมีภาพหน้าจออย่างน้อย 2 ภาพ (ภาพหน้าจอสูงสุด 8 ประเภทต่อประเภท ได้แก่ "โทรศัพท์", "แท็บเล็ตขนาด 7 นิ้ว" และ "แท็บเล็ตขนาด 10 นิ้ว") JPEG หรือ PNG 24 บิต (ไม่มีตัวอักษร) ขนาดสูงสุด: 3840px ขนาดตัวอย่าง: 320 x 480, 480 x 800, 480 x 854,1280 x 720, 1280 x 800 24 บิต PNG หรือ JPEG

0

คุณสามารถสร้างไอคอนได้โดยตรงในสตูดิโอ Android เองขั้นตอนที่คุณต้องทำคือ:

1. คลิกขวาที่ Res-> New-> เนื้อหารูปภาพ

2. เปลี่ยนประเภทเนื้อหาเป็นรูปภาพ

3. โหลดรูปภาพจากดิสก์ภายในเครื่อง

4. คุณมีตัวเลือกในการตัดแต่งเปลี่ยน padding และเพิ่มพื้นหลังเปลี่ยนค่าหากคุณต้องการ

5. คลิกถัดไป -> เสร็จสิ้น

ภาพจะถูกเพิ่มลงใน mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi โดยอัตโนมัติหากคุณเลือกไอคอนตัวเรียกใช้หรือ drawable-mdpi, drawable -hpi, drawable-xpi xxxhdpi หากคุณเลือกการเลือกไอคอนอื่น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.