Ich habe ein Vollbild-PNG, das ich beim Splash anzeigen möchte. Nur ein Fehler da, und ich habe keine Ahnung , welche Größe in jedem ziehbar Ordner abzulegen ( ldpi, mdpi, hdpiund xhdpi). Meine Anwendung soll auf allen Handys und Tablets gut und schön laufen. Welche Größen (in Pixel) sollte ich erstellen, damit der Splash auf allen Bildschirmen gut angezeigt wird?

Haftungsausschluss

Diese Antwort stammt aus dem Jahr 2013 und ist stark veraltet. Ab Android 3.2 gibt es jetzt 6 Gruppen mit Bildschirmdichte. Diese Antwort wird aktualisiert, sobald ich dazu in der Lage bin, jedoch ohne ETA. Informationen zu allen Dichten finden Sie derzeit in der offiziellen Dokumentation (Informationen zu bestimmten Pixelgrößen sind jedoch wie immer schwer zu finden).

Hier ist die tl / dr-Version

• Erstellen Sie 4 Bilder, eines für jede Bildschirmdichte:

  • xlarge (xhdpi): 640 x 960
  • groß (hdpi): 480 x 800
  • mittel (mdpi): 320 x 480
  • klein (ldpi): 240 x 320

• Lesen Sie die Einführung zu 9-Patch-Bildern im Android Developer Guide

• Entwerfen Sie Bilder mit Bereichen, die sicher gedehnt werden können, ohne das Endergebnis zu beeinträchtigen

Damit wählt Android die entsprechende Datei für die Bilddichte des Geräts aus und streckt das Bild gemäß dem 9-Patch-Standard.

Ende von tl; dr. Voller Beitrag voraus

Ich antworte in Bezug auf den designbezogenen Aspekt der Frage. Ich bin kein Entwickler, daher kann ich keinen Code für die Implementierung vieler der bereitgestellten Lösungen bereitstellen. Leider möchte ich Designern helfen, die genauso verloren sind wie ich, als ich bei der Entwicklung meiner ersten Android-App mitgeholfen habe.

Passend für alle Größen

Mit Android können Unternehmen ihre Mobiltelefone und Tische in nahezu jeder Größe und mit nahezu jeder gewünschten Auflösung entwickeln. Aus diesem Grund gibt es keine "richtige Bildgröße" für einen Begrüßungsbildschirm, da es keine festen Bildschirmauflösungen gibt. Dies ist ein Problem für Personen, die einen Begrüßungsbildschirm implementieren möchten.

Möchten Ihre Benutzer wirklich einen Begrüßungsbildschirm sehen?

(Nebenbei bemerkt, Begrüßungsbildschirme werden von den Usability-Leuten etwas entmutigt. Es wird argumentiert, dass der Benutzer bereits weiß, auf welche App er getippt hat, und dass das Branding Ihres Bildes mit einem Begrüßungsbildschirm nicht erforderlich ist, da dies nur die Benutzererfahrung unterbricht eine "Anzeige". Sie sollte jedoch in Anwendungen verwendet werden, die beim Initialisieren (5s +) ein beträchtliches Laden erfordern, einschließlich Spielen und dergleichen, damit der Benutzer sich nicht fragt, ob die App abgestürzt ist oder nicht.

Bildschirmdichte; 4 Klassen

Angesichts der vielen verschiedenen Bildschirmauflösungen auf den Handys auf dem Markt hat Google einige Alternativen und raffinierte Lösungen implementiert, die helfen können. Das erste, was Sie wissen müssen, ist, dass Android ALLE Bildschirme in 4 verschiedene Bildschirmdichten unterteilt:

1. Niedrige Dichte (ldpi ~ 120 dpi)
2. Mittlere Dichte (mdpi ~ 160 dpi)
3. Hohe Dichte (hdpi ~ 240 dpi)
4. Extra hohe Dichte (xhdpi ~ 320dpi) (Diese dpi-Werte sind Näherungswerte, da kundenspezifische Geräte unterschiedliche dpi-Werte aufweisen.)

Was Sie (wenn Sie Designer sind) wissen müssen, ist, dass Android je nach Gerät grundsätzlich aus 4 Bildern zur Anzeige auswählt. Sie müssen also grundsätzlich 4 verschiedene Bilder entwerfen (obwohl mehr für verschiedene Formate wie Breitbild, Hoch- / Querformat usw. entwickelt werden können).

Beachten Sie Folgendes: Wenn Sie nicht für jede einzelne Auflösung, die in Android verwendet wird, einen Bildschirm entwerfen, wird Ihr Bild an die Bildschirmgröße angepasst. Und wenn Ihr Bild im Grunde kein Farbverlauf oder eine Unschärfe ist, kommt es beim Strecken zu unerwünschten Verzerrungen. Sie haben also grundsätzlich zwei Möglichkeiten: Erstellen Sie ein Bild für jede Kombination aus Bildschirmgröße und Dichte oder erstellen Sie vier 9-Patch-Bilder.

Die schwierigste Lösung besteht darin, für jede einzelne Auflösung einen anderen Begrüßungsbildschirm zu entwerfen. Sie können beginnen, indem Sie den Auflösungen in der Tabelle am Ende dieser Seite folgen (es gibt weitere. Beispiel: 960 x 720 ist dort nicht aufgeführt). Angenommen, das Bild enthält einige kleine Details, z. B. kleinen Text, müssen Sie für jede Auflösung mehr als einen Bildschirm entwerfen. Beispielsweise kann ein 480 x 800-Bild, das auf einem mittleren Bildschirm angezeigt wird, in Ordnung aussehen, aber auf einem kleineren Bildschirm (mit höherer Dichte / dpi) wird das Logo möglicherweise zu klein oder Text wird möglicherweise nicht mehr lesbar.

9-Patch-Bild

Die andere Lösung besteht darin , ein 9-Patch-Image zu erstellen . Es handelt sich im Grunde genommen um einen 1-Pixel-transparenten Rand um Ihr Bild. Durch Zeichnen schwarzer Pixel im oberen und linken Bereich dieses Rahmens können Sie festlegen, welche Teile Ihres Bildes gedehnt werden dürfen. Ich werde nicht näher auf die Funktionsweise von 9-Patch-Bildern eingehen, aber kurz gesagt, die Pixel, die an den Markierungen im oberen und linken Bereich ausgerichtet sind, sind die Pixel, die wiederholt werden, um das Bild zu dehnen.

Ein paar Grundregeln

1. Sie können diese Bilder in Photoshop (oder einer beliebigen Bildbearbeitungssoftware, mit der transparente PNGs genau erstellt werden können) erstellen.
2. Der 1-Pixel-Rand muss VOLLSTÄNDIG TRANSPARENT sein.
3. Der transparente 1-Pixel-Rand muss sich um Ihr Bild herum befinden, nicht nur oben und links.
4. In diesem Bereich können Sie nur schwarze (# 000000) Pixel zeichnen.
5. Der obere und linke Rand (die die Bilddehnung definieren) können nur einen Punkt (1 x 1 Pixel), zwei Punkte (beide 1 x 1 Pixel) oder EINE durchgehende Linie (Breite x 1 Pixel oder 1 Pixel x Höhe) enthalten.
6. Wenn Sie 2 Punkte verwenden, wird das Bild proportional vergrößert (sodass jeder Punkt abwechselnd vergrößert wird, bis die endgültige Breite / Höhe erreicht ist).
7. Der 1px-Rand muss zusätzlich zu den beabsichtigten Abmessungen der Basisdatei sein. Ein 100x100 9-Patch-Bild muss also tatsächlich 102x102 haben (100x100 + 1px oben, unten, links und rechts)
8. 9-Patch-Bilder müssen mit * .9.png enden

Sie können also 1 Punkt auf jeder Seite Ihres Logos (am oberen Rand) und 1 Punkt darüber und darunter (am linken Rand) platzieren. Diese markierten Zeilen und Spalten sind die einzigen Pixel, die gedehnt werden müssen.

Beispiel

Hier ist ein 9-Patch-Bild mit 102 x 102 Pixel (100 x 100 Endgröße für App-Zwecke):

Hier ist ein 200% -Zoom des gleichen Bildes:

Beachten Sie die 1px-Markierungen oben und links, die angeben, welche Zeilen / Spalten erweitert werden.

So würde dieses Bild in 100x100 in der App aussehen:

Und hier ist, was es möchte, wenn es auf 460x140 erweitert wird:

Eine letzte Sache zu beachten. Diese Bilder sehen auf Ihrem Bildschirm und auf den meisten Mobiltelefonen möglicherweise gut aus. Wenn das Gerät jedoch eine sehr hohe Bilddichte (dpi) aufweist, sieht das Bild zu klein aus. Wahrscheinlich noch lesbar, aber auf einem Tablet mit einer Auflösung von 1920 x 1200 erscheint das Bild als sehr kleines Quadrat in der Mitte. Was ist die Lösung? Entwerfen Sie 4 verschiedene 9-Patch-Launcher-Bilder für jeweils unterschiedliche Dichte. Um sicherzustellen, dass kein Schrumpfen auftritt, sollten Sie für jede Dichtekategorie die niedrigste gemeinsame Auflösung verwenden. Das Verkleinern ist hier unerwünscht, da 9-Patch nur das Dehnen berücksichtigt, sodass bei einem Verkleinerungsprozess kleiner Text und andere Elemente die Lesbarkeit verlieren können.

Hier ist eine Liste der kleinsten und häufigsten Auflösungen für jede Dichtekategorie:

• xlarge (xhdpi): 640 x 960
• groß (hdpi): 480 x 800
• mittel (mdpi): 320 x 480
• klein (ldpi): 240 x 320

Entwerfen Sie also vier Begrüßungsbildschirme in den obigen Auflösungen, erweitern Sie die Bilder, legen Sie einen transparenten Rand von 1 Pixel um die Leinwand und markieren Sie, welche Zeilen / Spalten dehnbar sind. Beachten Sie, dass diese Bilder für JEDES Gerät in der Dichtekategorie verwendet werden, sodass Ihr ldpi-Bild (240 x 320) auf einem besonders großen Tablet mit geringer Bilddichte (~ 120 dpi) möglicherweise auf 1024 x 600 gedehnt wird. 9-Patch ist daher die beste Lösung für das Dehnen, solange Sie kein Foto oder komplizierte Grafiken für einen Begrüßungsbildschirm benötigen (beachten Sie diese Einschränkungen beim Erstellen des Designs).

Die einzige Möglichkeit, dass diese Dehnung nicht auftritt, besteht darin, einen Bildschirm pro Auflösung zu entwerfen (oder einen für jede Kombination aus Auflösung und Dichte, wenn Sie vermeiden möchten, dass Bilder auf Geräten mit hoher / niedriger Dichte zu klein / groß werden) oder zu erkennen Das Bild darf nicht gedehnt werden und es wird überall dort eine Hintergrundfarbe angezeigt (denken Sie auch daran, dass eine bestimmte Farbe, die von der Android-Engine gerendert wird, aufgrund von Farbprofilen wahrscheinlich anders aussieht als dieselbe bestimmte Farbe, die von Photoshop gerendert wird).

Ich hoffe das hat Sinn gemacht. Viel Glück!

PORTRAITMODUS

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

Der LDPI beträgt 0,75 x MDPI = 240 x 360 Pixel

HDPI ist 1,5 x MDPI = 480 x 720 Pixel

XHDPI ist 2 x MDPI = 640 x 960 Pixel

XXHDPI ist 3 x MDPI = 960 x 1440 Pixel

XXXHDPI ist 4 x MDPI = 1280 x 1920 Pixel

LANDSCHAFTSMODUS

MDPI ist 480 x 320 dp = 480 x 320 Pixel (1x)

Der LDPI beträgt 0,75 x MDPI = 360 x 240 Pixel

HDPI ist 1,5 x MDPI = 720 x 480 Pixel

XHDPI ist 2 x MDPI = 960 x 640 Pixel

XXHDPI ist 3 x MDPI = 1440 x 960 Pixel

XXXHDPI ist 4 x MDPI = 1920 x 1280 Pixel

BEARBEITEN:

Ich würde vorschlagen, Lottie als Begrüßungsbildschirm zu verwenden, wenn Sie dies ab 2019 lesen

PORTRÄT

LDPI: 200 x 320 Pixel

MDPI: 320 x 480 Pixel

HDPI: 480 x 800 Pixel

XHDPI: 720px1280px

LANDSCHAFT

LDPI: 320 x 200 Pixel

MDPI: 480 x 320 Pixel

HDPI: 800 x 480 Pixel

XHDPI: 1280 x 720 Pixel

Ich habe nach der besten und einfachsten Antwort gesucht, um ein 9-Patch-Bild zu erstellen. Jetzt ist es am einfachsten, das 9-Patch-Image zu erstellen.

Unter https://romannurik.github.io/AndroidAssetStudio/index.html können Sie mit nur einem Klick ein 9-Patch-Image für alle Auflösungen erstellen - XHDPI, HDPI, MDPI, LDPI.

Die Verwendung von PNG ist keine so gute Idee. Eigentlich ist es teuer, was die Leistung betrifft. Sie können zeichnbare XML-Dateien verwenden, z. B. den Hintergrund von Facebook .

Dies hilft Ihnen dabei, Ihre Leistung zu glätten und zu beschleunigen und für das Logo .9 Patch-Bilder zu verwenden.

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

Vor einiger Zeit habe ich eine Excel-Datei mit unterstützten Dimensionen erstellt. Ich
hoffe, dies ist für jemanden hilfreich

Um ehrlich zu sein, habe ich die Idee verloren, aber sie bezeichnet eine andere Bildschirmfunktion als Größe (nicht nur Dichte).
https://developer.android.com/guide/practices/screens_support.html
Bitte informieren Sie mich, wenn Fehler vorliegen

Link1: dimensions.xlsx

Link2: dimensions.xlsx

In meinem Fall habe ich eine Liste verwendet, die in style.xml gezeichnet werden kann. Mit der zeichnbaren Ebenenliste haben Sie nur ein PNG für alle Bildschirmgrößen benötigt.

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

und flash_screen.xml im Zeichenordner.

<?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" ist eine PNG-Datei im Zeichenordner. Ich hoffe das hilft.

** Wenn Sie nach Bildschirmdetails für alle wichtigen Geräte suchen **

gehe zu material.io

Überarbeitete Lösung, mit der Ihr SplashScreen auf allen APIs, einschließlich API21 bis API23, gut aussieht

Wenn Sie nur auf APIs24 + abzielen, können Sie Ihren Vektor, der direkt in seiner XML-Datei gezeichnet werden kann, einfach wie folgt verkleinern:

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

Im obigen Code skaliere ich eine Zeichenfläche, die ich auf eine Leinwand mit einer Größe von 640 x 640 gezeichnet habe, auf 240 x 240 neu. dann habe ich es einfach so in meinen Begrüßungsbildschirm gezeichnet und es funktioniert großartig:

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

Mein Code zeichnet eigentlich nur das Dreieck im Bild unten, aber hier sehen Sie, was Sie damit erreichen können. Die Auflösung ist schließlich großartig im Gegensatz zu den pixeligen Kanten, die ich bei der Verwendung von Bitmap erhalten habe. Verwenden Sie also auf jeden Fall einen Vektor, der gezeichnet werden kann (es gibt eine Site namens vectr, mit der ich meine erstellt habe, ohne spezielle Software herunterladen zu müssen).

BEARBEITEN, damit es auch auf API21-22-23 funktioniert

Während die obige Lösung für Geräte mit API24 + funktioniert, war ich nach der Installation meiner App auf einem Gerät mit API22 sehr enttäuscht. Ich bemerkte, dass der Begrüßungsbildschirm erneut versuchte, die gesamte Ansicht auszufüllen und wie Scheiße aussah. Nachdem ich mir einen halben Tag lang die Augenbrauen herausgerissen hatte, erzwang ich schließlich eine Lösung durch bloße Willenskraft.

Sie müssen eine zweite Datei mit dem Namen splashscreen xml (z. B. splash_screen.xml) erstellen und in zwei Ordner mit den Namen drawable-v22 und drawable-v21 legen, die Sie im Ordner res / erstellen (um sie zu sehen) müssen Ihre Projektansicht von Android auf Projekt ändern). Dies dient dazu, Ihr Telefon anzuweisen, zu Dateien umzuleiten, die sich in diesen Ordnern befinden, wenn auf dem entsprechenden Gerät eine API ausgeführt wird, die dem Suffix -vXX im Zeichenordner entspricht ( siehe diesen Link) . Fügen Sie den folgenden Code in die Ebenenliste der Datei splash_screen.xml ein, die Sie in diesen Ordnern erstellen:

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

Aus irgendeinem Grund müssen Sie für diese APIs Ihr Drawable in eine Bitmap einbinden, damit es funktioniert und das Endergebnis gleich aussieht. Das Problem ist, dass Sie den Ansatz mit den zusätzlichen zeichnbaren Ordnern verwenden müssen, da die zweite Version der Datei splash_screen.xml dazu führt, dass Ihr Begrüßungsbildschirm auf Geräten mit APIs über 23 überhaupt nicht angezeigt wird. Möglicherweise müssen Sie auch platzieren Die erste Version der Datei splash_screen.xml in drawable-v24, da Android standardmäßig den nächstgelegenen Ordner drawable-vXX verwendet, den es für Ressourcen finden kann. hoffe das hilft

Basierend auf dieser Antwort von Lucas Cerro berechnete ich die Abmessungen anhand der Verhältnisse in den Android-Dokumenten und anhand der Basislinie in der Antwort. Ich hoffe, das hilft jemand anderem, zu diesem Beitrag zu kommen!

• xxxlarge (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960 x 1440 (3,0 x)
• xlarge (xhdpi): 640 x 960 (2,0 x)
• groß (hdpi): 480 x 800 (1,5 x)
• mittel (mdpi): 320 x 480 (1,0 x Grundlinie)
• klein (ldpi): 240 x 320 (0,75 x)