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
, hdpi
e 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?
214
Respostas:
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:
Leia a introdução da imagem com 9 correções no Guia do desenvolvedor do Android
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:
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
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:
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!
fonte
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+
fonte
RETRATO
LDPI: 200x320px
MDPI: 320x480px
HDPI: 480x800px
XHDPI: 720px1280px
PANORAMA
LDPI: 320x200px
MDPI: 480x320px
HDPI: 800x480px
XHDPI: 1280x720px
fonte
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.
fonte
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.
fonte
fonte
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
fonte
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.
e flash_screen.xml na pasta drawable.
"background_noizi" é um arquivo png na pasta drawable. Eu espero que isso ajude.
fonte
** Se você estiver procurando detalhes da tela para todos os tipos de dispositivos principais **
vá para material.io
fonte
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:
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:
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:
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
fonte
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!
fonte