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?
214
Jawaban:
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:
Baca pengantar gambar 9-patch di Panduan Pengembang Android
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:
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
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:
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!
sumber
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+
sumber
POTRET
LDPI: 200x320px
MDPI: 320x480px
HDPI: 480x800px
XHDPI: 720px1280px
PEMANDANGAN
LDPI: 320x200px
MDPI: 480x320px
HDPI: 800x480px
XHDPI: 1280x720px
sumber
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.
sumber
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.
sumber
sumber
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
sumber
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.
dan flash_screen.xml dalam folder yang dapat digambar.
"background_noizi" adalah file png di folder yang dapat digambar. Saya harap ini membantu.
sumber
** Jika Anda mencari detail layar untuk semua jenis perangkat utama **
pergi ke material.io
sumber
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:
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:
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:
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
sumber
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!
sumber