tamanhos de tela inicial do Android para displays ldpi, mdpi, hdpi, xhdpi? - por exemplo: 1024X768 pixels para ldpi

Eu tenho que projetar telas iniciais (imagens que cabem na tela durante o carregamento) para aplicativos Android usando o phonegap. Tenho que projetar imagens de 4 tamanhos que se ajustem a 4 tipos de telas como ldpi, mdpi, hdpi, xhdpi. Alguém pode me dizer os tamanhos exatos em pixels para essas telas para que eu possa projetar nesse tamanho?

Resposta de exemplo:

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

Pode haver qualquer número de tamanhos de tela diferentes devido ao Android não ter um tamanho padrão definido, portanto, como um guia, você pode usar os tamanhos de tela mínimos, que são fornecidos pelo Google.

De acordo com as estatísticas do Google, a maioria dos monitores ldpi são telas pequenas e a maioria dos monitores mdpi, hdpi, xhdpi e xxhdpi são telas de tamanho normal.

• telas xlarge têm pelo menos 960 dp x 720 dp
• telas grandes têm pelo menos 640 dp x 480 dp
• telas normais são de pelo menos 470 dp x 320 dp
• telas pequenas têm pelo menos 426 dp x 320 dp

Você pode ver as estatísticas sobre os tamanhos relativos dos dispositivos no painel do Google, que está disponível aqui .

Mais informações sobre várias telas podem ser encontradas aqui .

9 imagem patch

A melhor solução é criar uma imagem de nove remendos para que a borda da imagem possa esticar para caber no tamanho da tela sem afetar a área estática da imagem.

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

Tamanhos de tela inicial para Android

e, ao mesmo tempo, para Cordova (também conhecido como Phonegap), React-Native e todas as outras plataformas de desenvolvimento

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

Nota: A preparação de XXXHDPI não é necessária e também talvez do tamanho XXHDPI por causa das áreas de repetição de imagens de 9 patch. Por outro lado, se apenas tamanhos de retrato forem usados, o tamanho do aplicativo pode ser menor. Mais fotos significam que é necessário mais espaço.

Preste atenção

Acho que não existe um tamanho exato para todos os dispositivos. Eu uso Xperia Z 5" . Se você desenvolver um aplicativo multiplataforma-webview você deve considerar um monte de coisas (se a tela tem botões de navegação das teclas virtuais ou não, etc). Por isso, acho que só há uma solução adequada. A solução é a prepare uma tela inicial de 9 patches (veja o How to design a new splash screencabeçalho abaixo).

1. Crie telas iniciais para os tamanhos de tela acima como 9 patch . Dê nomes aos seus arquivos com sufixos .9.png
2. Adicione as linhas abaixo em seu arquivo config.xml
3. Adicione o plug-in da tela inicial, se necessário.
4. Execute seu projeto.

É isso aí!

Código específico do Cordova
a ser adicionado a linhas no config.xml para telas iniciais de 9 patch

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

Para adicionar linhas ao config.xml ao usar telas iniciais que não sejam de 9 patch

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

Como criar uma nova tela inicial

Eu descreveria uma maneira simples de criar uma tela inicial adequada usando essa maneira. Suponha que estejamos projetando uma tela de 1280dp x 720dp - xhdpi (x-grande). Escrevi a título de exemplo o seguinte;

• No Photoshop: Arquivo -> Novo em uma nova janela de diálogo defina suas telas

  Largura: 720 pixels Altura: 1280 pixels

  Eu acho que os tamanhos acima significam que a resolução é 320 pixels / polegada. Mas, para garantir, você pode alterar o valor da resolução para 320 na janela de diálogo. Neste caso Pixels / Inch = DPI

  Parabéns ... Você tem um modelo de tela inicial de 720dp x 1280dp.

Como gerar uma tela inicial de 9 patch

Depois de projetar sua tela inicial, se quiser projetar a tela inicial de 9 Patches, você deve inserir uma lacuna de 1 pixel para cada lado. Por esse motivo, você deve aumentar a largura e a altura do tamanho da tela em +2 pixels (agora os tamanhos das imagens são 722 x 1282).

Eu deixei a lacuna de 1 pixel em branco em todos os lados conforme indicado a seguir.
Alterando o tamanho da tela usando o Photoshop:
- Abra um arquivo png da tela inicial no Photoshop
- Clique no ícone de cadeado próximo ao nome do 'Plano de Fundo' no campo Camadas (para deixar em branco em vez de outra cor como o branco) se houver abaixo: - Altere o tamanho da tela no menu Imagem (Largura: 720 pixels a 722 pixels e Altura: 1280 pixels a 1282 pixels). Agora, deve haver um intervalo de 1 pixel em cada lado da imagem da tela inicial.



Em seguida, você pode usar C: \ Arquivos de programas (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat para converter um arquivo de 9 patch. Para isso, abra sua tela inicial no app draw9patch. Você deve definir seu logotipo e áreas expansíveis. Observe a linha preta na tela inicial de exemplo a seguir. A espessura da linha preta é de apenas 1 px;) As linhas pretas dos lados esquerdo e superior definem a área de exibição obrigatória da tela inicial. Exatamente como seu projetado. As linhas direita e inferior definem a área adicionável e removível (áreas de repetição automática).

Basta fazer isso: amplie a borda superior da sua imagem no aplicativo draw9patch. Clique e arraste o mouse para desenhar uma linha. E pressione shift + clique e arraste o mouse para apagar a linha.

Se você desenvolver um aplicativo de plataforma cruzada (como Cordova / PhoneGap), poderá encontrar o seguinte endereço de quase todos os tamanhos de tela inicial do mabile OS. Clique para obter os tamanhos de tela inicial do Windows Phone , WebOS , BlackBerry , Bada-WAC e Bada .

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

E se você precisar de tamanhos de ícones de aplicativos IOS, Android etc., você pode visitar aqui .

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

Para dispositivos móveis Android

LDPI- icon-36x36, splash-426x320 (agora com valores corretos)

MDPI- icon-48x48, splash-470x320

HDPI- ícone 72x72, splash- 640x480

XHDPI- icon-96x96, splash- 960x720

XXHDPI- ícone- 144x144

Tudo em pixels.

Para tablets Android

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

• LDPI: Retrato: 200 X 320 px. Paisagem: 320 X 200 px.
• MDPI: Retrato: 320 X 480 px. Paisagem: 480 X 320 px.
• HDPI: Retrato: 480 X 800 px. Paisagem: 800 X 480 px.
• XHDPI: Retrato: 720 X 1280 px. Paisagem: 1280 x 720 px.
• XXHDPI: Retrato: 960 X 1600 px. Paisagem: 1600 x 960 px.
• XXXHDPI: Retrato: 1280 x 1920 px. Paisagem: 1920 x 1280 px.

• As telas Xlarge têm pelo menos 960 dp x 720 dp
• As telas grandes do item da lista têm pelo menos 640 dp x 480 dp
• As telas normais dos itens da lista são de pelo menos 470 dp x 320 dp
• As telas pequenas do item da lista têm pelo menos 426 dp x 320 dp

Use isso para criar suas imagens e colocá-las em uma pasta de recursos específica.

Basta usar este site: http://ticons.fokkezb.nl :)

Isso torna mais fácil para você e gera os tamanhos corretos diretamente

As telas xlarge têm pelo menos 960 dp x 720 dp layout-xlarge 10 "tablet (720x1280 mdpi, 800x1280 mdpi etc.)

telas grandes têm tablet interpolador de pelo menos 640 dp x 480 dp, como o Streak (480 x 800 mdpi), tablet de 7 "(600 x 1024 mdpi)

telas normais têm layout de pelo menos 470 dp x 320 dp tela de telefone típica (480 x 800 hdpi)

telas pequenas têm pelo menos 426 dp x 320 dp de tela de telefone comum (240 x 320 ldpi, 320 x 480 mdpi etc.)