Android splash screen image sizes to fit all devices

Question

I have a full screen PNG I want to display on splash. Only one error there, and I have no idea what size to put in every drawable folder (ldpi, mdpi, hdpi, and xhdpi). My application is supposed to run good and beautiful on all phones and tablets. What sizes (in pixels) should I create so the splash displays nice on all screens?

This question is related to android png screen drawable splash-screen

User · Answer

Edited solution that will make your SplashScreen look great on all APIs including API21 to API23  If you are only targeting APIs24  you can simply scale down your vector drawable directly in its xml file like so    lt 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  gt   lt path     android pathData  M320 96 55 9L477 14 345L161 67 345L320 96 55 9Z      android strokeColor   292929      android strokeWidth  24    gt   lt  vector gt    in the code above I am rescaling a drawable I drew on a 640x640 canvas to be 240x240  then i just put it in my splash screen drawable like so and it works great    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt    lt  -- The background color  preferably the same as your normal theme -- gt   lt item gt       lt shape gt           lt size android height  120dp  android width  120dp   gt           lt solid android color   android color white   gt       lt  shape gt   lt  item gt    lt  -- Your product logo - 144dp color version of your app icon -- gt   lt item     android drawable   drawable logo vect      android gravity  center  gt    lt  item gt   lt  layer-list gt    my code is actually only drawing the triangle in the picture at the bottom but here you see what you can achieve with this  Resolution is finally great as opposed to the pixelated edges I was getting when using bitmap  so use a vector drawable by all means  there is a site called vectr that I used to create mine without the hasle of downloading specialized software    EDIT in order to make it work also on API21-22-23  While the solution above works for devices runing API24  I got really disappointed after installing my app a device running API22  I noticed that the splashscreen was again trying to fill the entire view and looking like shit  After tearing my eyebrows out for half a day I finally brute-forced a solution by sheer willpower    you need to create a second file named exactly like the splashscreen xml  lets say splash screen xml  and place it into 2 folders called drawable-v22 and drawable-v21 that you will create in the res  folder  in order to see them you have to change your project view from Android to Project   This serves to tell your phone to redirect to files placed in those folders whenever the relevant device runs an API corresponding to the -vXX suffix in the drawable folder  see this link  place the following code in the Layer-list of the splash screen xml file that you create in these folders    lt item gt   lt shape gt       lt size android height  120dp  android width  120dp   gt       lt solid android color   android color white   gt   lt  shape gt   lt  item gt    lt  -- Your product logo - 144dp color version of your app icon -- gt   lt item android gravity  center  gt       lt bitmap android gravity  center          android src  logo vect   gt    lt  item gt      For some reason for these APIs you have to wrap your drawable in a bitmap in order to make it work and jet the final result looks the same  The issue is that you have to use the aproach with the aditional drawable folders as the second version of the splash screen xml file will lead to your splash screen not being shown at all on devices running APIs higher than 23  You might also have to place the first version of the splash screen xml into drawable-v24 as android defaults to the closest drawable-vXX folder it can find for resources  hope this helps

User · Answer

I have searched the best and the simplest answer to make 9-patch image. Now to make the 9 patch image is the easiest task.

From https://romannurik.github.io/AndroidAssetStudio/index.html you can make a 9-patch image for all the resolutions - XHDPI,HDPI,MDPI,LDPI in just one click.

User · Answer

PORTRAIT MODE  MDPI is 320x480 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  LANDSCAPE MODE  MDPI is 480x320 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  EDIT   I would suggest to use Lottie for splash screen if you are reading this in 2019

User · Answer

Using PNG is not such a good idea  Actually it s costly as far as performance is concerned   You can use drawable XML files  for example  Facebook s background   This will help you to smooth and speed up your performance  and for the logo use  9 patch images

User · Answer

Some time ago i created an excel file with supported dimensions
Hope this will be helpful for somebody

To be honest i lost the idea, but it refers another screen feature as size (not only density)
https://developer.android.com/guide/practices/screens_support.html
Please inform me if there are some mistakes

Link1: dimensions.xlsx

Link2: dimensions.xlsx

User · Answer

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

User · Answer

If you are looking for screen details for all kind of major devices     go to material io

User · Answer

PORTRAIT  LDPI   200x320px      MDPI   320x480px  HDPI   480x800px  XHDPI  720px1280px  LANDSCAPE  LDPI   320x200px       MDPI   480x320px  HDPI   800x480px  XHDPI  1280x720px

User · Answer

In my case  I used list drawable in style xml  With layer list drawable  you have just needed one png for all screen size    lt resources xmlns tools  http   schemas android com tools  gt   lt  -- Base application theme  -- gt   lt style name  AppTheme  parent  android Theme Holo Light DarkActionBar  gt       lt item name  android windowNoTitle  gt true lt  item gt       lt item name  android windowBackground  gt  drawable flash screen lt  item gt       lt item name  android windowTranslucentStatus  tools ignore  NewApi  gt true lt  item gt   lt  style gt      and flash screen xml in drawable folder    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android drawable   android color white  gt  lt  item gt       lt item gt           lt bitmap android src   drawable background noizi  android gravity  center  gt  lt  bitmap gt       lt  item gt   lt  layer-list gt     background noizi  is a png file in the drawable folder  I hope this helps

User · Answer

Disclaimer  This answer is from 2013 and is seriously outdated  As of Android 3 2 there are now 6 groups of screen density  This answer will be updated as soon as I am able  but with no ETA  Refer to the official documentation for all the densities at the moment  although information on specific pixel sizes is as always hard to find     Here s the tl dr version   Create 4 images  one for each screen density     xlarge  xhdpi   640x960 large  hdpi   480x800 medium  mdpi   320x480 small  ldpi   240x320  Read 9-patch image introduction in Android Developer Guide Design images that have areas that can be safely stretched without compromising the end result   With this  Android will select the appropriate file for the device s image density  then it will stretch the image according to the 9-patch standard   end of tl dr  Full post ahead  I am answering in respect to the design-related aspect of the question  I am not a developer  so I won t be able to provide code for implementing many of the solutions provided  Alas  my intent is to help designers who are as lost as I was when I helped develop my first Android App   Fitting all sizes  With Android  companies can develop their mobile phones and tables of almost any size  with almost any resolution they want  Because of that  there is no  right image size  for a splash screen  as there are no fixed screen resolutions  That poses a problem for people that want to implement a splash screen   Do your users really want to see a splash screen    On a side note  splash screens are somewhat discouraged among the usability guys  It is argued that the user already knows what app he tapped on  and branding your image with a splash screen is not necessary  as it only interrupts the user experience with an  ad   It should be used  however  in applications that require some considerable loading when initialized  5s    including games and such  so that the user is not stuck wondering if the app crashed or not   Screen density  4 classes  So  given so many different screen resolutions in the phones on the market  Google implemented some alternatives and nifty solutions that can help  The first thing you have to know is that Android separates ALL screens into 4 distinct screen densities    Low Density  ldpi   120dpi  Medium Density  mdpi   160dpi  High Density  hdpi   240dpi  Extra-High Density  xhdpi   320dpi   These dpi values are approximations  since custom built devices will have varying dpi values    What you  if you re a designer  need to know from this is that Android basically chooses from 4 images to display  depending on the device  So you basically have to design 4 different images  although more can be developed for different formats such as widescreen  portrait landscape mode  etc    With that in mind know this  unless you design a screen for every single resolution that is used in Android  your image will stretch to fit screen size  And unless your image is basically a gradient or blur  you ll get some undesired distortion with the stretching  So you have basically two options  create an image for each screen size density combination  or create four 9-patch images   The hardest solution is to design a different splash screen for every single resolution  You can start by following the resolutions in the table at the end of this page  there are more  Example  960 x 720 is not listed there   And assuming you have some small detail in the image  such as small text  you have to design more than one screen for each resolution  For example  a 480x800 image being displayed in a medium screen might look ok  but on a smaller screen  with higher density dpi  the logo might become too small  or some text might become unreadable   9-patch image  The other solution is to create a 9-patch image  It is basically a 1-pixel-transparent-border around your image  and by drawing black pixels in the top and left area of this border you can define which portions of your image will be allowed to stretch  I won t go into the details of how 9-patch images work but  in short  the pixels that align to the markings in the top and left area are the pixels that will be repeated to stretch the image    A few ground rules   You can make these images in photoshop  or any image editing software that can accurately create transparent pngs   The 1-pixel border has to be FULL TRANSPARENT  The 1-pixel transparent border has to be all around your image  not just top and left  you can only draw black   000000  pixels in this area  The top and left borders  which define the image stretching  can only have one dot  1px x 1px   two dots  both 1px x 1px  or ONE continuous line  width x 1px or 1px x height   If you choose to use 2 dots  the image will be expanded proportionally  so each dot will take turns expanding until the final width height is achieved  The 1px border has to be in addition to the intended base file dimensions  So a 100x100 9-patch image has to actually have 102x102  100x100  1px on top  bottom  left and right  9-patch images have to end with   9 png   So you can place 1 dot on either side of your logo  in the top border   and 1 dot above and below it  on the left border   and these marked rows and columns will be the only pixels to stretch   Example  Here s a 9-patch image  102x102px  100x100 final size  for app purposes      Here s a 200  zoom of the same image     Notice the 1px marks on top and left saying which rows columns will expand   Here s what this image would look like in 100x100 inside the app     And here s what it would like if expanded to 460x140     One last thing to consider  These images might look fine on your monitor screen and on most mobiles  but if the device has a very high image density  dpi   the image would look too small  Probably still legible  but on a tablet with 1920x1200 resolution  the image would appear as a very small square in the middle  So what s the solution  Design 4 different 9-patch launcher images  each for a different density set  To ensure that no shrinking will occur  you should design in the lowest common resolution for each density category  Shrinking is undesirable here because 9-patch only accounts for stretching  so in a shrinking process small text and other elements might lose legibility   Here s a list of the smallest  most common resolutions for each density category    xlarge  xhdpi   640x960 large  hdpi   480x800 medium  mdpi   320x480 small  ldpi   240x320   So design four splash screens in the above resolutions  expand the images  putting a 1px transparent border around the canvas  and mark which rows columns will be stretchable  Keep in mind these images will be used for ANY device in the density category  so your ldpi image  240 x 320  might be stretched to 1024x600 on an extra large tablet with small image density   120 dpi   So 9-patch is the best solution for the stretching  as long as you don t want a photo or complicated graphics for a splash screen  keep in mind these limitations as you create the design    Again  the only way for this stretching not to happen is to design one screen each resolution  or one for each resolution-density combination  if you want to avoid images becoming too small big on high low density devices   or to tell the image not to stretch and have a background color appear wherever stretching would occur  also remember that a specific color rendered by the Android engine will probably look different from the same specific color rendered by photoshop  because of color profiles    I hope this made any sense  Good luck

User · Answer

Based off this answer from Lucas Cerro I calculated the dimensions using the ratios in the Android docs  using the baseline in the answer  I hope this helps someone else coming to this post    xxxlarge  xxxhdpi   1280x1920  4 0x  xxlarge  xxhdpi   960x1440  3 0x  xlarge  xhdpi   640x960  2 0x  large  hdpi   480x800  1 5x  medium  mdpi   320x480  1 0x baseline  small  ldpi   240x320  0 75x

[android] Android splash screen image sizes to fit all devices

The answer is

PORTRAIT MODE

LANDSCAPE MODE

Examples related to android

Examples related to png

Examples related to screen

Examples related to drawable

Examples related to splash-screen

Tags