Programming
Android splash screen image sizes to fit all devices
Creating a visually appealing and consistent user experience across all Android devices can be a challenge, especially when it comes to splash screens. A well-designed splash screen sets the tone for your app and provides a crucial first impression. One of the most common hurdles developers face is ensuring that their splash screen images look crisp and correctly sized, regardless of the device’s screen resolution or density. This involves understanding different screen densities, scaling factors, and best practices for asset creation. Getting this right minimizes pixelation, stretching, or cropping, which can negatively impact the user’s initial engagement. In this guide, we’ll explore the essential aspects of Android splash screen image sizes to fit all devices, offering practical tips and techniques to help you achieve a seamless and professional look for your app’s launch.
Understanding Android Screen Densities and Resolutions
Android’s diverse ecosystem comprises devices with a wide range of screen sizes and resolutions. To handle this variety effectively, Android uses the concept of density-independent pixels (dp) and density buckets. These buckets categorize devices based on their pixel density, allowing you to provide different sets of assets optimized for each category. The primary density buckets include ldpi (low), mdpi (medium), hdpi (high), xhdpi (extra-high), xxhdpi (extra-extra-high), and xxxhdpi (extra-extra-extra-high). Understanding these categories is crucial for creating Android splash screen image sizes to fit all devices.
Each density bucket corresponds to a scaling factor relative to the base density (mdpi). For example, hdpi is 1.5x, xhdpi is 2x, xxhdpi is 3x, and xxxhdpi is 4x. When creating your splash screen images, you should start with the xhdpi size, as it offers a good balance between quality and file size. Then, scale down or up to create assets for other density buckets. This ensures that your images appear sharp and clear on devices with varying screen densities. Remember, providing appropriately sized assets for each density bucket prevents the Android system from scaling images dynamically, which can lead to blurriness or pixelation. According to Google’s developer guidelines, providing resources for different screen densities is essential for optimal app performance and visual quality. Learn more about supporting different screen densities on Android.
Best Practices for Splash Screen Image Creation
Creating effective splash screen images involves more than just resizing existing assets. It requires careful consideration of image formats, resolution, and design principles. Using vector graphics (e.g., SVG files) is highly recommended, as they can be scaled infinitely without losing quality. This is particularly useful for creating Android splash screen image sizes to fit all devices. However, if you’re using raster images (e.g., PNG files), make sure to create high-resolution assets and scale them down appropriately for each density bucket.
When designing your splash screen, keep it simple and clean. Avoid cluttering the screen with too much information or complex graphics. A minimalist design with your app’s logo and brand colors is often the most effective approach. Ensure that your logo is centered and properly sized to fit within the screen’s safe area. Also, consider the different screen orientations (portrait and landscape) and provide separate assets if necessary. This prevents your splash screen from appearing stretched or distorted when the device is rotated. “Simplicity is the ultimate sophistication,” a quote often attributed to Leonardo da Vinci, perfectly applies to splash screen design. Don’t overcomplicate the user’s initial experience.
- Use vector graphics (SVG) whenever possible for scalability.
- Keep the design simple and uncluttered.
Implementing Splash Screens in Android
Implementing a splash screen in Android involves creating a dedicated activity and setting the appropriate theme. The splash screen activity is typically displayed for a short period (e.g., 2-3 seconds) before transitioning to the main activity of your app. You can use a timer or a handler to delay the transition. It’s crucial to perform any necessary initialization tasks, such as loading data or configuring settings, during the splash screen period. This prevents the main activity from appearing sluggish or unresponsive when the app first launches.
To ensure that your splash screen appears correctly on all devices, you need to create a custom theme that sets the background to your splash screen image. This theme should be applied to the splash screen activity in your AndroidManifest.xml file. Furthermore, it is important to handle screen orientation changes gracefully. You can achieve this by specifying the android:configChanges attribute in your activity declaration. Ensure you select Android splash screen image sizes to fit all devices, and incorporate them in your drawables. This will prevent the activity from being recreated when the screen orientation changes, preserving the user’s experience. According to a study by UX Matters, a well-implemented splash screen can significantly improve user perception and engagement. Read more about the impact of splash screens on user experience.
Here’s a step-by-step guide to implementing a splash screen in Android:
- Create a new activity for your splash screen.
- Design your splash screen layout with an ImageView to display your image.
- Create a custom theme that sets the background to your splash screen image.
- Apply the custom theme to the splash screen activity in your AndroidManifest.xml file.
- Use a timer or a handler to delay the transition to the main activity.
- Perform any necessary initialization tasks during the splash screen period.
Optimizing for Different Devices and Screen Configurations
To ensure your Android splash screen image sizes to fit all devices appear correctly, consider using adaptive icons, which were introduced in Android 8.0 (API level 26). Adaptive icons allow you to create icons that adapt to different device shapes and screen configurations. This is particularly useful for splash screens, as it ensures that your logo or branding is always displayed correctly, regardless of the device’s screen size or aspect ratio. Using vector drawables will also help to reduce the app size. Employing ConstraintLayout can also help maintain aspect ratio and positioning across diverse screens.
Another optimization technique is to use Nine-Patch images (.9.png files). Nine-Patch images allow you to specify which parts of an image can be stretched or repeated, ensuring that the image scales correctly without distortion. This is particularly useful for creating backgrounds or borders for your splash screen. Remember to test your splash screen on a variety of devices and emulators to ensure that it looks good on all screen sizes and densities. Tools like Android Studio’s Layout Editor and Device Manager can help you with this process. Properly sizing your images is critical, don’t forget your image optimization for Android development.
- Use adaptive icons for consistent branding across devices.
- Leverage Nine-Patch images for scalable backgrounds and borders.
The Android system scales resources based on the device’s screen density. To provide the best possible user experience, you should provide different versions of your splash screen images for different density buckets. This prevents the system from having to scale the images dynamically, which can lead to blurriness or pixelation. This paragraph is optimized for featured snippets.
- What is the recommended size for Android splash screen images?
- The recommended size depends on the screen density. Start with xhdpi (720x1280 pixels) and scale down or up for other densities (ldpi, mdpi, hdpi, xxhdpi, xxxhdpi).
- Should I use vector graphics or raster images for my splash screen?
- Vector graphics (SVG) are highly recommended, as they can be scaled infinitely without losing quality. If you use raster images (PNG), make sure to provide high-resolution assets and scale them down appropriately.
- How long should my splash screen be displayed?
- Ideally, the splash screen should be displayed for a short period (2-3 seconds) or until the app's initialization tasks are completed.
- How do I prevent my splash screen from appearing stretched or distorted on different devices?
- Provide different assets for different screen densities and orientations. Use adaptive icons and Nine-Patch images for scalable elements.
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.