27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Landerson Gomes

DELPHI

CONSTRUINDO UMA TELA INICIAL PARA

APLICATIVOS ANDROID COM DELPHI XE5
AGOSTO 4, 2014 | LANDERSON GOMES | 31 COMENTRIOS

Compartilhe
22

A criao de interfaces de usurios umproblema na hora de

distribuir os aplicativos, afinal so diversos dispositivos,
resolues e telas diferentes. Nesta postagem veremos um
exemplo de como construir uma interface simples de uma Tela
inicial para aplicativo Android com Delphi XE5.
Direto ao ponto
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

1/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Inicie um nova aplicao Delphi Mobile em branco, como j fizemos isso algumas vezes vamos
avanar at a parte da nossa aplicao especificamente. No formulrio principal adicione 1 Label
e 1 GridPanelLayout. E para suas propriedades configure como descrito abaixo:
Label1
Align -> alTop
TextAlign ->taCenter
Text -> Menu Principal
GridPanelLayout1
Align -> alClient

Um pouco sobre o GridPanelLayout

Este componente ser responsvel por fornecer um layout estilo tabela a nossa tela. Ele trabalha
com colees de Linhas, Colunas e Controles, e por padro ele traz j previamente configurados
2 pares de linhas e colunas. Veja na imagem abaixo:

Vamos trabalhar para fins didticos com2 colunas e 3 linhas, a cada coordenada Linha, Coluna de
nosso GridPanelLayout estaremos disponibilizando uma funo em nossa aplicao.

Definindo a aparncia
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.

http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

2/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Agora vamos inserir mais uma linha em nosso GridPanelLayout, para isso clique com o boto
direito sobre RowColection e selecione a opo 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 prximo da imagem
abaixo:

http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

3/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Explore a criatividade
Para cada ImageControl voc deve atribuir uma funo no seu evento onClick para que quando o
usurio clique na imagem a funo seja chamada. Note ainda que as propriedades de tamanho
das imagens existem e devem ser exploradas por voc a medida que sua resoluo/tamanho de
tela for aumentado.
A ideia est lanada, agora s usar de acordo com sua necessidade.

Fonte:SarinaDuPontGerentedeProdutoEmbarcadero

Relacionado:

Enviando e-mail no Android com

Delphi XE5
Em "Delphi"

ANDROID

DELPHI

DELPHI XE5

Obtendo o nmero do telefone

Android com Delphi XE5
Em "Delphi"

DESENVOLVIMENTO

Delphi XE5 Efetuando chamadas

telefnicas direto de sua
aplicao mvel
Em "Delphi"

TUTORIAL

31 OPINIES SOBRE CONSTRUINDO UMA TELA INICIAL PARA APLICATIVOS ANDROID

COM DELPHI XE5
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

4/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Joo
AGOSTO 4, 2014 S 19:50

Excelente .. obrigado por compartilhar

TIago
AGOSTO 12, 2014 S 20:35

Boa noite Landerson, mais uma vez venho aqui lhe pedir ajuda ! hehehe Cara como fao ou
como devo pesquisar para resolver o seguinte: Diferentes tamanho de telas de dispositivo.
Tablet e celular ? Obrigado pela ajuda.

Landerson Gomes
AGOSTO 13, 2014 S 14:03

Tiago vou te colocar com a Gerncia Nacional de Perguntas Difceis rsrs.

Brincadeira a parte meu amigo, eu tenho usado postagens da Sarina como referncia
principalmente em questes de layout de aplicativos.
D uma pesquisada: Sarina DuPont. Tente a ela tem muita postagem sobre o assunto.
Abrao.

Datasoft
AGOSTO 22, 2014 S 12:00

Caro Landerson,
Tem como mudar a cor de fundo do form para branco ou deixar a imagem transparente?
Abraos.

Landerson Gomes
AGOSTO 22, 2014 S 13:04

Ol com relao cor do Formulrio vou dar uma olhada, mas acredito sim que
possvel, tendo o resultado dos testes publico algo.
E as imagens, note que voc pode carregar PNG, que permite transparncia, logo tente o
teste com uma assim sendo acredito tambm que funcione.
Abrao.

Datasoft
AGOSTO 26, 2014 S 09:36
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

5/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

S consegui transparncia 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.
Abraos.

Datasoft
AGOSTO 26, 2014 S 11:34

Consegui usando o componente StyleBook onde eu posso mudar o background e opes de

transparncia para cada objeto visual.
Espero que ajude outras pessoas.

Carlos Souza
SETEMBRO 5, 2014 S 10:21

Landerson, parabns pelas postagens !

Sou iniciante em Delphi XE5.
Gostaria de saber se voc tem alguma dica onde encontro icones gratuitos p/ utilizao no
Android p/ baixar.

Landerson Gomes
SETEMBRO 6, 2014 S 22:46

Ol Carlos seja muito bem vindo ao blog!

Particularmente eu no uso um site especfico no, sempre busco imagens para cada
situao 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!
Abrao.

Carlos Souza
SETEMBRO 10, 2014 S 14:59

Muito obrigado Landerson.

http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

6/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Abrao.

adriano
SETEMBRO 17, 2014 S 14:12

Ol, gostaria de saber como posso imprimir de uma aplicao android feita no Xe5 / Xe6 sem
instalar aquelas impressoras na nuvem oou seja, eu tenho um tablet lanando um pedido, e
l no servidor as impressoras, preciso de um boto no android que que imprima o pedido l
no servidor

Landerson Gomes
SETEMBRO 19, 2014 S 07:32

Ol Adriano, seja bem vindo!

J vi o que voc deseja em uma apresentao do amigo Claudemir da Daruma at citei
isso num post em um dos grupos do Facebook que participo.
Implementar eu nunca implementei, mas caso queira dar uma olhada, de uma conferida no
vdeo https://www.youtube.com/watch?v=VyUzFFfKk, ento vai ver que possvel sim!
Espero que o vdeo te ajude e te d um norte a no seu desafio, apenas lembrando que
quando assisti a apresentao do Claudemir no o mesmo disse que a Daruma
disponibilizava o Daruma Mobile Framework Android(Utilize a camada DMF para
comunicao com Impressoras Fiscais e No Fiscais na plataforma Android)
gratuitamente, ento vale a pena procurar por ele.
Um abrao e boa sorte a!

felipeiw
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

Landerson Gomes
SETEMBRO 23, 2014 S 09:48

Ol felipeiw bem vindo! O ideal seria testar o desempenho, talvez a aplicao a que se
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

7/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

refere possa ser concebida utilizando apenas um Tabcontrol.

Mas optando pela criao de vrios forms, crie apenas quando for utiliz-los e sempre
destrua aps sua utilizao, liberando sempre a memria.
(Lembre-se que cada form j adicionado com auto create as opes de projeto, portanto, retireos de l deixando apenas o form inicial e na aplicao crie e exiba a medida que for utilizando
isso!)
Espero t-lo ajudado! E se puder me mande um feedback de como ficou sua aplicao,
quem sabe um foto ou um vdeo dela em funcionamento!
Abrao e sucesso a!

felipeiw
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

Manoel Zancheta
ABRIL 6, 2015 S 15:11

Ol.

http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

8/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Voc conseguiu fechar o form com disposeof?

No estou conseguindo, d erro access violation.

Landerson Gomes
ABRIL 6, 2015 S 20:23

Manoel bem vindo!

Como eu uso Android na maioria dos caso, no costumo usar DisposeOf.
Dou preferncia ao tratamento pelo: SharedActivity.Finish;
Voc pode fazer uma checagem pelas diretivas de compilao de qual plataforma
est utilizando e fechar pelo mtodo de cada uma delas.
Espero t-lo ajudado!
Obrigado por sua participao!

Julianne
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

Landerson Gomes
NOVEMBRO 4, 2014 S 14:25

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

Com relao 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 atravs 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 terica, seu cdigo no evento OnClick da Imagem seria:
TabControl1.TabIndex:=0;//Aquinocaso,0ondicedoprimeiroTabItem
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

9/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Espero ter explicado mais do que complicado (rs).

Obrigado por sua participao e mande um feedback de como ficou o trabalho depois!
At a prxima!

Edson Dias
JANEIRO 6, 2015 S 14:59

Ol Anderson, tudo bem?

Vi uma de suas respostas sobre usar vrios forms, mas gostaria de saber se alm de criar
vrios forms posso criar vrios datamodulos.
Minha app teria vrios mdulos com um form principal e um dtm principal e somente quando
o usurio utilizar um determinado modulo eu daria um create no form e no dtm.
Seria mais ou menos assim, posso usar desta maneira?
Obrigado.

Landerson Gomes
JANEIRO 6, 2015 S 21:50

Ol Edson, obrigado por sua participao! Seja bem vindo!

Com relao aos DataModules no 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 utilizao.
Acredito que seja assim.
At a prxima!
Landerson.

Nilton
MARO 7, 2015 S 09:40

Procurei na internet sobre trocar o cone padro do app android construdo em delphi, e
nenhuma ajuda sobre. Em tempo de construo no delphi.

Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

10/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

MARO 7, 2015 S 10:50

Ol Nilton bem vindo e obrigado por sua participao!

A opo 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 orientao.

Espero que ajude!
At a prxima.

Paulinho Feix
ABRIL 7, 2015 S 15:31

Boa tarde amigos

Estou precisando de uma ajuda, sou iniciante na programao Mobile com delphi, gostaria de
saber qual a forma correto para carregar um formulrio.
No Windows podemos fazer desta forma
if Frm_CuntPagar_FMX = nil then
Application.CreateForm(TFrm_CuntPagar_FMX, Frm_CuntPagar_FMX);
Frm_CuntPagar_FMX.Show;
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

11/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

E no mobile como faria a carga deste formulrio???

Outra duvida como libero o formulrio da memoria??

Luciano
MAIO 27, 2015 S 17:21

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

Vinicius Magalhes de Pinho

JUNHO 17, 2015 S 08:01

Sds, Landerson, Estou precisando de sua ajuda Eu criei esta aplicao mas fiz algumas
modificaes: 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 comeou a travar durante os testes tanto no Android
quanto no iOS Simulator Refiz a aplicao diversas vezes, a cada componente que eu
inseria na sequencia acima eu testava a aplicao e tudo ocorria bem, mas, toda vez que
estava inserindo o componente TImageControl na minha aplicao e realizava os testes
tanto no Android quanto no iOS Simulator, a aplicao trava O que dever estar
acontecendo? Obrigado pela ajuda.

Leonardo
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 aplicao 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 diferena de performance gritante voce sabe me informar se isso
Problemas do Delphi ainda, para aplicaes Android ?

Landerson Gomes
OUTUBRO 11, 2015 S 13:00

Ol Leonardo, no tenho essa informao Seus exemplos so realmente idnticos?

Teoricamente o Java Android ir executar sobre a mquina virtual e o firemonkey ser
nativo. Mas no tenho referncia nenhuma sobre o assunto e comparao, voc pode
tentar documentar isso para um anlise mais aprofundada.
No deixe de dar um feedback sobre suas concluses!
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

12/13

27/11/2015

ConstruindoTelaInicialparaApkAndroidcomDelphiXE5|LandersonGomes

Claudio Matos
OUTUBRO 11, 2015 S 22:19

Excelente postagem! parabns pelas dicas e se puder me acrescentar mais uma, sou bem
iniciante mesmo! ento depois que fazer essa Tela Inicial que voc comentou nesse post.
como fao para chamar um novo form de cada tem da grade ?

Luis
NOVEMBRO 10, 2015 S 16:50

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

minha dvida foi pq no consegui colocar cada imagem dentro de cada respectivo campo na
tabela.. Poderia me ajudar.. Desculpe a ignorncia

Landerson Gomes
NOVEMBRO 14, 2015 S 21:11

Ol Luis, bem vindo e obrigado por sua participao!

Sugiro uma reviso nos passos executados, pode ter passado por algum ponto sem que
tenha notado, no chega a ser ignorncia alguma meu nobre!
Reforo o agradecimento pela participao, no deixe de postar um feedback e at a
prxima!

http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindoumatelainicialparaaplicativosandroidcomdelphixe5

13/13