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!
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…
O que é SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos…
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!