android splash screen sizes for ldpi,mdpi, hdpi, xhdpi displays ? - eg : 1024X768 pixels for ldpi

android splash-screen pixel-density

I have to design splash screens(images that fit screen while loading) for android application using phonegap. I have to design 4 size images that fit for 4types of screens like ldpi, mdpi , hdpi, xhdpi . Can anyone tell me exact sizes in pixels for these screens so I can design in that size ?

Example answer :

ldpi - 1024X768 px
mdpi  - 111 X 156 px  

 We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />

this will help you

efkan

Splash screen sizes for Android

and at the same time for Cordova (a.k.a Phonegap), React-Native and all other development platforms

Format : 9-Patch PNG (recommended)

Dimensions

 - LDPI:
    - Portrait: 200x320px
    - Landscape: 320x200px
 - MDPI:
    - Portrait: 320x480px
    - Landscape: 480x320px
 - HDPI:
    - Portrait: 480x800px
    - Landscape: 800x480px
 - XHDPI:
    - Portrait: 720px1280px
    - Landscape: 1280x720px
 - XXHDPI
    - Portrait: 960x1600px
    - Landscape: 1600x960px
 - XXXHDPI 
    - Portrait: 1280x1920px
    - Landscape: 1920x1280px

Note: Preparing XXXHDPI is not needed and also maybe XXHDPI size too because of the repeating areas of 9-patch images. On the other hand, if only Portrait sizes are used the App size could be more less. More pictures mean more space is need.

Pay attention

I think there is no an exact size for the all devices. I use Xperia Z 5". If you develop a crossplatform-webview app you should consider a lot of things (whether screen has softkey navigation buttons or not, etc). Therefore, I think there is only one suitable solution. The solution is to prepare a 9-patch splash screen (find How to design a new splash screen heading below).

Create splash screens for the above screen sizes as 9-patch. Give names your files with .9.png suffixes Add the lines below into your config.xml file Add the splash screen plugin if it's needed. Run your project.

That's it!

Cordova specific code To be added lines into the config.xml for 9-patch splash screens

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
    <splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
    <splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
    <splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
    <splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/> 
</platform>

To be added lines into the config.xml when using non-9-patch splash screens

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

How to design a new splash screen

I would describe a simple way to create proper splash screen using this way. Assume we're designing a 1280dp x 720dp - xhdpi (x-large) screen. I've written for the sake of example the below;

In Photoshop: File -> New in new dialog window set your screens Width: 720 Pixels Height: 1280 Pixels I guess the above sizes mean Resolution is 320 Pixels/Inch. But to ensure you can change resolution value to 320 in your dialog window. In this case Pixels/Inch = DPI Congratulations... You have a 720dp x 1280dp splash screen template.

How to generate a 9-patch splash screen

https://i.stack.imgur.com/HzOYr.png

Just do that: Zoom your image's top edge on draw9patch application. Click and drag your mouse to draw line. And press shift + click and drag your mouse to erase line.

https://i.stack.imgur.com/1cDBj.png

If you develop a cross-platform app (like Cordova/PhoneGap) you can find the following address almost all mabile OS splash screen sizes. Click for Windows Phone, WebOS, BlackBerry, Bada-WAC and Bada splash screen sizes.

https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

And if you need IOS, Android etc. app icon sizes you can visit here.

IOS

Format : PNG (recommended)

Dimensions

 - Tablet (iPad)
   - Non-Retina (1x)
     - Portrait: 768x1024px
     - Landscape: 1024x768px
   - Retina (2x)
     - Portrait: 1536x2048px
     - Landscape: 2048x1536px
 - Handheld (iPhone, iPod)
   - Non-Retina (1x)
     - Portrait: 320x480px
     - Landscape: 480x320px
   - Retina (2x)
     - Portrait: 640x960px
     - Landscape: 960x640px
 - iPhone 5 Retina (2x)
   - Portrait: 640x1136px
   - Landscape: 1136x640px
 - iPhone 6 (2x)
   - Portrait: 750x1334px
   - Landscape: 1334x750px
 - iPhone 6 Plus (3x)
   - Portrait: 1242x2208px
   - Landscape: 2208x1242px

Lonzak

For Android Mobile Devices

LDPI- icon-36x36, splash-426x320 (now with correct values)

MDPI- icon-48x48, splash-470x320

HDPI- icon 72x72, splash- 640x480

XHDPI- icon-96x96, splash- 960x720

XXHDPI- icon- 144x144

All in pixels.

For Android Tablet Devices

LDPI:
    Portrait: 200x320px
    Landscape: 320x200px
MDPI:
    Portrait: 320x480px
    Landscape: 480x320px
HDPI:
    Portrait: 480x800px
    Landscape: 800x480px
XHDPI:
    Portrait: 720px1280px
    Landscape: 1280x720px

@Geobits: both are in pixels. That is for different resolutions. I don't see any confusion there. strange!!

The sizes you give for ldpi/mdpi/hdpi/xhdpi correspond with small/normal/large/xlarge in dp according to this. Also, if they are pixels sizes, they should be of the scale 0.75/1/1.5/2. Do you have a source for these sizes that I'm not seeing?

@NijilNair : how come the resolution of images on tablet is smaller than on mobile phones?! Should it not be the other way around? For example, I am surprised with the "Mobile phone ldpi : 426x320 " and then "Tablet ldpi : 320 x 200"... does not seem logical at all. Thanks for answering!

@Phalanx : check this link. developer.android.com/guide/practices/….

Are you sure LDPI icon is not 36x36?

Alex Wiese

There can be any number of different screen sizes due to Android having no set standard size so as a guide you can use the minimum screen sizes, which are provided by Google.

According to Google's statistics the majority of ldpi displays are small screens and the majority of mdpi, hdpi, xhdpi and xxhdpi displays are normal sized screens.

xlarge screens are at least 960dp x 720dp

large screens are at least 640dp x 480dp

normal screens are at least 470dp x 320dp

small screens are at least 426dp x 320dp

You can view the statistics on the relative sizes of devices on Google's dashboard which is available here.

More information on multiple screens can be found here.

9 Patch image

The best solution is to create a nine-patch image so that the image's border can stretch to fit the size of the screen without affecting the static area of the image.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Could you also include xxhdpi? (if it exists)

Google define xxhdpi as ~480 DPI. They don't provide a minimum screen size for this from what I can see.

Why does this have so many upvotes? xlarge != xhdpi, they're measuring two totally different things. Those dp sizes are listed for the size buckets, not density.

@geobits look at the question. He is asking what size his splash screens should be for each density that he supports. As there can be any number of different sizes due to Android having no set standard size the closest correct answer we can give is the minimum screen sizes, which is provided by Google. You can read more about this if you follow the link in the answer.

I understand what you're saying, but that isn't what your answer says. If it did, I wouldn't have even commented. He asked for a size list, and you simply give a list based on something else with no explanation. You should edit it in, whether or not you link to the docs.

Manavendher

LDPI: Portrait: 200 X 320px. Landscape: 320 X 200px.

MDPI: Portrait: 320 X 480px. Landscape: 480 X 320px.

HDPI: Portrait: 480 X 800px. Landscape: 800 X 480px.

XHDPI: Portrait: 720 X 1280px. Landscape: 1280 X 720px.

XXHDPI: Portrait: 960 X 1600px. Landscape: 1600 X 960px.

XXXHDPI: Portrait: 1280 X 1920px. Landscape: 1920 X 1280px.

Everywhere I read xhdpi is just double to mdpi, so according to that xhdpi should be 640 x 960, but you wrote it 720x1280. Can you please explain how it is 720x1280? Which formula you used?

Isn't xxxhdpi 1440x2560? According to this list, where Google Pixel XL is listed as xxxhdpi material.io/resources/devices

Mayur Birari

Xlarge screens are at least 960dp x 720dp

List item large screens are at least 640dp x 480dp

List item normal screens are at least 470dp x 320dp

List item small screens are at least 426dp x 320dp

Use this to create your images and put them in specific resource folder.

Oussama L.

Just use this website: http://ticons.fokkezb.nl :)

It makes it easier for you, and generates the correct sizes directly

This website appears to be for iOS images, not Android.

I used it for android, and was quite satisfied with the results ;à

Amila

xlarge screens are at least 960dp x 720dp layout-xlarge 10" tablet (720x1280 mdpi, 800x1280 mdpi, etc.)

large screens are at least 640dp x 480dp tweener tablet like the Streak (480x800 mdpi), 7" tablet (600x1024 mdpi)

normal screens are at least 470dp x 320dp layout typical phone screen (480x800 hdpi)

small screens are at least 426dp x 320dp typical phone screen (240x320 ldpi, 320x480 mdpi, etc.)

android splash screen sizes for ldpi,mdpi, hdpi, xhdpi displays ? - eg : 1024X768 pixels for ldpi

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US