Eu tenho um PNG em tela cheia que quero exibir no splash. Apenas um erro lá, e eu não tenho idéia do que o tamanho para colocar em cada pasta drawable ( ldpi, mdpi, hdpie xhdpi). Meu aplicativo deve funcionar bom e bonito em todos os telefones e tablets. Quais tamanhos (em pixels) devo criar para que o splash seja exibido em todas as telas?

aviso Legal

Esta resposta é de 2013 e está seriamente desatualizada. A partir do Android 3.2, agora existem 6 grupos de densidade de tela. Esta resposta será atualizada assim que possível, mas sem ETA. Consulte a documentação oficial para todas as densidades no momento (embora seja sempre difícil encontrar informações sobre tamanhos de pixels específicos).

Aqui está a versão tl / dr

• Crie 4 imagens, uma para cada densidade de tela:

  • xlarge (xhdpi): 640x960
  • grande (hdpi): 480 x 800
  • médio (mdpi): 320x480
  • pequeno (ldpi): 240x320

• Leia a introdução da imagem com 9 correções no Guia do desenvolvedor do Android

• Crie imagens com áreas que podem ser esticadas com segurança sem comprometer o resultado final

Com isso, o Android selecionará o arquivo apropriado para a densidade de imagem do dispositivo e esticará a imagem de acordo com o padrão de 9 patches.

fim de tl; dr. Post completo à frente

Estou respondendo em relação ao aspecto relacionado ao design da pergunta. Como não sou desenvolvedor, não poderei fornecer código para implementar muitas das soluções fornecidas. Infelizmente, minha intenção é ajudar designers que estão tão perdidos quanto eu quando ajudei a desenvolver meu primeiro aplicativo Android.

Montagem de todos os tamanhos

Com o Android, as empresas podem desenvolver seus telefones celulares e mesas de quase qualquer tamanho, com praticamente qualquer resolução que desejarem. Por esse motivo, não há "tamanho de imagem correto" para uma tela inicial, pois não há resoluções de tela fixas. Isso representa um problema para as pessoas que desejam implementar uma tela inicial.

Seus usuários realmente querem ver uma tela inicial?

(Em uma nota lateral, as telas de abertura são um pouco desencorajadas entre os profissionais de usabilidade. Argumenta-se que o usuário já sabe em qual aplicativo ele tocou, e não é necessário marcar sua imagem com uma tela de abertura, pois apenas interrompe a experiência do usuário com um "anúncio". No entanto, ele deve ser usado em aplicativos que requerem um carregamento considerável quando inicializados (5s +), incluindo jogos e outros, para que o usuário não fique parado imaginando se o aplicativo travou ou não)

Densidade de tela; 4 aulas

Portanto, considerando tantas resoluções de tela diferentes nos telefones do mercado, o Google implementou algumas alternativas e soluções bacanas que podem ajudar. A primeira coisa que você precisa saber é que o Android separa TODAS as telas em 4 densidades distintas:

1. Baixa densidade (ldpi ~ 120dpi)
2. Densidade média (mdpi ~ 160dpi)
3. Alta densidade (hdpi ~ 240dpi)
4. Densidade extra-alta (xhdpi ~ 320dpi) (esses valores de dpi são aproximações, pois os dispositivos criados personalizados terão valores de dpi variáveis)

O que você (se você é um designer) precisa saber disso é que o Android basicamente escolhe entre 4 imagens para exibir, dependendo do dispositivo. Então, basicamente, é necessário projetar 4 imagens diferentes (embora mais possa ser desenvolvido para diferentes formatos, como widescreen, modo retrato / paisagem etc.).

Com isso em mente, saiba isso: a menos que você projete uma tela para cada resolução usada no Android, sua imagem será ampliada para se ajustar ao tamanho da tela. E, a menos que sua imagem seja basicamente um gradiente ou um borrão, você terá uma distorção indesejada com o alongamento. Portanto, você tem basicamente duas opções: crie uma imagem para cada combinação de tamanho / densidade da tela ou crie quatro imagens de 9 patches.

A solução mais difícil é projetar uma tela inicial diferente para cada resolução. Você pode começar seguindo as resoluções na tabela no final desta página (há mais. Exemplo: 960 x 720 não está listado lá). E supondo que você tenha alguns pequenos detalhes na imagem, como texto pequeno, é necessário criar mais de uma tela para cada resolução. Por exemplo, uma imagem de 480 x 800 exibida em uma tela média pode parecer boa, mas em uma tela menor (com densidade / dpi maior) o logotipo pode ficar muito pequeno ou algum texto pode ficar ilegível.

Imagem com 9 patches

A outra solução é criar uma imagem de 9 patches . É basicamente uma borda transparente de 1 pixel ao redor da sua imagem e, desenhando pixels pretos na área superior e esquerda dessa borda, você pode definir quais partes da sua imagem poderão esticar. Não vou entrar em detalhes de como as imagens com 9 patches funcionam, mas, em resumo, os pixels alinhados às marcações na área superior e esquerda são os pixels que serão repetidos para esticar a imagem.

Algumas regras básicas

1. Você pode fazer essas imagens no photoshop (ou qualquer software de edição de imagens que possa criar com precisão pngs transparentes).
2. A borda de 1 pixel deve ser TRANSPARENTE COMPLETA.
3. A borda transparente de 1 pixel deve estar ao redor da imagem, não apenas superior e esquerda.
4. você só pode desenhar pixels pretos (# 000000) nessa área.
5. As bordas superior e esquerda (que definem o alongamento da imagem) podem ter apenas um ponto (1px x 1px), dois pontos (1px x 1px) ou UMA linha contínua (largura x 1px ou 1px x altura).
6. Se você optar por usar 2 pontos, a imagem será expandida proporcionalmente (para que cada ponto se reveze em expansão até que a largura / altura final seja alcançada)
7. A borda 1px deve ser uma adição às dimensões do arquivo base pretendidas. Portanto, uma imagem de 9 x 100 x 100 tem que ter 102 x 102 (100 x 100 + 1 px na parte superior, inferior, esquerda e direita)
8. Imagens com 9 patches precisam terminar com * .9.png

Assim, você pode colocar 1 ponto em ambos os lados do seu logotipo (na borda superior) e 1 ponto acima e abaixo (na borda esquerda), e essas linhas e colunas marcadas serão os únicos pixels a serem esticados.

Exemplo

Aqui está uma imagem de 9 correções, 102x102px (tamanho final de 100x100, para fins de aplicativo):

Aqui está um zoom de 200% da mesma imagem:

Observe as marcas 1px na parte superior e esquerda dizendo quais linhas / colunas serão expandidas.

Veja como esta imagem ficaria em 100x100 dentro do aplicativo:

E aqui está o que ele gostaria se expandido para 460x140:

Uma última coisa a considerar. Essas imagens podem parecer bem na tela do monitor e na maioria dos celulares, mas se o dispositivo tiver uma densidade de imagem muito alta (dpi), a imagem parecerá muito pequena. Provavelmente ainda legível, mas em um tablet com resolução 1920x1200, a imagem apareceria como um quadrado muito pequeno no meio. Então, qual é a solução? Crie 4 imagens diferentes do iniciador de 9 patches, cada uma para um conjunto de densidades diferente. Para garantir que não ocorram encolhimentos, você deve criar a menor resolução comum para cada categoria de densidade. A redução é indesejável aqui porque o patch 9 é responsável apenas pelo alongamento; portanto, em um processo de redução, textos pequenos e outros elementos podem perder a legibilidade.

Aqui está uma lista das menores e mais comuns resoluções para cada categoria de densidade:

• xlarge (xhdpi): 640x960
• grande (hdpi): 480 x 800
• médio (mdpi): 320x480
• pequeno (ldpi): 240x320

Portanto, projete quatro telas iniciais nas resoluções acima, expanda as imagens, colocando uma borda transparente de 1px ao redor da tela e marque quais linhas / colunas serão esticáveis. Lembre-se de que essas imagens serão usadas para QUALQUER dispositivo na categoria de densidade; portanto, sua imagem ldpi (240 x 320) pode ser esticada para 1024x600 em um tablet extra grande com densidade de imagem pequena (~ 120 dpi). Portanto, o 9-patch é a melhor solução para o alongamento, desde que você não queira uma foto ou gráficos complicados para uma tela inicial (lembre-se dessas limitações ao criar o design).

Novamente, a única maneira de esse alongamento não acontecer é projetar uma tela a cada resolução (ou uma para cada combinação de densidade de resolução, se você quiser evitar que as imagens fiquem muito pequenas / grandes em dispositivos de alta / baixa densidade) ou informar a imagem para não esticar e exibir uma cor de fundo onde quer que ocorra o esticamento (lembre-se de que uma cor específica renderizada pelo mecanismo Android provavelmente parecerá diferente da mesma cor específica renderizada pelo photoshop, devido a perfis de cores).

Espero que isso faça algum sentido. Boa sorte!

MODO RETRATO

O MDPI é 320x480 dp = 320x480px (1x)

O LDPI é 0,75 x MDPI = 240x360px

HDPI é 1,5 x MDPI = 480x720px

XHDPI é 2 x MDPI = 640x960px

XXHDPI é 3 x MDPI = 960x1440px

XXXHDPI é 4 x MDPI = 1280x1920px

MODO PAISAGEM

O MDPI é 480x320 dp = 480x320px (1x)

O LDPI é 0,75 x MDPI = 360x240px

HDPI é 1,5 x MDPI = 720x480px

XHDPI é 2 x MDPI = 960x640px

XXHDPI é 3 x MDPI = 1440x960px

XXXHDPI é 4 x MDPI = 1920x1280px

EDITAR:

Eu sugiro usar Lottie para a tela inicial se você estiver lendo isso em 2019+

RETRATO

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PANORAMA

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Eu procurei a melhor e mais simples resposta para criar uma imagem de 9 patches. Agora, fazer a imagem do 9 patch é a tarefa mais fácil.

Em https://romannurik.github.io/AndroidAssetStudio/index.html, você pode criar uma imagem de 9 patches para todas as resoluções - XHDPI, HDPI, MDPI, LDPI com apenas um clique.

Usar PNG não é uma boa ideia. Na verdade, é caro no que diz respeito ao desempenho. Você pode usar arquivos XML desenháveis, por exemplo, o plano de fundo do Facebook .

Isso ajudará você a suavizar e acelerar seu desempenho e, para o logotipo, usar imagens de patch .9.

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

Algum tempo atrás, eu criei um arquivo do Excel com dimensões suportadas
Espero que isso seja útil para alguém

Para ser sincero, perdi a idéia, mas refere-se a outro recurso da tela como tamanho (não apenas densidade)
https://developer.android.com/guide/practices/screens_support.html
Por favor, informe-me se houver algum erro

Link1: Dimensions.xlsx

Link2: dimension.xlsx

No meu caso, usei list drawable em style.xml. Com a lista de camadas desenhável, você só precisa de um png para todos os tamanhos de tela.

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

e flash_screen.xml na pasta 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" é um arquivo png na pasta drawable. Eu espero que isso ajude.

** Se você estiver procurando detalhes da tela para todos os tipos de dispositivos principais **

vá para material.io

Solução editada que fará com que seu SplashScreen fique ótimo em todas as APIs, incluindo API21 a API23

Se você está segmentando apenas APIs24 +, pode simplesmente reduzir o seu desenho vetorial diretamente em seu arquivo xml da seguinte forma:

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

no código acima, estou redimensionando um drawable que desenhei em uma tela de 640x640 para 240x240. então eu apenas coloco na minha tela inicial assim e funciona muito bem:

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

meu código é, na verdade, apenas desenhando o triângulo na figura na parte inferior, mas aqui você vê o que pode conseguir com isso. Finalmente, a resolução é ótima, em oposição às bordas pixeladas que eu estava obtendo ao usar o bitmap. portanto, use um vetor desenhável de todos os modos (existe um site chamado vectr que eu usei para criar o meu sem a necessidade de baixar softwares especializados).

EDIT para fazê-lo funcionar também na API21-22-23

Enquanto a solução acima funciona para dispositivos executando API24 +, fiquei muito decepcionada depois de instalar meu aplicativo em um dispositivo executando API22. Percebi que a tela inicial estava novamente tentando preencher toda a exibição e parecendo uma merda. Depois de arrancar minhas sobrancelhas por meio dia, finalmente forcei uma solução com pura força de vontade.

você precisa criar um segundo arquivo chamado exatamente como o splashscreen xml (digamos splash_screen.xml) e colocá-lo em 2 pastas denominadas drawable-v22 e drawable-v21 que você criará na pasta res / (para vê-los você é necessário alterar a visualização do projeto do Android para o Project). Isso serve para dizer ao seu telefone para redirecionar para arquivos colocados nessas pastas sempre que o dispositivo relevante executa uma API correspondente ao sufixo -vXX na pasta extraível, consulte este link . coloque o seguinte código na lista Camada do arquivo splash_screen.xml criado nessas pastas:

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

Por algum motivo para essas APIs, você precisa agrupar seu drawable em um bitmap para fazê-lo funcionar e exibir o resultado final com a mesma aparência. O problema é que você deve usar a abordagem com as pastas extraíveis, pois a segunda versão do arquivo splash_screen.xml fará com que a tela inicial não seja exibida em dispositivos com APIs maiores que 23. Você também pode precisar colocar a primeira versão do splash_screen.xml no drawable-v24, já que o Android usa como padrão a pasta drawable-vXX mais próxima possível de encontrar recursos. espero que isto ajude

Com base nesta resposta de Lucas Cerro , calculei as dimensões usando as proporções nos documentos do Android , usando a linha de base na resposta. Espero que isso ajude alguém a entrar neste post!

• xxxlarge (xxxhdpi): 1280x1920 (4,0x)
• xxlarge (xxhdpi): 960x1440 (3,0x)
• xlarge (xhdpi): 640x960 (2,0x)
• grande (hdpi): 480x800 (1,5x)
• médio (mdpi): 320x480 (linha de base 1.0x)
• pequeno (ldpi): 240x320 (0,75x)