Saya memiliki PNG layar penuh yang ingin saya tampilkan di splash. Hanya satu kesalahan di sana, dan saya tidak tahu apa ukuran untuk dimasukkan ke dalam setiap folder ditarik ( ldpi, mdpi, hdpi, dan xhdpi). Aplikasi saya seharusnya berjalan baik dan indah di semua ponsel dan tablet. Berapa ukuran (dalam piksel) yang harus saya buat agar splash tampil bagus di semua layar?

Penolakan

Jawaban ini dari 2013 dan sudah usang. Pada Android 3.2 sekarang ada 6 kelompok kepadatan layar. Jawaban ini akan diperbarui segera setelah saya dapat, tetapi tanpa ETA. Lihat dokumentasi resmi untuk semua kepadatan saat ini (walaupun informasi tentang ukuran piksel tertentu selalu sulit ditemukan).

Ini versi tl / dr

• Buat 4 gambar, satu untuk setiap kepadatan layar:

  • xlarge (xhdpi): 640x960
  • besar (hdpi): 480x800
  • sedang (mdpi): 320x480
  • kecil (ldpi): 240x320

• Baca pengantar gambar 9-patch di Panduan Pengembang Android

• Desain gambar yang memiliki area yang dapat diregangkan dengan aman tanpa mengorbankan hasil akhirnya

Dengan ini, Android akan memilih file yang sesuai untuk kepadatan gambar perangkat, maka itu akan meregangkan gambar sesuai dengan standar 9-patch.

akhir tl; dr. Posting penuh di depan

Saya menjawab sehubungan dengan aspek pertanyaan terkait desain. Saya bukan pengembang, jadi saya tidak akan dapat memberikan kode untuk mengimplementasikan banyak solusi yang disediakan. Sayangnya, maksud saya adalah untuk membantu para desainer yang kalah seperti ketika saya membantu mengembangkan Aplikasi Android pertama saya.

Pas semua ukuran

Dengan Android, perusahaan dapat mengembangkan ponsel dan tabel mereka dengan hampir semua ukuran, dengan hampir semua resolusi yang mereka inginkan. Karena itu, tidak ada "ukuran gambar kanan" untuk layar splash, karena tidak ada resolusi layar tetap. Itu menimbulkan masalah bagi orang yang ingin menerapkan splash screen.

Apakah pengguna Anda benar-benar ingin melihat layar splash?

(Di samping catatan, layar splash agak tidak disarankan di antara para pengguna. Dikatakan bahwa pengguna sudah tahu aplikasi apa yang ia ketuk, dan pencitraan merek Anda dengan layar splash tidak diperlukan, karena itu hanya mengganggu pengalaman pengguna dengan "iklan". Namun, ini harus digunakan dalam aplikasi yang memerlukan pemuatan yang cukup saat diinisialisasi (5s +), termasuk game dan semacamnya, sehingga pengguna tidak terjebak bertanya-tanya apakah aplikasi mogok atau tidak)

Kepadatan layar; 4 kelas

Jadi, mengingat begitu banyak resolusi layar yang berbeda di ponsel di pasar, Google menerapkan beberapa alternatif dan solusi bagus yang dapat membantu. Hal pertama yang harus Anda ketahui adalah bahwa Android memisahkan SEMUA layar menjadi 4 kepadatan layar yang berbeda:

1. Kepadatan Rendah (ldpi ~ 120dpi)
2. Kepadatan Menengah (mdpi ~ 160dpi)
3. Kepadatan Tinggi (hdpi ~ 240dpi)
4. Extra-High Density (xhdpi ~ 320dpi) (Nilai-nilai dpi ini adalah perkiraan, karena perangkat yang dibuat khusus akan memiliki nilai dpi yang bervariasi)

Apa yang Anda (jika Anda seorang perancang) perlu tahu dari ini adalah bahwa Android pada dasarnya memilih dari 4 gambar untuk ditampilkan, tergantung pada perangkat. Jadi pada dasarnya Anda harus merancang 4 gambar berbeda (walaupun lebih banyak dapat dikembangkan untuk format yang berbeda seperti layar lebar, mode potret / lansekap, dll).

Dengan itu ketahui hal ini: kecuali Anda mendesain layar untuk setiap resolusi tunggal yang digunakan di Android, gambar Anda akan melebar sesuai ukuran layar. Dan kecuali gambar Anda pada dasarnya adalah gradien atau kabur, Anda akan mendapatkan beberapa distorsi yang tidak diinginkan dengan peregangan. Jadi pada dasarnya Anda memiliki dua opsi: membuat gambar untuk setiap kombinasi ukuran / kepadatan layar, atau membuat empat gambar 9-patch.

Solusi terberat adalah merancang splash screen yang berbeda untuk setiap resolusi tunggal. Anda dapat mulai dengan mengikuti resolusi pada tabel di akhir halaman ini (ada lebih banyak. Contoh: 960 x 720 tidak tercantum di sana). Dan dengan asumsi Anda memiliki beberapa detail kecil dalam gambar, seperti teks kecil, Anda harus merancang lebih dari satu layar untuk setiap resolusi. Misalnya, gambar 480x800 yang ditampilkan di layar sedang mungkin terlihat ok, tetapi pada layar yang lebih kecil (dengan kepadatan lebih tinggi / dpi) logo mungkin menjadi terlalu kecil, atau beberapa teks mungkin menjadi tidak dapat dibaca.

Gambar 9-patch

Solusi lain adalah dengan membuat gambar 9-patch . Ini pada dasarnya adalah 1-pixel-transparan-perbatasan di sekitar gambar Anda, dan dengan menggambar piksel hitam di bagian atas dan kiri dari perbatasan ini Anda dapat menentukan bagian mana dari gambar Anda yang akan diizinkan untuk direntangkan. Saya tidak akan masuk ke rincian tentang bagaimana gambar 9-patch bekerja tetapi, singkatnya, piksel yang sejajar dengan tanda di daerah atas dan kiri adalah piksel yang akan diulang untuk meregangkan gambar.

Beberapa aturan dasar

1. Anda dapat membuat gambar-gambar ini di photoshop (atau perangkat lunak pengeditan gambar yang secara akurat dapat membuat png transparan).
2. Perbatasan 1-piksel harus FULL TRANSPARENT.
3. Batas transparan 1-piksel harus ada di sekeliling gambar Anda, tidak hanya bagian atas dan kiri.
4. Anda hanya dapat menggambar piksel hitam (# 000000) di area ini.
5. Batas atas dan kiri (yang menentukan peregangan gambar) hanya dapat memiliki satu titik (1px x 1px), dua titik (keduanya 1px x 1px) atau SATU garis kontinu (lebar x 1px atau tinggi 1px x).
6. Jika Anda memilih untuk menggunakan 2 titik, gambar akan diperluas secara proporsional (sehingga setiap titik akan bergantian meluas hingga lebar / tinggi akhir tercapai)
7. Perbatasan 1px harus di samping dimensi file basis yang dimaksud. Jadi gambar 100-patch 100x100 harus benar-benar memiliki 102x102 (100x100 + 1px di atas, bawah, kiri dan kanan)
8. Gambar 9-patch harus diakhiri dengan * .9.png

Jadi, Anda dapat menempatkan 1 titik di kedua sisi logo Anda (di batas atas), dan 1 titik di atas dan di bawahnya (di perbatasan kiri), dan baris dan kolom yang ditandai ini akan menjadi satu-satunya piksel yang dapat direntangkan.

Contoh

Berikut gambar 9-patch, 102x102px (ukuran akhir 100x100, untuk keperluan aplikasi):

Berikut adalah zoom 200% dari gambar yang sama:

Perhatikan tanda 1px di atas dan kiri yang mengatakan baris / kolom mana yang akan diperluas.

Beginilah gambar ini akan terlihat di 100x100 di dalam aplikasi:

Dan inilah yang diinginkannya jika diperluas ke 460x140:

Satu hal terakhir yang perlu dipertimbangkan. Gambar-gambar ini mungkin terlihat bagus di layar monitor dan di sebagian besar ponsel, tetapi jika perangkat memiliki kepadatan gambar yang sangat tinggi (dpi), gambar akan terlihat terlalu kecil. Mungkin masih terbaca, tetapi pada tablet dengan resolusi 1920x1200, gambar akan muncul sebagai kotak yang sangat kecil di tengah. Jadi apa solusinya? Desain 4 gambar peluncur 9-patch yang berbeda, masing-masing untuk set kepadatan yang berbeda. Untuk memastikan tidak akan terjadi penyusutan, Anda harus merancang resolusi umum terendah untuk setiap kategori kepadatan. Penyusutan tidak diinginkan di sini karena 9-patch hanya bertanggung jawab untuk peregangan, jadi dalam proses penyusutan teks kecil dan elemen lain mungkin kehilangan keterbacaan.

Berikut daftar resolusi terkecil dan paling umum untuk setiap kategori kepadatan:

• xlarge (xhdpi): 640x960
• besar (hdpi): 480x800
• sedang (mdpi): 320x480
• kecil (ldpi): 240x320

Jadi desain empat percikan layar dalam resolusi di atas, perluas gambar, letakkan batas transparan 1px di sekitar kanvas, dan tandai baris / kolom mana yang dapat diregangkan. Ingatlah bahwa gambar ini akan digunakan untuk perangkat APA PUN dalam kategori kepadatan, sehingga gambar ldpi Anda (240 x 320) dapat direntangkan menjadi 1024x600 pada tablet ekstra besar dengan kepadatan gambar kecil (~ 120 dpi). Jadi 9-patch adalah solusi terbaik untuk peregangan, asalkan Anda tidak menginginkan foto atau grafik rumit untuk splash screen (ingat batasan ini saat Anda membuat desain).

Sekali lagi, satu-satunya cara agar peregangan ini tidak terjadi adalah merancang satu layar setiap resolusi (atau satu untuk setiap kombinasi resolusi-kerapatan, jika Anda ingin menghindari gambar menjadi terlalu kecil / besar pada perangkat kerapatan tinggi / rendah), atau untuk memberi tahu gambar tidak meregang dan memiliki warna latar belakang muncul di mana peregangan akan terjadi (juga ingat bahwa warna tertentu yang dihasilkan oleh mesin Android mungkin akan terlihat berbeda dari warna spesifik yang sama yang diberikan oleh photoshop, karena profil warna).

Saya harap ini masuk akal. Semoga berhasil!

MODE POTRET

MDPI adalah 320x480 dp = 320x480px (1x)

LDPI adalah 0,75 x MDPI = 240x360px

HDPI adalah 1,5 x MDPI = 480x720px

XHDPI adalah 2 x MDPI = 640x960px

XXHDPI adalah 3 x MDPI = 960x1440px

XXXHDPI adalah 4 x MDPI = 1280x1920px

MODE LANDSCAPE

MDPI adalah 480x320 dp = 480x320px (1x)

LDPI adalah 0,75 x MDPI = 360x240px

HDPI adalah 1,5 x MDPI = 720x480px

XHDPI adalah 2 x MDPI = 960x640px

XXHDPI adalah 3 x MDPI = 1440x960px

XXXHDPI adalah 4 x MDPI = 1920x1280px

EDIT:

Saya akan menyarankan untuk menggunakan Lottie untuk layar splash jika Anda membaca ini di 2019+

POTRET

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PEMANDANGAN

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Saya telah mencari jawaban terbaik dan paling sederhana untuk membuat gambar 9-patch. Sekarang membuat 9 patch image adalah tugas termudah.

Dari https://romannurik.github.io/AndroidAssetStudio/index.html Anda dapat membuat gambar 9-patch untuk semua resolusi - XHDPI, HDPI, MDPI, LDPI hanya dalam satu klik.

Menggunakan PNG bukanlah ide yang bagus. Sebenarnya itu mahal sejauh menyangkut kinerja. Anda dapat menggunakan file XML yang dapat digambar, misalnya, latar belakang Facebook .

Ini akan membantu Anda untuk memperlancar dan mempercepat kinerja Anda, dan untuk penggunaan logo .9 patch gambar.

Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi

Beberapa waktu lalu saya membuat file excel dengan dimensi yang didukung.
Semoga ini bisa membantu seseorang

Sejujurnya saya kehilangan ide, tetapi merujuk fitur layar lain sebagai ukuran (tidak hanya kepadatan)
https://developer.android.com/guide/practices/screens_support.html
Tolong beri tahu saya jika ada beberapa kesalahan

Link1: dimensional.xlsx

Link2: dimensional.xlsx

Dalam kasus saya, saya menggunakan daftar drawable di style.xml. Dengan daftar lapisan yang dapat digambar, Anda hanya perlu satu png untuk semua ukuran layar.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

dan flash_screen.xml dalam folder yang dapat digambar.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

"background_noizi" adalah file png di folder yang dapat digambar. Saya harap ini membantu.

** Jika Anda mencari detail layar untuk semua jenis perangkat utama **

pergi ke material.io

Solusi yang diedit yang akan membuat SplashScreen Anda tampak hebat di semua API termasuk API21 ke API23

Jika Anda hanya menargetkan APIs24 +, Anda dapat memperkecil vektor yang dapat digambar langsung dalam file xml-nya seperti:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

dalam kode di atas saya mengubah skala gambar saya menggambar di atas kanvas 640x640 menjadi 240x240. maka saya hanya meletakkannya di layar splash saya dapat ditarik seperti itu dan itu bekerja dengan baik:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

kode saya sebenarnya hanya menggambar segitiga di gambar di bagian bawah tetapi di sini Anda melihat apa yang dapat Anda capai dengan ini. Resolusi akhirnya bagus dibandingkan dengan tepi pixelated yang saya dapatkan ketika menggunakan bitmap. jadi gunakan vektor yang dapat digambar dengan segala cara (ada situs bernama vectr yang saya gunakan untuk membuat tambang tanpa harus mengunduh perangkat lunak khusus).

EDIT untuk membuatnya berfungsi juga di API21-22-23

Sementara solusi di atas bekerja untuk perangkat yang menjalankan API24 + saya sangat kecewa setelah menginstal aplikasi saya, perangkat yang menjalankan API22. Saya perhatikan bahwa splashscreen lagi mencoba untuk mengisi seluruh tampilan dan terlihat seperti sampah. Setelah mencabut alis saya selama setengah hari akhirnya saya dengan kasar memaksakan solusi dengan kemauan keras.

Anda perlu membuat file kedua bernama persis seperti xml splashscreen (katakanlah splash_screen.xml) dan menempatkannya ke dalam 2 folder yang disebut drawable-v22 dan drawable-v21 yang akan Anda buat di res / folder (untuk melihat mereka Anda harus mengubah tampilan proyek Anda dari Android ke Project). Ini berfungsi untuk memberi tahu ponsel Anda untuk mengarahkan ulang ke file yang ditempatkan di folder tersebut setiap kali perangkat yang relevan menjalankan API yang sesuai dengan akhiran -vXX di folder yang dapat digambar, lihat tautan ini . letakkan kode berikut di daftar layer file splash_screen.xml yang Anda buat di folder ini:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

Untuk beberapa alasan untuk API ini, Anda harus membungkus drawable Anda dalam bitmap untuk membuatnya bekerja dan jet hasil akhirnya terlihat sama. Masalahnya adalah Anda harus menggunakan pendekatan dengan folder yang dapat ditarik tambahan karena versi kedua file splash_screen.xml akan menyebabkan layar splash Anda tidak ditampilkan sama sekali pada perangkat yang menjalankan API lebih tinggi dari 23. Anda mungkin juga harus menempatkan versi pertama dari splash_screen.xml ke drawable-v24 sebagai default Android ke folder drawable-vXX terdekat yang dapat ditemukan untuk sumber daya. semoga ini membantu

Didasarkan atas jawaban dari Lucas Cerro ini saya menghitung dimensi menggunakan rasio dalam dokumen Android , menggunakan garis dasar dalam jawaban. Saya harap ini membantu orang lain datang ke pos ini!

• xxxlarge (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• xlarge (xhdpi): 640x960 (2.0x)
• besar (hdpi): 480x800 (1,5x)
• sedang (mdpi): 320x480 (garis dasar 1.0x)
• kecil (ldpi): 240x320 (0,75x)