Gerar Splash Full Screen em Aplicativos Android com Delphi.

 Quem não fica incomodado com aquela tela  preta do splash gerada em um aplicativo Android  feito com Delphi!
screenshot_20180310-2203381
Hoje decidi estudar esse assunto e fazer o meu aplicativo ficar com a tela de splash com a aparência que eu queria:
  1. Exibir o splash com a tela cheia;
  2. Exibir o splash sem distorção e;
  3. Deixar o fundo da aplicação Android com as cores do meu PNG!
durante a pesquisa eu aprendi a usar um recurso chamado 9-path e Adorei o resultado!
Comecei estudando a documentação da Embarcadero e no help encontrei  a documentação Application_Options.  Lá descreve como devemos configurar as imagens dos Ícones e do splash respeitando o tamanho de cada um dos campos da aba Artwork :

Launcher Icons

Field Description
Launcher icon (36×36 ldpi) Icon representing your application.
(This is the icon that your users can place on their Home screen, and tap to start your application.)
Launcher icon (48×48 mdpi)
Launcher icon (72×72 hdpi)
Launcher icon (96×96 xhdpi)
Launcher icon (144×144 xxhdpi)

Splash Images

Field Description
Splash image (426×320 small) Splash images for your application.
(These are the images that will be displayed while your application is opening. You can specify either a single image or several different-sized images. To minimize rescaling, use either one multi-res bitmap or several different-sized images.)
Splash image (470×320 normal)
Splash image (640×480 large)
Splash image (960×720 xlarge)
Nesse mesmo artigo Application_Options a  uma citação de uma extensão diferente usada pelo SDK do Android, o 9-path ou  9.png.  Ao estudar descobri que esse tipo de arquivo serve para fazermos images de background que ao serem redimensionadas não distorcem a imagem, é um programa java simples de entender  e é muito legal.  Onde o resultado final é uma imagem que pode ser esticada sem perder a sua qualidade.
Então eu montei as 9 imagens necessáris para o processo:
  • Cinco imagens .png para os ícones e;
  • Quatro  imagens processadas com a extensão .9.png.

Como criar uma imagem 9-patchs

Para criar uma imagem de 9-patch , você pode usar a ferramenta draw9patch disponível em C:\Users\Public\Documents\Embarcadero\Studio\19.0\CatalogRepository\AndroidSDK-\tools\draw9patch.bat. Você pode usar .pngimagens padrão e convertê-las para .9.png. Para criar uma imagem de 9 patch para a tela inicial do seu aplicativo Android, siga estas etapas:

  1. Abrir ferramenta draw9patch disponível em C:\Users\Public\Documents\Embarcadero\Studio\19.0\CatalogRepository\AndroidSDK-\tools\draw9patch.bat .
  2. Carregue uma .pngimagem png ja com o tamanho esperado pelo splash do Android, usando File> Open 9-patch … ou arraste e solte a imagem.
    Nota: Converter um .pngpara um .9.png adiciona uma área extra de pixel imagens sejam salvas com 4 pixels extras (2 horizontalmente e 2 verticalmente). Tenha isso em mente crie imagens.png com 4 pixels a menos para serem convertidas. em 9-patch . 
    Mas se a imagem for do tipo .9.png nenhuma pixels extras será adicionado a imagem.
  3. Quando a imagem é carregada na ferramenta draw9patch , o painel esquerdo é a área desenhável e exibe a imagem que você está editando, o painel direito exibe uma visualização de como a imagem se parece uma vez esticada.
  4. Para definir a área extensível, clique nas linhas superior e esquerda de um pixel e pinte os pixels onde a imagem pode ser esticada.
  5. Para definir a caixa de preenchimento no RAD Studio, é importante que você pinte todas as linhas de fundo e linhas inteiras de um pixel para indicar que toda a área é desenhável.
    Aviso: assegure-se de preencher todas as linhas de fundo e direita de um pixel inteiro ao criar a imagem do patch 9 . Caso contrário, o formulário do seu aplicativo pode não ser exibido corretamente.
  6. Depois de definir a área extensível e a caixa de preenchimento , clique em Arquivo> Salvar 9 patch … para salvar sua imagem de 9 patch que seja salva com a .9.pngextensão do arquivo
Essa é a lista de imagens preparadas para o meu aplicativo:
2018-03-10

Reparem que a imagem 9.png ficou com uma linha de marcação preta no canto superior esquerdo, as linhas marcam a área pode ser distorcida, e onde não tem marcação nada será distorcido.

Agora vamos fazer o processo funcionar no Delphi:

  1. Crie um novo aplicativo Firemonkey (File > New > Multi-Device App) ou carregue um projeto que você já possui.
  2. Selecione Android como plataforma de destino
  3. Vá em Project> Options  e, em seguida, Application.
    então adicione todos os icones criados e as imagens do splash

    2018-03-10 (1)
  4. Existem duas maneias de fazer o splash,
    1. Primeiro Método, foi esse que implementei:

      vá para project>Deploy e desmarque: splash_image_def.xml

      Mude o nome de cada imagem Nome Remoto para splash_image_def.9.png igual a imagem abaixo,  Você deve fazer isso apenas para as imagens da tela inicial.

      deployment
    2. Segundo Método – Não foi testado:

      Esse método consiste em criar um novo splash_image_def.xmlarquivo.

      Depois de seguir todas as etapas anteriores :

      1. Altere o Nome Remoto de todas as imagens de splash de splash_image.png para splash_image.9.png .
      2. Crie um novo arquivo XML com o conteúdo abaixo:
        <? xml  version = "1.0"  encoding = "utf-8" ?> 
        
        xmlns: android = "http://schemas.android.com/apk/res/android" 
        android: src = "@ drawable / splash_image " 
        android: dither = " true " />
        Nota: Certifique-se de que a conversão EOL (Final da linha) do documento XML esteja configurada em formato UNIX / OSX. O EOL deve ser apenas LF (Line Feed, ‘\ n’) e não CR LF (Carriage Return, Line Feed, ‘\ r \ n’).
      3. Adicione o documento XML ao Gerenciador de implantação (clique DMgrAddFiles.png).
      4. No documento XML recém-adicionado, mudar o nome remoto para splash_image_def.xmleo caminho remoto para res\drawable\.
  5. Agora você pode executar o projeto em seu dispositivo Android ou simulador para ver a imagem do splash 9-patch funcionando:

screenshot_20180310-2213191

 

Baixe aqui o código fonte com os exemplos:

Abraços e até a próxima

Links:
http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Application_Options

http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Using_9-patch_Images_in_Android

3 comentários em “Gerar Splash Full Screen em Aplicativos Android com Delphi.

Adicione o seu

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 )

Conectando a %s

WordPress.com.

Acima ↑

%d blogueiros gostam disto: