Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes

8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes

1/13

27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes

http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 1/13

22

Compartilhe

A criação de interfaces de usuários é um problema na hora dedistribuir os aplicativos, afinal são diversos dispositivos,resoluções e telas diferentes. Nesta postagem veremos umexemplo de como construir uma interface simples de uma Telainicial para aplicativo Android com Delphi XE5.

Direto ao ponto

DELPHI

CONSTRUINDO UMA TELA INICIAL PARA

APLICATIVOS ANDROID COM DELPHI XE5AGOSTO 4, 2014 | LANDERSON GOMES | 31 COMENTÁRIOS

Landerson Gomes

http://vivaitaocara.com.br/landersongomes/http://-/?-http://vivaitaocara.com.br/landersongomes/author/landersonhttp://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5http://vivaitaocara.com.br/landersongomes/category/embarcadero/delphi


2/13



Inicie um nova aplicação Delphi Mobile em branco, como já fizemos isso algumas vezes vamos

avançar até a parte da nossa aplicação especificamente. No formulário principal adicione 1 Label

e 1 GridPanelLayout. E para suas propriedades configure como descrito abaixo:

Label1

Align -> alTop

TextAlign -> taCenterText -> Menu Principal

GridPanelLayout1

Align -> alClient

Um pouco sobre o GridPanelLayout

Este componente será responsável por fornecer um layout estilo tabela a nossa tela. Ele trabalha

com coleções de Linhas, Colunas e Controles, e por padrão ele traz já previamente configurados2 pares de linhas e colunas. Veja na imagem abaixo:

Vamos trabalhar para fins didáticos com 2 colunas e 3 linhas, a cada coordenada Linha, Coluna denosso GridPanelLayout estaremos disponibilizando uma função em nossa aplicação.

Definindo a aparência

Selecione os dois TColumnItem e certifique-se que suas propriedade SizeStyle esteja setada como

ssPercent. E à sua propriedade Value vamos atribuir 50, isso fará com que cada uma de nossas

colunas ocupem 50% do GridPanelLayout , que por sua vez ao ser definido como alClient ocupa

toda a largura de tela do dispositivo.


3/13



Agora vamos inserir mais uma linha em nosso GridPanelLayout , para isso clique com o botão

direito sobre RowColection e selecione a opção Add Item.

Vamos efetuar o mesmo procedimento que fizemos com os TColumnItems , ou seja vamos

selecionar todos os TRowItems e alterar suas propriedade SyzeStyle e Value, sendo que a esta

última atribuiremos o valor 33, ou seja, 33% da altura de nosso GridPanelLayout para cada uma

das linhas.

Em seguida adicione 6 TImageControl e adicione uma figura de sua escolha para cada um deles

alterando sua propriedade Bitmap clicando em Bitmap -> Edit , depois Load para carregar o

arquivo de imagem selecionado. Ao final do processo você terá algo muito próximo da imagem

abaixo:


4/13



Explore a criatividade

Para cada ImageControl você deve atribuir uma função no seu evento onClick para que quando o

usuário clique na imagem a função seja chamada. Note ainda que as propriedades de tamanhodas imagens existem e devem ser exploradas por você a medida que sua resolução/tamanho de

tela for aumentado.

A ideia está lançada, agora é só usar de acordo com sua necessidade.

Fonte: Sarina DuPont ‐ Gerente de Produto Embarcadero

31 OPINIÕES SOBRE “CONSTRUINDO UMA TELA INICIAL PARA APLICATIVOS ANDROID

COM DELPHI XE5”

Relacionado:

ANDROID DELPHI DELPHI XE5 DESENVOLVIMENTO TUTORIAL

http://vivaitaocara.com.br/landersongomes/tag/tutorialhttp://vivaitaocara.com.br/landersongomes/tag/desenvolvimentohttp://vivaitaocara.com.br/landersongomes/tag/delphi-xe5http://vivaitaocara.com.br/landersongomes/tag/delphi-2http://vivaitaocara.com.br/landersongomes/tag/androidhttp://blogs.embarcadero.com/sarinadupont/2014/06/16/mobile-user-interface-design-home-screen-navigation/


5/13



AGOSTO 4, 2014 ÀS 19:50

Excelente .. obrigado por compartilhar

AGOSTO 12, 2014 ÀS 20:35

Boa noite Landerson, mais uma vez venho aqui lhe pedir ajuda ! hehehe Cara como faço ou

como devo pesquisar para resolver o seguinte: Diferentes tamanho de telas de dispositivo.

Tablet e celular ? Obrigado pela ajuda.

AGOSTO 13, 2014 ÀS 14:03

Tiago… vou te colocar com a Gerência Nacional de Perguntas Difíceis rsrs.

Brincadeira a parte meu amigo, eu tenho usado postagens da Sarina como referência

principalmente em questões de layout de aplicativos.

Dê uma pesquisada: Sarina DuPont. Tente aí … ela tem muita postagem sobre o assunto.

Abração.

AGOSTO 22, 2014 ÀS 12:00

Caro Landerson,

Tem como mudar a cor de fundo do form para branco ou deixar a imagem transparente?

Abraços.

AGOSTO 22, 2014 ÀS 13:04

Olá… com relação à cor do Formulário vou dar uma olhada, mas acredito sim que é

possível, tendo o resultado dos testes publico algo.

E as imagens, note que você pode carregar PNG, que permite transparência, logo tente o

teste com uma… assim sendo acredito também que funcione.

Abraço.

AGOSTO 26, 2014 ÀS 09:36

João

TIago

Landerson Gomes

Datasoft

Landerson Gomes

Datasoft

https://www.facebook.com/joaocarloscordeirohttp://-/?-http://-/?-http://-/?-http://blogs.embarcadero.com/sarinaduponthttp://-/?-http://-/?-http://-/?-


6/13



Só consegui transparência na imagem com o TImage e o fundo do forma sempre fica na cor

cinza. Se descobrir como mudar a cor do form me avisa.

Abraços.

AGOSTO 26, 2014 ÀS 11:34

Consegui usando o componente StyleBook onde eu posso mudar o background e opções de

transparência para cada objeto visual.

Espero que ajude outras pessoas.

SETEMBRO 5, 2014 ÀS 10:21

Landerson, parabéns pelas postagens !

Sou iniciante em Delphi XE5.

Gostaria de saber se você tem alguma dica onde encontro icones gratuitos p/ utilização no

Android p/ baixar.

SETEMBRO 6, 2014 ÀS 22:46

Olá Carlos… seja muito bem vindo ao blog!

Particularmente eu não uso um site específico não, sempre busco imagens para cada

situação e às vezes com uma que se aproxime do que desejo acabo chamando a ajuda de

um especialista para modificá-la pra mim.

Entretanto, ao você me perguntar resolvi fazer uma busca e achei 2 casos aqui que

parecem ser bem legais e gratuitos, veja:

http://www.icons4android.com/

http://www.iconspedia.com/search/android/

Espero que os links e as postagens o ajudem, novamente obrigado e fique a vontade!

Abraço.

SETEMBRO 10, 2014 ÀS 14:59

Muito obrigado Landerson.

Datasoft

Carlos Souza

Landerson Gomes

Carlos Souza

http://-/?-http://www.iconspedia.com/search/android/http://www.icons4android.com/http://-/?-http://-/?-http://-/?-


7/13



Abraço.

SETEMBRO 17, 2014 ÀS 14:12

Olá, gostaria de saber como posso imprimir de uma aplicação android feita no Xe5 / Xe6 sem

instalar aquelas impressoras “na nuvem” oou seja, eu tenho um tablet lançando um pedido, elá no servidor as impressoras, preciso de um botão no android que que imprima o pedido lá

no servidor

SETEMBRO 19, 2014 ÀS 07:32

Olá Adriano, seja bem vindo!

Já vi o que você deseja em uma apresentação do amigo Claudemir da Daruma… até citeiisso num post em um dos grupos do Facebook que participo.

Implementar eu nunca implementei, mas caso queira dar uma olhada, de uma conferida no

vídeo https://www.youtube.com/watch?v=VyUzFFfK–k, então vai ver que é possível sim!

Espero que o vídeo te ajude e te dê um norte aí no seu desafio, apenas lembrando que

quando assisti a apresentação do Claudemir no o mesmo disse que a Daruma

disponibilizava o Daruma Mobile Framework Android(Utilize a camada DMF para

comunicação com Impressoras Fiscais e Não Fiscais na plataforma Android)

gratuitamente, então vale a pena procurar por ele.

Um abraço e boa sorte aí!

SETEMBRO 22, 2014 ÀS 22:16

Voce recomenda criar forms para a aplicacao ?

por exemplo cria-se o menu, e a partir dele abrir uma tela de consulta de clientes, em um

form novo ?

Obrigado

SETEMBRO 23, 2014 ÀS 09:48

Olá felipeiw… bem vindo! O ideal seria testar o desempenho, talvez a aplicação a que se

adriano

Landerson Gomes

felipeiw

Landerson Gomes

http://adrianosites.com.br/http://-/?-http://-/?-http://www.desenvolvedoresdaruma.com.br/home/index.phphttps://www.youtube.com/watch?v=VyUzFFfK--khttp://-/?-http://-/?-


8/13



refere possa ser concebida utilizando apenas um Tabcontrol.

Mas optando pela criação de vários forms, crie apenas quando for utilizá-los e sempre

destrua após sua utilização, liberando sempre a memória.

(Lembre-se que cada form já é adicionado com auto create as opções de projeto, portanto, retire-

os de lá deixando apenas o form inicial e na aplicação crie e exiba a medida que for utilizando… é

isso!)

Espero tê-lo ajudado! E se puder me mande um feedback de como ficou sua aplicação,

quem sabe um foto ou um vídeo dela em funcionamento!

Abraço e sucesso aí!

SETEMBRO 23, 2014 ÀS 21:52

obrigado pela resposta landerson

estou sim criando somente no momento do uso, e estou fazendo da seguinte maneira

var

F1Pedidos: TF1Pedidos;

begin

F1Pedidos := TF1Pedidos.Create(self);

F1Pedidos.ShowModal(procedure(ModalResult: TModalResult)

begin

if (ModalResult = mrOk) then

begin

F1Pedidos.DisposeOf;

end;

end);

porem estou precisando voltar variavel do formulario aberto para o formulario principal,

criei uma variavel global, mas nao estou conseguindo, voce tem algum sujestao para isso.

Abs

ABRIL 6, 2015 ÀS 15:11

Olá.

felipeiw

Manoel Zancheta

http://-/?-http://-/?-


9/13



Você conseguiu fechar o form com disposeof?

Não estou conseguindo, dá erro access violation.

ABRIL 6, 2015 ÀS 20:23

Manoel bem vindo!Como eu uso Android na maioria dos caso, não costumo usar DisposeOf.

Dou preferência ao tratamento pelo: SharedActivity.Finish;

Você pode fazer uma checagem pelas diretivas de compilação de qual plataforma

está utilizando e fechar pelo método de cada uma delas.

Espero tê-lo ajudado!

Obrigado por sua participação!

NOVEMBRO 4, 2014 ÀS 11:14

Olá Landerson!

Estou fazendo um programa para faculdade usando o TabControl e gostaria de saber como

que eu programo para que ao clicar na foto possa mudar de tela (tab item).

Obrigada desde já, o post foi muito útil!

Julianne

NOVEMBRO 4, 2014 ÀS 14:25

Olá Juliane tubo bem?! Primeiramente seja muito bem vinda ao blog!

Com relação ao seu questionamento temos o seguinte: O componente TabControl possui

a propriedade ActiveTab, nela você informa o TabItem que está ativo naquele momento.

Outra forma para controlar qual TabItem estará ativo num TabControl é através da sua

propriedade TabIndex, que na verdade representa a mesma coisa entretanto neste caso

você deve passar um valor (integer) correspondente ao índice do TabItem que deseja que o

ativo no momento.

Depois dessa parte teórica, seu código no evento OnClick da Imagem seria:

TabControl1.TabIndex := 0; // Aqui no caso, 0 é o índice do primeiro TabItem

Landerson Gomes

Julianne

Landerson Gomes

http://-/?-http://-/?-http://-/?-


10/13



Espero ter explicado mais do que complicado (rs).

Obrigado por sua participação e mande um feedback de como ficou o trabalho depois!

Até a próxima!

JANEIRO 6, 2015 ÀS 14:59

Olá Anderson, tudo bem?

Vi uma de suas respostas sobre usar vários forms, mas gostaria de saber se além de criar

vários forms posso criar vários datamodulos.

Minha app teria vários módulos com um form principal e um dtm principal e somente quando

o usuário utilizar um determinado modulo eu daria um create no form e no dtm.

Seria mais ou menos assim, posso usar desta maneira?

Obrigado.

JANEIRO 6, 2015 ÀS 21:50

Olá Edson, obrigado por sua participação! Seja bem vindo!

Com relação aos DataModules não cheguei a projetar nada nesse sentido ainda, mas

acredito que seja no mesmo formato, ou seja, você cria e instancia a medida que for

necessitando utilizá-los lembrando sempre de liberá-los ao final da utilização.

Acredito que seja assim.

Até a próxima!

Landerson.

MARÇO 7, 2015 ÀS 09:40

Procurei na internet sobre trocar o ícone padrão do app android construído em delphi, e

nenhuma ajuda sobre. Em tempo de construção no delphi.

Edson Dias

Landerson Gomes

Nilton

Landerson Gomes

http://-/?-http://-/?-http://-/?-


11/13



MARÇO 7, 2015 ÀS 10:50

Olá Nilton bem vindo e obrigado por sua participação!

A opção que você procura está no Menu: Project –> Options –> Application, ao acessá-lo

a tela abaixo será exibida.

Aí você pode trocar os ícones, Splash, definir orientação.

Espero que ajude!

Até a próxima.

ABRIL 7, 2015 ÀS 15:31

Boa tarde amigos

Estou precisando de uma ajuda, sou iniciante na programação Mobile com delphi, gostaria de

saber qual é a forma correto para carregar um formulário.

No Windows podemos fazer desta formaif Frm_CuntPagar_FMX = nil then

Application.CreateForm(TFrm_CuntPagar_FMX, Frm_CuntPagar_FMX);

Frm_CuntPagar_FMX.Show;

Paulinho Feix

http://infosoft.com.py/http://-/?-http://-/?-


12/13



E no mobile como faria a carga deste formulário???

Outra duvida como libero o formulário da memoria??

MAIO 27, 2015 ÀS 17:21

Quando clico na imagem, abre a tela para localizar a imagem de novo dentro do programa. Oque devo fazer.

JUNHO 17, 2015 ÀS 08:01

Sds, Landerson, Estou precisando de sua ajuda… Eu criei esta aplicação mas fiz algumas

modificações: Criei o TTabControl com 9 TTabItem, inseri o TGridPanelLayout dentro do

TTabItem1, inseri o TImageControl dentro do TGridPanelLayout. A principio, rodou legal,mas, inexplicavelmente, o programa começou a travar durante os testes tanto no Android

quanto no iOS Simulator… Refiz a aplicação diversas vezes, a cada componente que eu

inseria na sequencia acima eu testava a aplicação e tudo ocorria bem, mas, toda vez que

estava inserindo o componente TImageControl na minha aplicação e realizava os testes

tanto no Android quanto no iOS Simulator, a aplicação trava… O que deverá estar

acontecendo? Obrigado pela ajuda.

OUTUBRO 2, 2015 ÀS 11:34

Bom dia.

Landerson, estou desenvolvendo um aplicativo utilizando o Delphi XE8 … e to com

problemas de performance.

Ex: minha aplicação usa o navigation drawer, e ao clicar no icone para o menu lateral

aparecer, fica agarrado, nao fica com movimentos fluidos e naturais … fiz o mesmo exemplo

no Android studio , e a diferença de performance é gritante … voce sabe me informar se isso

é Problemas do Delphi ainda, para aplicações Android ?

OUTUBRO 11, 2015 ÀS 13:00

Olá Leonardo, não tenho essa informação… Seus exemplos são realmente idênticos?

Teoricamente o Java Android irá executar sobre a máquina virtual e o firemonkey será

nativo. Mas não tenho referência nenhuma sobre o assunto e comparação, você pode

tentar documentar isso para um análise mais aprofundada.

Não deixe de dar um feedback sobre suas conclusões!

Luciano

Vinicius Magalhães de Pinho

Leonardo

Landerson Gomes

http://-/?-http://-/?-http://-/?-http://-/?-


13/13


OUTUBRO 11, 2015 ÀS 22:19

Excelente postagem! parabéns pelas dicas e se puder me acrescentar mais uma, sou bem

iniciante mesmo! então depois que fazer essa Tela Inicial que você comentou nesse post.

como faço para chamar um novo form de cada ítem da grade ?

NOVEMBRO 10, 2015 ÀS 16:50

Desculpe mas segui os procedimentos até o momento do TimageControl .. Dai por diante a

minha dúvida foi pq não consegui colocar cada imagem dentro de cada respectivo campo na

tabela.. Poderia me ajudar.. Desculpe a ignorância…

NOVEMBRO 14, 2015 ÀS 21:11

Olá Luis, bem vindo e obrigado por sua participação!

Sugiro uma revisão nos passos executados, pode ter passado por algum ponto sem que

tenha notado, não chega a ser “ignorância” alguma meu nobre!

Reforço o agradecimento pela participação, não deixe de postar um feedback e até a

próxima!

Claudio Matos

Luis

Landerson Gomes
https://www.facebook.com/app_scoped_user_id/10156243481300425/http://-/?-http://-/?-http://-/?-

Documents

Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes