适合所有设备的 Android 启动画面图像大小

Android splash screen image sizes to fit all devices

提问by arielschon12

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?

我有一个全屏 PNG，我想在启动时显示。只有一个错误，我不知道是什么尺寸摆在每一个绘制的文件夹（ldpi，mdpi，hdpi，和xhdpi）。我的应用程序应该在所有手机和平板电脑上运行良好且美观。我应该创建什么尺寸（以像素为单位），以便在所有屏幕上都能很好地显示启动画面？

回答by Lucas Cerro

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 documentationfor all the densities at the moment (although information on specific pixel sizes is as always hard to find).

这个答案是从 2013 年开始的，已经严重过时了。从 Android 3.2 开始，现在有 6 组屏幕密度。我会尽快更新此答案，但没有预计到达时间。目前所有密度请参考官方文档（尽管关于特定像素大小的信息总是很难找到）。

Here's the tl/dr version

这是 tl/dr 版本

• Create 4 images, one for each screen density:

  • xlarge (xhdpi): 640x960
  • large (hdpi): 480x800
  • medium (mdpi): 320x480
  • small (ldpi): 240x320

• Read 9-patch image introductionin Android Developer Guide

• Design images that have areas that can be safely stretched without compromising the end result

• 创建 4 个图像，每个屏幕密度一个：

  • 超大 (xhdpi)：640x960
  • 大 (hdpi)：480x800
  • 中 (mdpi)：320x480
  • 小 (ldpi)：240x320

• 阅读Android Developer Guide 中的9-patch image 介绍

• 设计具有可以安全拉伸的区域而不影响最终结果的图像

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.

这样，Android 将为设备的图像密度选择合适的文件，然后它会根据 9-patch 标准拉伸图像。

end of tl;dr. Full post ahead

tl 结束；博士。完整的帖子在前面

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.

我正在回答问题的与设计相关的方面。我不是开发人员，因此我无法提供用于实现所提供的许多解决方案的代码。唉，我的目的是帮助那些像我帮助开发我的第一个 Android 应用程序时一样迷茫的设计师。

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.

使用 Android，公司可以开发几乎任何尺寸的手机和桌子，几乎可以使用他们想要的任何分辨率。因此，启动画面没有“正确的图像大小”，因为没有固定的屏幕分辨率。这给想要实现启动画面的人带来了问题。

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)

（顺便说一句，可用性人员在某种程度上不鼓励启动画面。有人认为用户已经知道他点击了哪个应用程序，并且没有必要用启动画面标记您的图像，因为它只会中断用户体验一个“广告”。但是，它应该用于初始化时需要大量加载的应用程序（5s+），包括游戏等，这样用户就不会想知道应用程序是否崩溃了）

Screen density; 4 classes

屏幕密度；4班

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 ALLscreens into 4 distinct screen densities:

因此，鉴于市场上手机的屏幕分辨率如此之多，谷歌实施了一些可以提供帮助的替代方案和漂亮的解决方案。您首先要知道的是，Android 将所有屏幕分为 4 种不同的屏幕密度：

1. Low Density (ldpi ~ 120dpi)
2. Medium Density (mdpi ~ 160dpi)
3. High Density (hdpi ~ 240dpi)
4. Extra-High Density (xhdpi ~ 320dpi) (These dpi values are approximations, since custom built devices will have varying dpi values)

1. 低密度 (ldpi ~ 120dpi)
2. 中密度 (mdpi ~ 160dpi)
3. 高密度 (hdpi ~ 240dpi)
4. 超高密度 (xhdpi ~ 320dpi)（这些 dpi 值是近似值，因为定制设备将具有不同的 dpi 值）

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

您（如果您是设计师）需要从中了解的是，Android 基本上会根据设备从 4 个图像中进行选择。因此，您基本上必须设计 4 个不同的图像（尽管可以为不同的格式开发更多图像，例如宽屏、纵向/横向模式等）。

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.

请记住这一点：除非您为 Android 中使用的每个分辨率设计一个屏幕，否则您的图像将拉伸以适应屏幕尺寸。除非您的图像基本上是渐变或模糊，否则拉伸时会出现一些不希望有的失真。所以你基本上有两个选择：为每个屏幕尺寸/密度组合创建一个图像，或者创建四个 9 块图像。

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.

最难的解决方案是为每个分辨率设计不同的启动画面。您可以从本页末尾表格中的分辨率开始（还有更多。例如：960 x 720 未在此处列出）。假设您在图像中有一些小细节，例如小文本，您必须为每个分辨率设计多个屏幕。例如，在中等屏幕上显示的 480x800 图像可能看起来不错，但在较小的屏幕上（具有更高的密度/dpi），徽标可能会变得太小，或者某些文本可能会变得不可读。

9-patch image

9 片图像

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.

另一种解决方案是创建一个 9-patch image。它基本上是围绕图像的 1 像素透明边框，通过在此边框的顶部和左侧区域绘制黑色像素，您可以定义允许拉伸图像的哪些部分。我不会详细介绍 9-patch 图像的工作原理，但简而言之，与顶部和左侧区域中的标记对齐的像素是将重复以拉伸图像的像素。

A few ground rules

一些基本规则

1. You can make these images in photoshop (or any image editing software that can accurately create transparent pngs).
2. The 1-pixel border has to be FULL TRANSPARENT.
3. The 1-pixel transparent border has to be all around your image, not just top and left.
4. you can only draw black (#000000) pixels in this area.
5. 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).
6. 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)
7. 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)
8. 9-patch images have to end with *.9.png

1. 您可以在 photoshop（或任何可以准确创建透明 png 的图像编辑软件）中制作这些图像。
2. 1 像素边框必须完全透明。
3. 1 像素的透明边框必须围绕您的图像，而不仅仅是顶部和左侧。
4. 您只能在该区域绘制黑色 (#000000) 像素。
5. 上边框和左边框（定义图像拉伸）只能有一个点（1px x 1px）、两个点（均为 1px x 1px）或一条连续线（宽度 x 1px 或 1px x 高度）。
6. 如果您选择使用 2 个点，图像将按比例扩大（因此每个点将轮流扩大，直到达到最终的宽度/高度）
7. 1px 边框必须是预期的基本文件尺寸的补充。所以一个 100x100 的 9-patch 图像实际上必须有 102x102（顶部、底部、左侧和右侧为 100x100 +1px）
8. 9-patch 图像必须以 *.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.

因此，您可以在徽标的两侧（顶部边框中）放置 1 个点，在其上方和下方放置 1 个点（在左边框中），这些标记的行和列将是唯一要拉伸的像素。

Example

例子

Here's a 9-patch image, 102x102px (100x100 final size, for app purposes):

这是一个 9-patch 图像，102x102px（100x100 最终尺寸，用于应用程序）：

Here's a 200% zoom of the same image:

这是同一图像的 200% 缩放：

Notice the 1px marks on top and left saying which rows/columns will expand.

注意顶部和左侧的 1px 标记表示哪些行/列将展开。

Here's what this image would look like in 100x100 inside the app:

以下是该图像在应用程序内 100x100 的外观：

And here's what it would like if expanded to 460x140:

如果扩展到 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.

最后要考虑的一件事。这些图像在您的显示器屏幕和大多数移动设备上可能看起来不错，但如果设备具有非常高的图像密度 (dpi)，图像就会显得太小。可能仍然清晰可辨，但在分辨率为 1920x1200 的平板电脑上，图像会在中间显示为一个非常小的正方形。那么有什么解决办法呢？设计 4 个不同的 9-patch 启动器图像，每个图像用于不同的密度集。为确保不会发生收缩，您应该为每个密度类别以最低的公共分辨率进行设计。收缩在这里是不可取的，因为 9-patch 只考虑拉伸，所以在收缩过程中，小文本和其他元素可能会失去易读性。

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

• 超大 (xhdpi)：640x960
• 大 (hdpi)：480x800
• 中 (mdpi)：320x480
• 小 (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 ANYdevice 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).

因此，按照上述分辨率设计四个启动画面，展开图像，在画布周围放置一个 1px 的透明边框，并标记哪些行/列将是可拉伸的。请记住，这些图像将用于密度类别中的任何设备，因此您的 ldpi 图像 (240 x 320) 可能会在具有小图像密度 (~120 dpi) 的超大平板电脑上拉伸至 1024x600。所以 9-patch 是拉伸的最佳解决方案，只要您不想要照片或复杂图形用于启动画面（在创建设计时请记住这些限制）。

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

同样，这种拉伸不会发生的唯一方法是为每个分辨率设计一个屏幕（或者为每个分辨率-密度组合设计一个屏幕，如果您想避免图像在高/低密度设备上变得太小/太大），或者告诉图像不会拉伸并在发生拉伸的地方显示背景颜色（还请记住，由于颜色配置文件，Android 引擎呈现的特定颜色可能与 photoshop 呈现的相同特定颜色看起来不同）。

I hope this made any sense. Good luck!

我希望这有意义。祝你好运！

回答by Ajmal Salim

PORTRAIT MODE

人像模式

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

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

LDPI is 0.75 x MDPI = 240x360px

LDPI 为 0.75 x MDPI = 240x360px

HDPI is 1.5 x MDPI = 480x720px

HDPI 为 1.5 x MDPI = 480x720px

XHDPI is 2 x MDPI = 640x960px

XHDPI 是 2 x MDPI = 640x960px

XXHDPI is 3 x MDPI = 960x1440px

XXHDPI 是 3 x MDPI = 960x1440px

XXXHDPI is 4 x MDPI = 1280x1920px

XXXHDPI 是 4 x MDPI = 1280x1920px

LANDSCAPE MODE

风景模式

MDPI is 480x320 dp = 480x320px (1x)

MDPI 为 480x320 dp = 480x320px (1x)

LDPI is 0.75 x MDPI = 360x240px

LDPI 为 0.75 x MDPI = 360x240px

HDPI is 1.5 x MDPI = 720x480px

HDPI 为 1.5 x MDPI = 720x480px

XHDPI is 2 x MDPI = 960x640px

XHDPI 是 2 x MDPI = 960x640px

XXHDPI is 3 x MDPI = 1440x960px

XXHDPI 是 3 x MDPI = 1440x960px

XXXHDPI is 4 x MDPI = 1920x1280px

XXXHDPI 是 4 x MDPI = 1920x1280px

EDIT:

编辑：

I would suggest to use Lottiefor splash screen if you are reading this in 2019+

如果您在 2019 年以上阅读本文，我建议您使用Lottie作为启动画面

回答by JRE.exe

PORTRAIT

肖像

LDPI: 200x320px

LDPI：200x320px

MDPI: 320x480px

MDPI：320x480px

HDPI: 480x800px

HDPI：480x800px

XHDPI: 720px1280px

XHDPI：720px1280px

LANDSCAPE

风景

LDPI: 320x200px

LDPI：320x200px

MDPI: 480x320px

MDPI：480x320px

HDPI: 800x480px

HDPI：800x480px

XHDPI: 1280x720px

XHDPI：1280x720px

回答by Owidat

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.

我已经搜索了制作 9-patch 图像的最佳和最简单的答案。现在制作 9 个补丁图像是最简单的任务。

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

从https://romannurik.github.io/AndroidAssetStudio/index.html，您可以一键制作所有分辨率的 9-patch 图像 - XHDPI、HDPI、MDPI、LDPI。

回答by Nishant Shah

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.

使用 PNG 并不是一个好主意。实际上，就性能而言，它是昂贵的。您可以使用可绘制的 XML 文件，例如Facebook 的背景文件。

This will help you to smooth and speed up your performance, and for the logo use .9 patch images.

这将帮助您平滑和加速您的性能，并且对于徽标使用 0.9 补丁图像。

回答by Zero

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

回答by user3295573

In my case, I used list drawable in style.xml. With layer list drawable, you have just needed one png for all screen size.

就我而言，我在 style.xml 中使用了 list drawable。使用图层列表可绘制，您只需要一个适用于所有屏幕尺寸的 png。

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

and flash_screen.xml in drawable folder.

和 flash_screen.xml 在 drawable 文件夹中。

<?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 a png file in the drawable folder. I hope this helps.

“background_noizi”是 drawable 文件夹中的一个 png 文件。我希望这有帮助。

回答by Vlad

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

前段时间我创建了一个支持尺寸的excel文件
希望这对某人有帮助

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

老实说，我失去了这个想法，但它将另一个屏幕特征称为大小（不仅是密度）
https://developer.android.com/guide/practices/screens_support.html
如有错误请告知

Link1: dimensions.xlsx

链接1：尺寸.xlsx

Link2: dimensions.xlsx

链接2：尺寸.xlsx

回答by Midhun Vijayakumar

** If you are looking for screen details for all kind of major devices **

** 如果您正在寻找各种主要设备的屏幕详细信息 **

go to material.io

去material.io

回答by quealegriamasalegre

Edited solution that will make your SplashScreen look great on all APIs including API21 to API23

经过编辑的解决方案将使您的 SplashScreen 在包括 API21 到 API23 在内的所有 API 上看起来都很棒

If you are only targeting APIs24+ you can simply scale down your vector drawable directly in its xml file like so:

如果您只针对 APIs24+，您可以直接在其 xml 文件中缩小您的矢量可绘制对象，如下所示：

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

在上面的代码中，我将在 640x640 画布上绘制的可绘制对象重新缩放为 240x240。然后我把它放在我的启动画面中，就像这样，它工作得很好：

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

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

我的代码实际上只是在底部的图片中绘制三角形，但在这里您可以看到使用它可以实现的目标。与使用位图时得到的像素化边缘相比，分辨率终于很棒了。所以一定要使用可绘制的矢量（有一个名为 vectr 的站点，我曾经创建我的站点，而无需下载专门的软件）。

EDIT in order to make it work also on API21-22-23

编辑以使其也适用于 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.

虽然上述解决方案适用于运行 API24+ 的设备，但在将我的应用安装到运行 API22 的设备后，我感到非常失望。我注意到闪屏再次试图填满整个视图并且看起来像狗屎。撕了半天的眉毛，我终于凭着意志力强行解决了。

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:

您需要创建一个与启动画面 xml 完全相同的第二个文件（假设为 splash_screen.xml），并将其放入两个名为 drawable-v22 和 drawable-v21 的文件夹中，您将在 res/ 文件夹中创建该文件夹（以便您查看它们）必须将您的项目视图从 Android 更改为 Project）。这用于告诉您的手机在相关设备运行与 drawable 文件夹中的 -vXX 后缀对应的 API 时重定向到放置在这些文件夹中的文件，请参阅此链接。将以下代码放置在您在这些文件夹中创建的 splash_screen.xml 文件的图层列表中：

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

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

出于某些原因，对于这些 API，您必须将 drawable 包装在位图中以使其工作并喷射最终结果看起来相同。问题是您必须使用带有附加可绘制文件夹的方法，因为 splash_screen.xml 文件的第二个版本将导致在运行 API 高于 23 的设备上根本不显示启动画面。您可能还必须放置将 splash_screen.xml 的第一个版本转换为 drawable-v24 作为 android 默认为它可以找到的最接近的 drawable-vXX 资源文件夹。希望这可以帮助