fala Mestres beleza no vídeo de hoje nós vamos alterar a nossa Splash screen e também o ícone do nosso app usando aqui o Expo tá então antes da gente ir pro vídeo Eu gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também acompanha a gente nas redes sociais os links estarão todos aí na descrição meu nome é jancer eu sou desenvolvedor aqui na Mestres e bora lá para mais um conteúdo [Música] bom então eu estou aqui no figma Tá eu vou deixar o link desse figma na descrição esse figma
fo foi criado pela própria pessoal da comunidade do Expo e a gente usa ele como referência para criando o nosso ícone da nossa aplicação tem aqui o adaptative icon que é do Android né E nós temos aqui também a Splash screen que é a tela de Splash né é então ele tem aqui uns previews né que vai ser basicamente o ícone o ícone do do we eu tava mexendo nisso aqui então tá um pouco diferente é a cor de fundo aqui ele tem uma cor de fundo branco isso aqui certo então ele vai dar pra
gente um preview aí aqui dentro do figma de como ficaria o nosso ícone é no o ícone nosso né do do nosso aplicativo uma vez que a gente altera ele e tem aqui também a Splash screen é o exemplo dela então o que que nós vamos fazer nesse figma eu basicamente eu vou usar essas imagens aqui como referência e essas componentes aqui do figmas Elas já estão do tamanho que deve ser né tanto o ícone quanto adaptative ícone quanto a Splash screen Então nós vamos preencher isso aqui com algum ícone aqui eu vou pegar um
ícone aqui do próprio figma eu tenho aqui um plugin que é esse feeder icons a gente pode pegar algum ícone aqui e usar ele como o ícone da nossa aplicação pode ser esse cubo aqui ó o ícone ele é extremamente pequeno né eu vou aumentar ele aqui e eu quero aumentar também um pouco desses vetores né o stroke aqui que seria a largura das Linhas né isso perfeito então com essa cor com com esse ícone aqui eu arrasto ele para dentro da componente do figma E aí quando eu coloco ele aqui ó ele já me
dá um preview né de como ficaria isso então eu vou eu vou seguindo nessa ideia pra gente eu vou arrumar ele aqui né arrumar o tamanho deixa eu posicionar ele no C dentro e mexer aqui na escala eu seguro Alt e shift né PR redimensionar E aí ele vai ficar dentro desse círculo aqui que o o Expo de o pessoal do Expo deixou aqui como referência tá então eu vou pegar esse ícone Cadê o ícone selecionar o ícone todo né eu seguro o alt e arrasto para duplicar eu aqui dupliquei a mais né eu só
quero duplicar o ícone em si Então as componentes explicando aqui um pouquinho de figma né est meendo no figma essas esses elementos roos que nós temos aqui é uma componente e a componente a gente pode replicar ela em vários lugares e a dentro da componente eu posso adicionar eu posso adicionar coisas né que seria elementos vetores Enfim eu posso adicionar o que eu quiser então dentro da componente isso aqui tá errado não tá certo não eh eu tenho aqui os vetores né do os vetores que fazem parte desse meu ícone só que esses vetores deveriam
estar dentro de uma outra componente né porque eu não quero arrastar um vetor individual eu quero arrastar o ícone inteiro hum e provavelmente foi eu que baguncei isso aqui né então vamos fazer o seguinte olha aqui ó ó o erro aqui esse code sandbox é o frame a gente chama de frame que é o quadrado que vai ter dentro deles desse frame o ícone então eu baguncei as coisas aqui vamos vamos desfazer aqui ó dar um cont control Z eu quero voltar lá para quando eu importei o aqui pronto selecionei os vetores aumentei a espessura
agora eu vou selecionar o Code sandbox que é o ícone inteiro e v arrastar para dentro desse dessa componente do fig vou centralizar ele aqui e agora sim code sandbox eu posso redimensionar ele agora foi e agora eu vou pegar esse code sandbox seguro o alt e arrasto para criar uma cópia né que eu vou criar aqui o meu o meu ícone adaptativo ele é um pouco menor e é isso tá sempre usando a referência e eu vou criar também um cópia desse carinha aqui do Code S Box que é o nome do ícone né
aqui para minha Splash screen e vou redimensionar Dá para ver que eu não me dou bem com o design né mas tudo bem aqui eu vou diminuir a espessura para não ficar tão espessa as linhas aqui dos vetores e perfeito temos aí as nossas três telas é os três ícones de referência aqui a gente poderia e a gente poderia Vou deixa eu pensar que a gente pode trocar a cor né botar uma cor de fundo e para trocar essa cor de fundo eu tô procurando aqui o verde da Mestres pronto achei então o que que
eu vou fazer dentro dessa componente que o figma me deu de referência tem aqui Um background que seria essa imagem aqui que a gente usou como referência né Eu não quero ela então vou deixar ela invisível Se bem que eu acho que eu nem preciso eu clico no ícone né na componente ícone que é o ícone em si e aqui na direita nós temos aqui esse fio né que é para preencher eu vou preencher ele com essa cor aqui que é o verde da Mestres é eu vou precisar ocultar assim e aqui o background eu
oculto então eu vou ficar aqui com o meu ícone o fundo verde e ã o fundo verde e o ícone tá em preto e eu vou fazer a mesma coisa aqui pro meu adaptative icon né o preencher aqui eu vou preencher o ícone adaptativo com o verde e vou ocultar essas imagens de referência e na Splash screen também então a Splash screen vai ser preenchida de verde e eu vou ocultar o background certo e então aqui ele já me dá o preview né de como que vai ficar o ícone do aplicativo depois de instalado é
e as Splash screen que é as telas de carregamento e aí uma vez que isso aqui tá criado o que que eu posso fazer o que que eu tenho que fazer né eu clico na componente que no caso aqui é o ícone e aqui na barra direita eu tenho a opção de exportar tá então eu vou exportar isso aqui no formato png ele vai abrir aqui para mim salvar eu vou salvar os tr eu vou salvar na área de trabalho pra gente pegar esse esses ícones depois salvar o ícone salvo o meu adaptative icon e
vou salvar também a minha Splash screen então tá Os Três Salvados salvos se eu venho aqui pra minha área de trabalho tá aqui os três então eu vou copiar eles e vou no meu projeto tá o meu projeto tá aberto aqui e no projeto nós temos aqui no diretório assets esses arquivos né que são com com os formatos padrões que já vem no projeto n que o Expo já cria o projeto então eu vou clicar aqui no meu diretório assets ó e vou revelar a no explorador de arquivos e ele vai aparecer aqui para mim
no meu no meu explorador de arquivos né tá aqui os três arquivos esse F icon esse ícone ele é para web aquele ícone que aparece do L na aba do browser caso a gente esteja usando o Expo web né que não é o caso mas o que eu vou basicamente fazer é colar ele vai pedir aqui para substituir os ícones então eu basicamente os arquivos né eu já tinha os arquivos aqui eu só substituí pelos novos arquivos né com com o novo conteúdo e é isso tá então se eu abro aqui agora o nosso app.
json a gente pode ver que já tá configurado né o o ícone para usar aquele arquivo né esse assets esse arquivo icon.png na Splash screen tá configurado para usar a imagem e isso né tem aqui também configurado o ícone adaptativo né pro Android e nós temos aqui esse background color que é uma cor de fundo a gente vai ver isso aqui depois a gente troca esse valor vamos deixar branco mesmo então a gente substitui os arquivos e aqui eu vou rodar o projeto npm start e vou botar para buildar no Android pressiono a aqui ele
vai carregar o meu emulador meu emulador já tá aberto aqui e aqui ele já vai carregar e olha aí ó nós já temos a nossa a nossa Splash screen Dá para ver que tá com uma borda Branca né Essa borda esse fundo branco é esse background color né Por quê Porque a nossa imagem essa Splash screen ela tem o formato ela tem uma resolução aqui Mas dependendo do celular que eu abrir esse aplicativo Pode ser que o celular tenha as bordas maiores menores E aí a gente vai tem que ter vai tem que ter uma
cor de fundo para que vai ser a mesma cor de fundo da Splash screen para que tudo fique da mesma cor né na Splash screen a gente costuma colocar mais o ícone do aplicativo eh dificilmente a gente vai colocar um texto ou alguma coisa do tipo porque pode ser que haja essa certa distorção aí ou que ele não fique legal não fique Centralizado Eh mas você pode estar adicionando aí na imagem o que você quiser e tem uma uma API mais avançada do do Android do iOS pra gente criar umas Splash screens animadas que é
um negócio bem mais avançado mas a gente consegue fazer também e e vários aplicativos muito populares tem Tem essa implementação da Splash screen quando a gente Abre o aplicativo né tem ali uma certa animação é é algo bem interessante e a gente consegue fazer isso também mas nesse exemplo aqui a nossa Splash screen ela é estática tá então o que que eu vou fazer vou voltar aqui no meu App Jason e definir essa cor de fundo Como qual cor cadê cadê a cor né é a cor da Mestres copiar aqui o verde esse carinha aqui
esse exra decimal vou substituir nos dois na Splash também no ícone adaptativo do Android a gente salva isso aqui vou voltar no emulador deixa eu dar um Reload aqui ó pressiono R duas vezes e a gente já viu que as bordas sumiram tá como nós estamos usando xog para desenvolvimento o aplicativo ele não tá instalado ainda no Android né tá tá tudo dentro do Expo go ainda mas a gente já pode ver que o ícone aqui dentro do Expo go já foi substituído também que é o nosso ícone na verdade não não trocou née tá
usando Cash aí esse esse primeiro esse ícone aqui esse ícone que tá diferente foi dos Testes que eu estava fazendo mas eh deixa eu limpar aqui e dar um Reload não consigo dar Reload vou pedir para abrir no Android para ele carregar de novo deixa eu voltar aqui no Expo go não está mais aqui beleza expa tudo bem mas vocês viram que e o ícone ele foi trocado quando eu quando eu deixa eu abrir aqui de novo no Android quando eu pressiono aqui para e Navegar voltar as abas a gente pode ver que ali em
cima também o ícone tá já tá o ícone adaptativo né que é é esse carinha aqui que é também específico do Android então a gente já consegue fazer isso já tá tudo funcionando eh e nas implementações mais avançadas a gente pode estar explorando isso aí nos vídeos futuros Beleza então para essa aula aqui é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo que é isso aí muito obrigado e até a próxima [Música]
