Ho un PNG a schermo intero che voglio visualizzare su splash. Un solo errore di lì, e non ho idea di quale dimensione di mettere in ogni cartella disegnabile ( ldpi, mdpi, hdpie xhdpi). La mia applicazione dovrebbe funzionare bene e su tutti i telefoni e tablet. Quali dimensioni (in pixel) dovrei creare in modo che la schermata iniziale sia gradevole su tutti gli schermi?

disconoscimento

Questa risposta è del 2013 ed è gravemente obsoleta. A partire da Android 3.2 ora ci sono 6 gruppi di densità dello schermo. Questa risposta sarà aggiornata non appena sarò in grado, ma senza ETA. Fare riferimento alla documentazione ufficiale per tutte le densità al momento (anche se le informazioni su specifiche dimensioni dei pixel sono come sempre difficili da trovare).

Ecco la versione tl / dr

• Crea 4 immagini, una per ogni densità dello schermo:

  • xlarge (xhdpi): 640x960
  • grande (hdpi): 480x800
  • medio (mdpi): 320x480
  • piccolo (ldpi): 240x320

• Leggi l' introduzione dell'immagine a 9 patch nella Guida per gli sviluppatori Android

• Progetta immagini con aree che possono essere estese in modo sicuro senza compromettere il risultato finale

Con questo, Android selezionerà il file appropriato per la densità dell'immagine del dispositivo, quindi allungherà l'immagine secondo lo standard a 9 patch.

fine di tl; dr. Post completo in anticipo

Sto rispondendo in merito all'aspetto del design relativo alla domanda. Non sono uno sviluppatore, quindi non sarò in grado di fornire codice per l'implementazione di molte delle soluzioni fornite. Purtroppo, il mio intento è quello di aiutare i designer che sono persi quanto me quando ho contribuito a sviluppare la mia prima app per Android.

Adatto a tutte le taglie

Con Android, le aziende possono sviluppare telefoni cellulari e tavoli di quasi tutte le dimensioni, con quasi tutte le risoluzioni che desiderano. Per questo motivo, non esiste una "dimensione dell'immagine corretta" per una schermata iniziale, poiché non esistono risoluzioni fisse dello schermo. Ciò rappresenta un problema per le persone che vogliono implementare una schermata iniziale.

I tuoi utenti vogliono davvero vedere una schermata iniziale?

(In una nota a margine, gli splash screen sono in qualche modo scoraggiati tra i tipi di usabilità. Si sostiene che l'utente sappia già quale app ha toccato e non è necessario marcare l'immagine con uno splash screen, poiché interrompe solo l'esperienza utente con un "annuncio". Dovrebbe essere usato, tuttavia, in applicazioni che richiedono un caricamento considerevole quando inizializzato (5s +), inclusi giochi e simili, in modo che l'utente non si blocchi se si chiede se l'app si è bloccata o meno)

Densità dello schermo; 4 lezioni

Quindi, date le diverse risoluzioni dello schermo nei telefoni sul mercato, Google ha implementato alcune alternative e soluzioni ingegnose che possono aiutare. La prima cosa che devi sapere è che Android separa TUTTE le schermate in 4 densità di schermate distinte:

1. Bassa densità (ldpi ~ 120dpi)
2. Densità media (mdpi ~ 160 dpi)
3. Alta densità (hdpi ~ 240 dpi)
4. Densità extra alta (xhdpi ~ 320dpi) (Questi valori dpi sono approssimazioni, poiché i dispositivi personalizzati avranno valori dpi variabili)

Ciò che tu (se sei un designer) devi sapere da questo è che Android sostanzialmente sceglie tra 4 immagini da visualizzare, a seconda del dispositivo. Quindi in pratica devi progettare 4 immagini diverse (anche se è possibile svilupparne altre per formati diversi come widescreen, modalità verticale / orizzontale, ecc.).

Con questo in mente, sappiate questo: a meno che non progettiate uno schermo per ogni singola risoluzione utilizzata in Android, l'immagine si allungherà per adattarsi alle dimensioni dello schermo. E a meno che la tua immagine non sia sostanzialmente una sfumatura o una sfocatura, otterrai una distorsione indesiderata con l'allungamento. Quindi hai sostanzialmente due opzioni: creare un'immagine per ciascuna combinazione dimensione / densità dello schermo o creare quattro immagini a 9 patch.

La soluzione più difficile è progettare una schermata iniziale diversa per ogni singola risoluzione. Puoi iniziare seguendo le risoluzioni nella tabella alla fine di questa pagina (ce ne sono altre. Esempio: 960 x 720 non è elencato lì). E supponendo che tu abbia qualche piccolo dettaglio nell'immagine, come un piccolo testo, devi progettare più di uno schermo per ogni risoluzione. Ad esempio, un'immagine 480x800 visualizzata su uno schermo medio potrebbe apparire ok, ma su uno schermo più piccolo (con densità / dpi più elevati) il logo potrebbe diventare troppo piccolo o parte del testo potrebbe diventare illeggibile.

Immagine a 9 patch

L'altra soluzione è creare un'immagine a 9 patch . È fondamentalmente un bordo trasparente di 1 pixel attorno all'immagine e disegnando pixel neri nella parte superiore e sinistra di questo bordo è possibile definire quali parti dell'immagine potranno essere allungate. Non entrerò nei dettagli di come funzionano le immagini a 9 patch ma, in breve, i pixel che si allineano ai segni nell'area superiore e sinistra sono i pixel che verranno ripetuti per allungare l'immagine.

Alcune regole di base

1. Puoi creare queste immagini in Photoshop (o in qualsiasi software di modifica delle immagini in grado di creare con precisione png trasparenti).
2. Il bordo di 1 pixel deve essere COMPLETO TRASPARENTE.
3. Il bordo trasparente da 1 pixel deve essere tutto intorno all'immagine, non solo in alto e a sinistra.
4. puoi disegnare solo pixel neri (# 000000) in quest'area.
5. I bordi superiore e sinistro (che definiscono lo stiramento dell'immagine) possono avere solo un punto (1px x 1px), due punti (entrambi 1px x 1px) o UNA linea continua (larghezza x 1px o 1px x altezza).
6. Se si sceglie di utilizzare 2 punti, l'immagine verrà espansa in modo proporzionale (quindi ogni punto a turno si espanderà fino a raggiungere la larghezza / altezza finale)
7. Il bordo 1px deve essere in aggiunta alle dimensioni del file di base previste. Quindi un'immagine 100x100 a 9 patch deve avere effettivamente 102x102 (100x100 + 1px in alto, in basso, a sinistra ea destra)
8. Le immagini a 9 patch devono terminare con * .9.png

Quindi puoi posizionare 1 punto su entrambi i lati del logo (nel bordo superiore) e 1 punto sopra e sotto di esso (sul bordo sinistro) e queste righe e colonne contrassegnate saranno gli unici pixel da allungare.

Esempio

Ecco un'immagine a 9 patch, 102x102px (dimensione finale 100x100, ai fini dell'app):

Ecco uno zoom del 200% della stessa immagine:

Notare i segni 1px in alto e a sinistra che indicano quali righe / colonne si espandono.

Ecco come sarebbe questa immagine in 100x100 all'interno dell'app:

Ed ecco cosa vorrebbe se espanso a 460x140:

Un'ultima cosa da considerare. Queste immagini potrebbero avere un bell'aspetto sullo schermo del monitor e sulla maggior parte dei cellulari, ma se il dispositivo ha una densità dell'immagine (dpi) molto elevata, l'immagine sembrerebbe troppo piccola. Probabilmente ancora leggibile, ma su un tablet con risoluzione 1920x1200, l'immagine apparirebbe come un quadrato molto piccolo nel mezzo. Quindi qual è la soluzione? Progetta 4 diverse immagini del launcher a 9 patch, ognuna per un set di densità diverso. Per garantire che non si verifichi alcun restringimento, è necessario progettare la risoluzione comune più bassa per ciascuna categoria di densità. Il restringimento non è auspicabile in questo caso perché le 9 patch rappresentano solo lo stiramento, quindi in un processo di restringimento il testo piccolo e altri elementi potrebbero perdere leggibilità.

Ecco un elenco delle risoluzioni più piccole e più comuni per ogni categoria di densità:

• xlarge (xhdpi): 640x960
• grande (hdpi): 480x800
• medio (mdpi): 320x480
• piccolo (ldpi): 240x320

Quindi, progetta quattro schermate iniziali con le risoluzioni sopra, espandi le immagini, posiziona un bordo trasparente 1px attorno alla tela e segna quali righe / colonne saranno estensibili. Tieni presente che queste immagini verranno utilizzate per QUALSIASI dispositivo nella categoria di densità, quindi l'immagine ldpi (240 x 320) potrebbe essere allungata a 1024x600 su un tablet molto grande con una densità dell'immagine ridotta (~ 120 dpi). Quindi 9-patch è la soluzione migliore per lo stretching, purché non desideri una foto o una grafica complicata per una schermata iniziale (tieni presente questi limiti mentre crei il design).

Ancora una volta, l'unico modo per evitare questo allungamento è progettare uno schermo per ciascuna risoluzione (o uno per ogni combinazione risoluzione-densità, se si desidera evitare che le immagini diventino troppo piccole / grandi su dispositivi ad alta / bassa densità) o per dire l'immagine non si allunga e appare un colore di sfondo ovunque si verifichi lo stiramento (ricorda anche che un colore specifico reso dal motore Android probabilmente avrà un aspetto diverso dallo stesso colore specifico reso da Photoshop, a causa dei profili colore).

Spero che questo abbia senso. In bocca al lupo!

MODALITÀ RITRATTO

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

LDPI è 0,75 x MDPI = 240x360px

HDPI è 1,5 x MDPI = 480x720px

XHDPI è 2 x MDPI = 640x960px

XXHDPI è 3 x MDPI = 960x1440px

XXXHDPI è 4 x MDPI = 1280x1920px

MODALITÀ PANORAMICA

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

LDPI è 0,75 x MDPI = 360x240px

HDPI è 1,5 x MDPI = 720x480px

XHDPI è 2 x MDPI = 960x640px

XXHDPI è 3 x MDPI = 1440x960px

XXXHDPI è 4 x MDPI = 1920x1280px

MODIFICARE:

Suggerirei di usare Lottie per la schermata iniziale se stai leggendo questo nel 2019+

RITRATTO

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAESAGGIO

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Ho cercato la risposta migliore e più semplice per creare un'immagine a 9 patch. Ora rendere l'immagine di 9 patch è il compito più semplice.

Da https://romannurik.github.io/AndroidAssetStudio/index.html puoi creare un'immagine a 9 patch per tutte le risoluzioni: XHDPI, HDPI, MDPI, LDPI con un solo clic.

L'uso di PNG non è una buona idea. In realtà è costoso per quanto riguarda le prestazioni. È possibile utilizzare file XML disegnabili, ad esempio lo sfondo di Facebook .

Questo ti aiuterà a rendere più fluide e veloci le tue prestazioni, e per il logo usa immagini di patch .9.

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

Qualche tempo fa ho creato un file Excel con dimensioni supportate
Spero che questo possa essere utile per qualcuno

Ad essere sincero, ho perso l'idea, ma fa riferimento ad un'altra funzionalità dello schermo come dimensione (non solo densità)
https://developer.android.com/guide/practices/screens_support.html
Ti prego di informarmi se ci sono alcuni errori

Link1: dimensioni.xlsx

Link2: dimensioni.xlsx

Nel mio caso, ho usato l'elenco estraibile in style.xml. Con l'elenco dei livelli disegnabile, hai solo bisogno di un png per tutte le dimensioni dello schermo.

<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>

e flash_screen.xml nella cartella drawable.

<?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" è un file png nella cartella disegnabile. Spero che aiuti.

** Se stai cercando i dettagli dello schermo per tutti i tipi di dispositivi principali **

vai a material.io

Soluzione modificata che renderà il tuo SplashScreen perfetto su tutte le API tra cui API21 e API23

Se scegli come target solo API24 + puoi semplicemente ridimensionare il tuo disegno vettoriale direttamente nel suo file xml in questo modo:

<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>

nel codice sopra sto riscalando un disegno che ho disegnato su una tela 640x640 per essere 240x240. poi l'ho appena inserito nella mia schermata di avvio disegnabile in questo modo e funziona benissimo:

<?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>

il mio codice in realtà sta solo disegnando il triangolo nell'immagine in basso ma qui vedi cosa puoi ottenere con questo. La risoluzione è finalmente eccezionale rispetto ai bordi pixelati che stavo ottenendo usando bitmap. quindi usa un disegno vettoriale con tutti i mezzi (esiste un sito chiamato vectr che ho usato per creare il mio senza il fastidio di scaricare software specializzato).

MODIFICA per farlo funzionare anche su API21-22-23

Mentre la soluzione sopra funziona per i dispositivi che eseguono API24 + sono rimasto davvero deluso dopo aver installato la mia app un dispositivo che esegue API22. Ho notato che lo splashscreen stava di nuovo cercando di riempire l'intera vista e sembrava una merda. Dopo aver strappato le sopracciglia per mezza giornata, ho finalmente forzato brutalmente una soluzione per pura forza di volontà.

devi creare un secondo file chiamato esattamente come lo splashscreen xml (diciamo splash_screen.xml) e posizionarlo in 2 cartelle chiamate drawable-v22 e drawable-v21 che creerai nella cartella res / (per vederle tu devi cambiare la visualizzazione del tuo progetto da Android a Project). Questo serve a dire al tuo telefono di reindirizzare ai file inseriti in quelle cartelle ogni volta che il dispositivo in questione esegue un'API corrispondente al suffisso -vXX nella cartella disegnabile, vedi questo link . inserisci il seguente codice nell'elenco Layer del file splash_screen.xml che crei in queste cartelle:

<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>

Per qualche motivo per queste API devi avvolgere il tuo disegno in una bitmap per farlo funzionare e jet il risultato finale sembra lo stesso. Il problema è che devi usare l'aproach con le cartelle disegnabili adizionali poiché la seconda versione del file splash_screen.xml porterà alla tua schermata iniziale non mostrata affatto su dispositivi che eseguono API superiori a 23. Potrebbe anche essere necessario posizionare la prima versione di splash_screen.xml in drawable-v24 come impostazione predefinita Android alla cartella drawable-vXX più vicina che può trovare per le risorse. spero che questo ti aiuti

Sulla base di questa risposta di Lucas Cerro, ho calcolato le dimensioni utilizzando i rapporti nei documenti Android , utilizzando la linea di base nella risposta. Spero che questo aiuti qualcun altro a venire a questo post!

• xxxlarge (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• xlarge (xhdpi): 640x960 (2.0x)
• grande (hdpi): 480x800 (1.5x)
• medio (mdpi): 320x480 (linea di base 1,0x)
• piccolo (ldpi): 240x320 (0,75x)