Depois que você começa a brincar um pouco mais com Ionic, a necessidade de deixar o App mais bonitinho vai aparecendo. Se você ja gerou o apk do seu aplicativo, deve ter se perguntado como altera a Splash Screen e o ícone do seu App…
Splash Screen é a tela de carregamento inicial do seu App, portanto uma das primeiras impressões que o usuário vai ter do seu App.
Cada celular dispositivo tem dimensões diferentes e portanto deve ter um splash Screen diferente.
O Ionic tem uma solução bem interessante para isso, mas primeiro vamos encontrar o local da Splash Screen dentro dos diretórios do seu App.
Dentro da pasta do seu projeto acesse a pasta resources. Nela já vem uma imagem padrão para a Splash Screen e para o ícone.
Prefere aprender em vídeo?
Como cada plataforma tem diferentes requisitos para as imagens de Splash Screen e ícone, é melhor fazer uma imagem com o maior tamanho necessário e deixar o o Ionic fazer o resto.
Na documentação do Ionic, tem um PSD template para a Splash Screen.
Mas, para te ajudar eu já criei uma Splash Screen com as medidas certas que você pode baixar aqui.
Delete a imagem splash.png que está dentro da pasta resources do seu projeto. Depois coloque a que você quer usar com o mesmo nome (também poderia ser uma splash.psd ou splash.ai).
No prompt de comando, navegue até a pasta do seu projeto. Depois digite o seguinte comando:
ionic resources --splash
Para as versões mais recentes do Ionic utilize o seguinte comando:
ionic cordova resources --splash
Você precisa de internet. Ele vai fazer upload do seu arquivo, gerar uma para cada tamanho necessário e já colocar dentro da pasta. Demais não é?
Para testar, você deve estar usando um emulador ou rodando no próprio celular.
Para mudar o ícone o processo é praticamente igual ao da Splash Screen Ionic. Você pode baixar aqui o template da própria documentação do Ionic, ou baixar o meu ícone já pronto.
Depois vamos lá na pasta resources de novo, deletamos o arquivo icon.png e colocamos o que acabamos de baixar.
Mais uma vez no prompt, digite o comando:
ionic resources --icon
Para as versões mais recentes do Ionic utilize o seguinte comando:
ionic cordova resources --icon
Curtiu? Mole né? Em breve uma série de Ionic com apps completos do início ao fim!
Aproveita e curte minha página, para ver os posts em primeira mão!
Muitas vezes Javascript é motivo de piadas/memes de alguém dizendo que o funcionamento do Javascript…
Desvendando o Potencial da Blockchain e Criptomoedas através da Criptografia Em um mundo onde a…
O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na…
Satellite 2020 foi a primeira conferência virtual do Github. O Github já tinha sido liberado…
Neste guia veremos o que são web components, quando usar, sua estrutura e também um…
A alguns anos atrás escrevi um texto sobre o que é o frontend, também palestrei…
View Comments
Valeu me ajudou! agora tenho uma duvida, no meu app coloquei uma imagem na tela de login, porém quando rodei no dispositivo [ ionic run android --device ] ele abriu sem a imagem, sabe o que poderia ser?
grato
Olá Junior, está usando Ionic 1 ou Ionic 2? Caso seja o Ionic 2, em qual pasta você colocou o arquivo da imagem, e como chamou no seu HTML ou CSS?
Olá @disqus_kf3Pol9CMf:disqus por via das dúvidas, antes de fazer ionic run, faça ionic build android.
Cara eu fiz aqui mas a imagem não sai certa não, fica com as guias do photoshop e o logo não sai do tamanho certo
Danilo, tem uma camada no Photoshop que você tem que ocultar, servem só pra te ajudar, é a icon-cut-guide. Outro detalhe importante é que você tem que deixar seu ícone bem no meio das guias. Dá uma olhada nessa imagem aqui http://prntscr.com/fcagcj
Se não conseguir, manda e-mail para mim pelo contato@andrefelizardo.com.br que a gente bate um papo e te ajudo melhor.
vlw brother!
Bom dia!
Estou tentando alterar apenas o ícone de notificação, mas até o momento não obtive sucesso. A notificação sempre chega com o mesmo ícone atribuído ao aplicativo. Sabe como faço para especificar qual o ícone que deve ser utilizado na notificação?
Olá Tauan. A notificação que você está utilizando é a notificação uma notificação local ou uma push notification?
boa tarde,
gostaria de saber qual o novo comando que substituiu o 'resources' pois no prompt ele me diz que foi renomeado, gostaria de saber para qual.
obrigado.
Olá @icaro_martins:disqus obrigado pelo comentário.
Você deve estar utilizando Ionic 3, correto?
Tente o seguinte comando: ionic cordova resources android por exemplo.
Olá parabéns pelo post. Eu estou tentando executar no cod ionic Cordova resources e continua com o mesmo erro. Saberia pq?
Olá @disqus_lH4rqefAEC:disqus qual versão do Ionic você está utilizando?
Olá @disqus_lH4rqefAEC:disqus qual versão do Ionic você está utilizando?
Olá, fiz um aplicativo de jogo da memória onde vc pode escolher as cartas de seu jogo, utilizei ionic. Publiquei na Playstore e compartilho com vcs: https://play.google.com/store/apps/details?id=com.i9.memoriav1
Parabéns pelo app Ana!