Ik heb een PNG op volledig scherm die ik in splash wil weergeven. Slechts één fout daar, en ik heb geen idee
welke grootte je in elke tekenbare map moet plaatsen (ldpi, mdpi, hdpien xhdpi). Mijn applicatie zou goed en mooi moeten werken op alle telefoons en tablets. Welke formaten (in pixels) moet ik maken zodat de splash goed wordt weergegeven op alle schermen?

Antwoord 1, autoriteit 100%

Disclaimer

Dit antwoord stamt uit 2013 en is ernstig achterhaald. Vanaf Android 3.2 zijn er nu 6 groepen schermdichtheid. Dit antwoord wordt zo snel mogelijk bijgewerkt, maar zonder ETA. Raadpleeg de officiële documentatievoor alle dichtheden op dit moment (hoewel informatie over specifieke pixelgrootte is zoals altijd moeilijk te vinden).

Hier is de tl/dr-versie

• Maak 4 afbeeldingen, één voor elke schermdichtheid:

  • xgroot (xhdpi): 640×960
  • groot (hdpi): 480×800
  • gemiddeld (mdpi): 320×480
  • klein (ldpi): 240×320

• Lees 9-patch afbeeldingsintroductiein Android Developer Gids

• Ontwerp afbeeldingen met gebieden die veilig kunnen worden uitgerekt zonder het eindresultaat in gevaar te brengen

Hiermee selecteert Android het juiste bestand voor de afbeeldingsdichtheid van het apparaat, waarna het de afbeelding uitrekt volgens de 9-patch-standaard.

einde van tl;dr. Volledige post vooruit

Ik geef antwoord met betrekking tot het ontwerpgerelateerde aspect van de vraag. Ik ben geen ontwikkelaar, dus ik kan geen code leveren voor het implementeren van veel van de geboden oplossingen. Helaas, het is mijn bedoeling om ontwerpers te helpen die net zo verloren zijn als ik was toen ik hielp bij het ontwikkelen van mijn eerste Android-app.

Alle maten passen

Met Android kunnen bedrijven hun mobiele telefoons en tablets van bijna elk formaat ontwikkelen, met bijna elke resolutie die ze willen. Daarom is er geen “juiste afbeeldingsgrootte” voor een opstartscherm, aangezien er geen vaste schermresoluties zijn. Dat vormt een probleem voor mensen die een opstartscherm willen implementeren.

Willen uw gebruikers echt een welkomstscherm zien?

(Terzijds worden splash-schermen enigszins afgeraden onder de gebruikers van bruikbaarheid. Er wordt beweerd dat de gebruiker al weet op welke app hij heeft getikt, en het is niet nodig om uw afbeelding te markeren met een opstartscherm, omdat het alleen de gebruikerservaring met een “advertentie”. Het moet echter worden gebruikt in applicaties die behoorlijk wat laadtijd vereisen bij het initialiseren (5s+), inclusief games en dergelijke, zodat de gebruiker zich niet afvraagt ​​of de app is gecrasht of niet)

Schermdichtheid; 4 lessen

Dus, gezien de vele verschillende schermresoluties in de telefoons die op de markt zijn, heeft Google een aantal alternatieven en handige oplossingen geïmplementeerd die kunnen helpen. Het eerste dat u moet weten, is dat Android ALLEschermen scheidt in 4 verschillende schermdichtheden:

1. Lage dichtheid (ldpi ~ 120dpi)
2. Gemiddelde dichtheid (mdpi ~ 160 dpi)
3. Hoge dichtheid (hdpi ~ 240dpi)
4. Extra hoge dichtheid (xhdpi ~ 320dpi)
   (Deze dpi-waarden zijn benaderingen, aangezien op maat gemaakte apparaten verschillende dpi-waarden zullen hebben)

Wat u (als u een ontwerper bent) hiervan moet weten, is dat Android in principe kiest uit 4 afbeeldingen om weer te geven, afhankelijk van het apparaat. Je moet dus in principe 4 verschillende afbeeldingen ontwerpen (hoewel er meer kunnen worden ontwikkeld voor verschillende formaten zoals breedbeeld, portret-/landschapsmodus, enz.).

Met dat in gedachten weet u dit: tenzij u een scherm ontwerpt voor elke afzonderlijke resolutie die in Android wordt gebruikt, wordt uw afbeelding uitgerekt om op de schermgrootte te passen. En tenzij je afbeelding in feite een verloop of vervaging is, krijg je wat ongewenste vervorming bij het uitrekken. Je hebt dus eigenlijk twee opties: maak een afbeelding voor elke combinatie van schermgrootte/dichtheid, of maak vier afbeeldingen met 9 vlakken.

De moeilijkste oplossing is om een ​​ander spatscherm voor elke afzonderlijke resolutie te ontwerpen. U kunt beginnen met het volgen van de resoluties in de tabel aan het einde van deze pagina (er zijn meer. Voorbeeld: 960 x 720 is daar niet vermeld). En ervan uitgaande dat u een klein detail in de afbeelding hebt, zoals kleine tekst, moet u meer dan één scherm voor elke resolutie ontwerpen. Een afbeelding van een 480×800 in een middelgroot scherm kan bijvoorbeeld OK zien, maar op een kleiner scherm (met hogere dichtheid / dpi) kan het logo te klein worden, of kan de tekst onleesbaar worden.

9-patch afbeelding

De andere oplossing is om een 9-patchafbeelding te maken . Het is eigenlijk een 1-pixel-transparant grens rond uw afbeelding, en door zwarte pixels in het boven- en linkeregebied van deze grens te tekenen, kunt u definiëren welke delen van uw afbeelding zullen uitrekken. Ik ga niet in de details van hoe 9-patch afbeeldingen werken, maar kortom de pixels die op de markeringen in het boven- en linker gebied afstemmen, zijn de pixels die zullen worden herhaald om het beeld uit te rekken.

Een paar grondregels

1. U kunt deze afbeeldingen in Photoshop (of een beeldbewerkingssoftware maken die nauwkeurig transparante PNGS kan maken).
2. De 1-pixelrand moet volledig transparant zijn.
3. De transparante grens van 1-pixel moet overal in uw afbeelding staan, niet alleen bovenaan en links.
4. U kunt alleen zwart (# 000000) pixels in dit gebied tekenen.
5. De bovenste en linker grenzen (die het beeld uitstrekken definiëren) kunnen slechts één stip (1px x 1px), twee stippen (zowel 1px x 1 px) of een doorlopende lijn (breedte x 1px of 1px x hoogte).
6. Als u ervoor kiest om 2 stippen te gebruiken, wordt het beeld evenredig geëxpandeerd (zodat elke punt beurten breidt totdat de laatste breedte / hoogte wordt bereikt)
7. De rand van 1 px moet naast de beoogde dimensies van de basisbestand zijn. Dus een 100×100 9-patchafbeelding moet daadwerkelijk 102×102 (100×100 + 1px bovenaan, onderaan, links en rechts) hebben)
8. 9-PATCH-afbeeldingen moeten eindigen met * .9.png

U kunt dus 1 stip aan beide zijden van uw logo (in de bovenrand) en 1 stip boven en eronder (aan de linkerrand) plaatsen, en deze gemarkeerde rijen en kolommen zijn de enige pixels die uitrekken.

Voorbeeld

Hier is een 9-patch-afbeelding, 102x102px (100×100 eindformaat, voor app-doeleinden):

Hier is een 200% zoom van dezelfde afbeelding:

Let op de 1PX-markeringen bovenaan en het achtergelaten en zeggen welke rijen / kolommen zullen uitbreiden.

Hier is wat deze afbeelding eruit zou zien in 100×100 in de app:

en hier is wat het zou willen als uitgebreid naar 460×140:

Een laatste ding om te overwegen. Deze afbeeldingen zien er misschien goed uit op uw monitorscherm en op de meeste mobiele telefoons, maar als het apparaat een zeer hoge beelddichtheid (DPI) heeft, zou het beeld er te klein uitzien. Waarschijnlijk nog steeds leesbaar, maar op een tablet met resolutie van 1920×1200 verschijnt het beeld als een heel klein plein in het midden. Dus wat is de oplossing? Design 4 verschillende 9-patch-launcher-afbeeldingen, elk voor een andere dichtheidset. Om ervoor te zorgen dat er geen krimpen optreden, moet u ontwerpen in de laagste gemeenschappelijke resolutie voor elke categorie Dichtheid. Krimpen is hier ongewenst omdat 9-patch alleen betrekking heeft op stretching, dus in een krimpende proces kunnen kleine tekst en andere elementen leesbaarheid verliezen.

Hier is een lijst met de kleinste, meest voorkomende resoluties voor elke categorie Dichtheid:

• XLARGE (XHDPI): 640X960
• GROOT (HDPI): 480X800
• Medium (MDPI): 320×480
• klein (LDPI): 240×320

Ontwerp dus vier welkomstschermen in de bovenstaande resoluties, breid de afbeeldingen uit, plaats een transparante rand van 1px rond het canvas en markeer welke rijen/kolommen rekbaar zijn. Houd er rekening mee dat deze afbeeldingen worden gebruikt voor ELKEapparaat in de dichtheidscategorie, dus uw ldpi-afbeelding (240 x 320) kan worden uitgerekt tot 1024 x 600 op een extra grote tablet met een kleine afbeeldingsdichtheid (~ 120 dpi ). Dus 9-patch is de beste oplossing voor het uitrekken, zolang u geen foto of ingewikkelde afbeeldingen voor een opstartscherm wilt (houd rekening met deze beperkingen bij het maken van het ontwerp).

Nogmaals, de enige manier om dit uitrekken niet te laten gebeuren, is door één scherm voor elke resolutie te ontwerpen (of één voor elke combinatie van resolutie en dichtheid, als u wilt voorkomen dat afbeeldingen te klein/groot worden op apparaten met hoge/lage dichtheid), of om de afbeelding te vertellen dat deze niet moet worden uitgerekt en dat er een achtergrondkleur moet verschijnen waar uitrekken zou plaatsvinden (onthoud ook dat een specifieke kleur die wordt weergegeven door de Android-engine er waarschijnlijk anders uitziet dan dezelfde specifieke kleur die wordt weergegeven door photoshop, vanwege kleurprofielen).

Ik hoop dat dit enige zin heeft gehad. Veel succes!

Antwoord 2, autoriteit 31%

PORTRETMODUS

MDPI is 320×480 dp = 320x480px (1x)

LDPI is 0,75 x MDPI = 240x360px

HDPI is 1,5 x MDPI = 480x720px

XHDPI is 2 x MDPI = 640x960px

XXHDPI is 3 x MDPI = 960x1440px

XXXHDPI is 4 x MDPI = 1280x1920px

LANDSCHAP MODUS

MDPI is 480×320 dp = 480x320px (1x)

LDPI is 0,75 x MDPI = 360x240px

HDPI is 1,5 x MDPI = 720x480px

XHDPI is 2 x MDPI = 960x640px

XXHDPI is 3 x MDPI = 1440x960px

XXXHDPI is 4 x MDPI = 1920x1280px

BEWERKEN:

Ik raad aan om Lottiete gebruiken voor het opstartscherm als je dit in 2019+

Antwoord 3, autoriteit 7%

PORTRET

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

LANDSCHAP

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Antwoord 4, autoriteit 4%

Ik heb gezocht naar het beste en eenvoudigste antwoord om een ​​afbeelding met 9 vlakken te maken. Nu is het maken van de afbeelding met 9 vlakken de gemakkelijkste taak.

Van https://romannurik.github.io/AndroidAssetStudio/index .htmlu kunt met slechts één klik een afbeelding met 9 vlakken maken voor alle resoluties – XHDPI,HDPI,MDPI,LDPI.

Antwoord 5, autoriteit 3%

PNG gebruiken is niet zo’n goed idee. Eigenlijk is het duur wat de prestaties betreft.
U kunt tekenbare XML-bestanden gebruiken, bijvoorbeeld Facebook-achtergrond.

Dit zal je helpen om je prestaties vloeiender en sneller te maken, en voor het logo gebruik je .9 patch-afbeeldingen.

Antwoord 6, autoriteit 2%

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

Antwoord 7

In mijn geval gebruikte ik list drawable in style.xml. Met een tekenbare laaglijst, hebt u slechts één png nodig voor alle schermformaten.

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

en flash_screen.xml in een tekenbare map.

<?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” is een png-bestand in de tekenbare map.
Ik hoop dat dit helpt.

Antwoord 8

Enige tijd geleden heb ik een Excel-bestand gemaakt met ondersteunde afmetingen

Ik hoop dat dit iemand kan helpen

Om eerlijk te zijn verloor ik het idee, maar het verwijst naar een andere schermfunctie als grootte (niet alleen dichtheid)

https://developer.android.com/guide/practices/screens_support.html
Laat het me weten als er fouten zijn

Link1: Dimensions.xlsx

Link2: Dimensions.xlsx

Antwoord 9

Bewerkte oplossing waardoor uw SplashScreen er geweldig uitziet op alle API’s, inclusief API21 tot API23

Als u zich alleen op APIs24+ richt, kunt u uw vector-tekenbare eenvoudig rechtstreeks in het xml-bestand verkleinen, zoals:

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

in de bovenstaande code herschaal ik een tekenbare die ik op een canvas van 640 x 640 heb getekend om 240 x 240 te zijn. dan plaats ik het gewoon in mijn opstartscherm dat zo kan worden getekend en het werkt geweldig:

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

mijn code tekent eigenlijk alleen de driehoek in de afbeelding onderaan, maar hier zie je wat je hiermee kunt bereiken. De resolutie is eindelijk geweldig in tegenstelling tot de gepixelde randen die ik kreeg bij het gebruik van bitmap. dus gebruik in ieder geval een vector die kan worden getekend (er is een site genaamd vectr die ik heb gebruikt om de mijne te maken zonder het gedoe van het downloaden van gespecialiseerde software).

BEWERKEN om het ook op API21-22-23 te laten werken

Hoewel de bovenstaande oplossing werkt voor apparaten met API24+, was ik erg teleurgesteld nadat ik mijn app had geïnstalleerd op een apparaat met API22. Ik merkte dat het splashscreen opnieuw het hele beeld probeerde te vullen en er als stront uitzag. Nadat ik een halve dag mijn wenkbrauwen had uitgetrokken, heb ik eindelijk met pure wilskracht een oplossing bruut geforceerd.

je moet een tweede bestand maken met de naam precies zoals de splashscreen xml (laten we zeggen splash_screen.xml) en dit in 2 mappen plaatsen met de namen drawable-v22 en drawable-v21 die je in de res/ map maakt (om als je ze wilt zien, moet je je projectweergave wijzigen van Android naar Project). Dit dient om uw telefoon te vertellen om door te verwijzen naar bestanden die in die mappen zijn geplaatst wanneer het relevante apparaat een API uitvoert die overeenkomt met het -vXX-achtervoegsel in de tekenbare map, zie deze link. plaats de volgende code in de Layer-lijst van het splash_screen.xml-bestand dat u in deze mappen maakt:

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

Om de een of andere reden moet je voor deze API’s je tekenbare bestand in een bitmap inpakken om het te laten werken en het uiteindelijke resultaat er hetzelfde uit te laten zien. Het probleem is dat u de aanpak met de extra tekenbare mappen moet gebruiken, aangezien de tweede versie van het splash_screen.xml-bestand ertoe zal leiden dat uw opstartscherm helemaal niet wordt weergegeven op apparaten met API’s hoger dan 23. Mogelijk moet u ook plaatsen de eerste versie van de splash_screen.xml in drawable-v24, aangezien Android standaard de dichtstbijzijnde drawable-vXX-map is die het kan vinden voor bronnen. hoop dat dit helpt

Antwoord 10

** Als u op zoek bent naar schermdetails voor alle soorten grote apparaten **

ga naar material.io

Antwoord 11

Op basis van dit antwoord van Lucas Cerroheb ik de afmetingen berekend met behulp van de verhoudingen in de Android-documenten, waarbij de basislijn in het antwoord wordt gebruikt. Ik hoop dat dit iemand anders helpt die naar dit bericht komt!

• xxxgroot (xxxhdpi): 1280×1920 (4.0x)
• xxgroot (xxhdpi): 960×1440 (3,0x)
• xgroot (xhdpi): 640×960 (2,0x)
• groot (hdpi): 480×800 (1,5x)
• gemiddeld (mdpi): 320×480 (1,0x basislijn)
• klein (ldpi): 240×320 (0,75x)