Para deixar seu aplicativo mais profissional ainda, sabia que colocar uma tela de carregamento, a famosa (Splash Screen) torna o visual ainda mais intuitivo? Não só isso, é bom até mesmo para deixar o usuário mais ansioso para entrar logo no seu sistema.
Neste artigo vou te ensinar o passo a passo de como criar uma Splash Screen do absoluto zero, em seu aplicativo. Vou mostrar geralmente a forma que eu faço dentro dos meus apps.
O que é uma Splash Screen?
Muitas pessoas já devem saber o que é a famosa Splash Screen, mas para quem não conhece ou não faz a menor ideia do que seja, a splash screen é nada mais nada menos, do que uma tela de carregamento.
Sabe quando você entra em alguns aplicativos, por exemplo, WhatsApp, Instagram entre outros. Assim que você entra dentro deles, antes de iniciar o conteúdo do aplicativo, aparece uma tela de carregamento antes, seja com a logo do app ou apenas texto dizendo "carregando" ou "iniciando".
É uma boa prática usar esse sistema dentro do seu aplicativo, até mesmo para deixar o usuário com mais vontade de querer abrir o seu app e também para deixar o conteúdo do seu app carregar por inteiro antes do usuário acessar.
Como criar uma Splash Screen no Sketchware
Mostrarei para vocês a forma que eu crio a minha splash screen dentro dos meus projetos no Sketchware, iremos usar alguns blocos de programação dentro dele, sendo eles, os blocos de "temp" que é o temporizador e blocos de "intent" que funciona para a troca de telas.
Usando a lógica correta, podemos implementar esses dois blocos juntos, para nossa tela de carregamento funcionar tranquilamente. Porém antes de começarmos nossa lógica, vamos montar nossa interface de carregamento.
Para deixar a tela mais organizada, eu gosto de usar sempre os lineares para não deixar os elementos seja texto ou imagem fora de ordem. Então eu puxo um "Linear(H)" para dentro do nosso layout e depois coloco ele para preencher a tela inteira.
Após isso, eu costumo deixar sempre os elementos na tela dos meus apps, todos centralizados, então eu costumo usar o "Gravity" e marcar eles como "center_horizontal" e "center_vertical" para ficar tudo certinho.
Depois que eu fiz tudo isso, já garanti que todos os elementos vão ficar centralizados na tela. Se você perceber meio que isso é um padrão de diversos aplicativos que tem uma splash screen, pois todos eles costumam deixar a logo do aplicativo no centro da tela de carregamento.
Feito tudo isso até aqui, o próximo passo é puxarmos dois "Linear(V)" para dentro do nosso layout, um abaixo do outro. Como colocamos um "Gravity" ele vai centralizar o nosso linear no meio da tela, e depois eu geralmente coloco dois TextViews que são os textos que irão aparecer na tela.
Você pode colocar tanto texto, ou imagem, ou misturar os dois, por exemplo, colocar imagem que seria a logo do seu aplicativo e um texto abaixo escrito "loading", "carregando" ai vai da sua preferência.
No meu caso, vou fazer com dois textos, apenas para teste, o nome "Splash" como mostrado na imagem abaixo, seria o nome do aplicativo, por isso deixei ele com tamanho maior. Já o de baixo seria apenas um texto para indicar pro usuário que o app está inicializando.
Lembrando, esses dois textos que eu coloquei, eles estão dentro da "Linear(V)" para ficarem centralizados na tela do usuário, recomendo fortemente a não deixar eles fora, para não dar bug no seu layout.
Criando a lógica da Splash Screen
Agora sim iremos começar a parte mais legal, vamos colocar a mão na massa, para iniciar nossa lógica, precisaremos de dois componentes no Sketchware, sendo eles, o componente de "time" para definir o tempo que a tela de carregamento ficará aberta, e o "intent" para fazermos a troca de tela.
Quando você cria algum projeto dentro do Sketchware, ele por padrão define que sua tela inicial é a MainActivity, ou seja, e dentro dessa tela que você vai criar toda interface/lógica da sua splash screen.
Entretanto, o usuário não poderá ficar apenas dentro dessa tela, você precisa criar uma outra telinha, para que após a tela de carregamento passar, ele ir para outra tela do seu aplicativo, e para fazer isso basta criar uma outra activity.
Para criar essa outra activity, assim que você estiver no layout do seu projeto, na parte de baixo terá o nome da sua tela, que vai ser a "main", é só você clicar nela, que irá abrir uma interface, e um botão de "+", só clicar nesse botão, inserir um nome para essa tela e clicar em adicionar.
Feito isso, agora sim podemos prosseguir, com suas duas telinhas já feitas, vamos adicionar os dois componentes que citei acima, para entrar na aba de componentes no Sketchware, na parte de cima, você vai estar na "View" só basta arrastar para o lado até chegar em "Component".
Assim que entrar na aba de "Component" terá um botão de "+" para você adicionar um component para determinada tela, você precisa inserir os componentes que eu mencionei acima, o "Timer" e o "Intent". Como mostrado na imagem.
Lógica dos blocos para a Splash Screen
Depois de ter adicionado os dois componentes, volte uma aba, que você vai cair em "Event" é dentro daqui que iremos deixar nossa splash screen funcional. Estando dentro da tela main e dentro da aba event, vai aparecer a "OnCreate".
Clique sobre o "OnCreate" e depois você precisará abrir o menu de blocos e selecionar por "component" ele vai estar em azul, estando dentro desse menuzinho na aba component, você precisa arrastar o bloco de "timer" e o de "intent".
Abaixo deixarei para vocês uma imagem mostrando a montagem correta dos blocos, para funcionar corretamente no seu aplicativo, é essa lógica que eu uso em todos os meus projetos e sempre da certo.
Como na imagem acima, ali onde está o "timer after 3000ms" você vai definir o tempo que a splash screen vai ficar aberta, lembrando que o tempo é contado em milisegundos(ms) ou seja, 3 segundos é igual a 3000, 4 segundos é igual a 4000 e assim por diante.
Basta definir o tempo que quiser, recomendo não ser muito longo até para o usuário não se irritar e acabar fechando o seu app, coloque sempre um tempo meio termo, nem tão longo mais também nem tão rápido.
Dentro do bloco de timer você puxa um bloco de intenção o famoso Intent, é dentro desse bloco que vamos fazer a troca de telas, ou seja, ali onde está "intent set Screen context", dentro de "context" você defini a tela que nós criamos lá no comecinho, lembra? Nossa tela dois.
E na abinha que aparece antes do "setScreen" você apenas clica e seleciona o nome que colocou ao component de Intent quando você o adicionou.
Seguindo tudo isso que eu expliquei e organizando os blocos da forma que eu deixei na imagem para vocês, basicamente você tem um splash screen totalmente funcional.
Conclusão
Seguindo essa dica, você vai conseguir fazer uma Splash Screen para dentro do seu aplicativo, se gostou desse conteúdo, compartilhe para mais desenvolvedores.