Criando Splash Screen – Xamarin.Forms

Hoje irei demonstrar como criar uma Splash Screen, que nada mais é do que aquela tela que aparece quando abrimos um app. A ideia da Splash Screen é que ela seja apresentada enquanto nosso app está sendo inicializado.

Porém, uma Splash Screen pode ser o cartão de visitas do nosso aplicativo, seguindo aquele velho ditado: “A primeira impressão é a que fica”.  Assim, conseguimos entender a importância de termos uma Splash Screen bem feita.

Sem mais delongas, vamos para a demo

Partiremos do princípio que você já criou uma aplicação Xamarin.Forms, caso você possua alguma dúvida sobre isso, aconselho ler o post: Criando um projeto Xamarin.Forms “

A Splash Screen por ser uma tela que será apresentada enquanto nossa aplicação está sendo carregada, deve ser implementada para cada plataforma. Dessa forma não poderemos cria-lá no nosso projeto Portable / Shared.

Android

Criar a Splash Screen no android, acredito que dentre as 3 plataformas que iremos abordar nesse post, será a mais complicada.

O primeiro passo é criar uma imagem, para ser exibida em sua Splash Screen, eu recomendo PNG ou JPG. Para este exemplo essa é a imagem criada:

MySplash

 

Em seguida é preciso adicionar essa imagem em seu projeto. Em aplicações Android as imagens são armazenadas na pasta Resources e separadas em subpastas por tamanho e densidades.  Para mais informações sobre em qual pasta deve ser colocada suas imagens leia o post: Adicionando imagens em projeto Android – Xamarin
Arraste o arquivo da imagem para o projeto .Droid na pasta Resources e na respectiva drawable de acordo com o tamanho e a densidade da imagem.

resources

 

O passo seguinte é configurar o arquivo “styles.xml” do projeto .Droid, esse arquivo encontra-se no seguinte caminho: Resources -> values -> styles.xml.

styles

 

Insira o seguinte trecho de código em seu arquivo styles.xml, observe que ele precisa estar dentro de “resources”:

stylecode

 

O próximo passo é criar uma Activity em seu projeto android, nesse exemplo chamei de “SplashActivity.cs”. Para criar a Activity é preciso em cima do projeto .Droid clicar com o botão direito, “Add -> New Item” como demonstrado na imagem a seguir:

addActivity

 

Em seguida selecione “Activity” e coloque um nome em sua Activity.

add

 

Abaixo segue o código usado na “SplashActivity.cs”:

activitycode

 

E por último abra o arquivo MainActivity.cs e mude a propriedade MainLauncher para false. Feito isso, sua  Splash Screen está pronta em seu projeto android.

 

splashandroid

iOS

Você verá o quanto é mais simples criar uma Splash Screen para a plataforma iOS,  levando em consideração o trabalho levado para criar na plataforma android.

Abra o arquivo “Properties” que se encontra dentro do projeto .iOS, selecione a opção “iOS Application” e deixe o campo “Launch Storyboard” vazio, como demonstrado na imagem abaixo.

ios1.1.1

 

Em seguida na seção “Universal Icons” adicione suas imagens para a Splash Screen.

ios1

 

É possível observar na imagem acima 2 subseções de “Universal Icons”, sendo elas “iPhone Launch Images” e “iPad Launch Images”, serão onde você vai adicionar suas imagens. Também é possível observar a necessidade de em cada um dos elementos adicionar uma imagem de acordo com a resolução requerida.

Segue uma lista com as resoluções:

iPhone Launch Images

320×480
640×960
640×1136

iPad Launch Images

768×1004
1024×768
1536×2008
2048×1496

Para adicionar as imagens é muito simples, apenas clique em cada elemento e selecione a imagem que se encontra salva em seu computador.
Não precise se preocupar com os nomes das imagens, apenas quando esta adicionando as imagens diretamente na pasta resources precisará se preocupar com isso, neste caso ele ira gerar na pasta resources, porém as imagens já estarão com os nomes corretos.

No final terá o seguinte resultado:

ios2

 

Feito isso, salve o arquivo Properties e execute o projeto. Vale ressaltar que é necessário possuir um Mac para a execução do projeto. Neste exemplo foi usado um Mac conectado na rede. Segue abaixo o print com o resultado final.

Captura de Tela 2017-04-05 às 13.55.46

Windows Phone

Para criar a Splash Screen para a plataforma Windows Phone, o processo é bem parecido com o da plataforma iOS.

Abra o arquivo “Package.appxmanifest” que se encontra dentro de do projeto .WinPhone, selecione a opção “Visual Assets” e “Splash Screen”, como demonstrado na imagem a seguir:

win1

 

Observe que os elementos para adicionar suas imagens possuem abaixo suas respectivas restrições de tamanho. Sendo elas: 1152 x 1920 px, 672 x 1120 px e 480 x 800px.
Adicione as imagens clicando no botão “…” de cada elemento e terá o seguinte resultado:
win2

 

Em seguida salve seu arquivo “Package.appxmanifest” e execute seu projeto .WinPhone, segue abaixo o print com o resultado final.

splashWin

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

11 comentários em “Criando Splash Screen – Xamarin.Forms

  1. Muito boa a explicação. Bem claro e simples, valeu. Um comentário, sempre que for criada uma nova Activity, a opção “MainLauncher” deve ser igual a false, caso contrário, quando o aplicativo for executado no celular, será criado mais de um atalho, ou seja, um para cada Activity que foi criada.

    [Activity(Label = “SplashScreen”, MainLauncher = false, NoHistory = true]

    Outro detalhe, o Label refere-se ao texto que será exibido embaixo do ícone no device, sendo 1 Label para cada Activity.

    Curtir

    1. Obrigado Miguel, a ideia é realmente essa, posts menores e objetivos.
      Ótima questão, acredito que o “MainLauncher = false” que você está se referindo , seja o da MainActivity. No post eu apenas demonstrei o código da minha SplashActivity.

      Curtir

  2. Muito bom o post. Somente uma duvida: Estou usando o visual studio 2015 enterprise e não estou achando a opção “IOS Application” no menu.
    Pode ajudar?
    Grato.

    Curtir

    1. Olá Denis,

      Obrigado.

      Você não está encontrando, porque após a data que escrevi esse post, ocorreram algumas mudanças. Para você definir a Splash Screen no iOS, procure por Asset Catalogs e caso não exista, adicione um novo e adicione as imagens no LauchImages dentro do Asset Catalogs.

      Curtir

  3. Parabéns pelo post. Muito bom…fiz aqui e funcionou.
    Simples e objetivo.
    No Android, ele automaticamente estica a imagem pra preencher a tela toda.
    Se eu quiser colocar ícone do app no meio da tela centralizado, como fazer ?

    Curtir

      1. Muito obrigado pela resposta. Funcionou, mas a o android:color e o tileMode ta dando erro por não ter sido declarado. Preciso tirar eles pra funcionar…
        O problema é que a tela fica com fundo preto e o icone no meio…consigo alterar esse fundo ?

        Curtir

  4. Olá Juliano… parabéns pelo post… Fiz o exemplo e não funcionou… A impressão que dá é que a SplashActivity não é chamada… Estou usando o Xamarin Live Player… Você tem alguma idéia do que pode ser? Antecipadamente Muito obrigado!!!

    Curtir

  5. Juliano, pode esquecer minha dúvida acima… O Xamarin Live Player não mostra a SplashScreen… Instalei o Vysor, espelhando meu celular, e tudo funcionou perfeitamente…

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s