BR EN ES

Como personalizar o estilo do seu aplicativo

Como carregar sua Logomarca e personalizar a navegação e as cores do seu Aplicativo

Como personalizar o estilo do seu aplicativo

Nesse tutorial vamos mostrar para você como personalizar o visual do seu aplicativo para deixá-lo com a cara do seu negócio!

Carregar a Logomarca do seu Negócio

Na aba Design do Editor de Aplicativos Easy Easy Apps você pode personalizar todo o visual do seu App.

No campo Logomarca da Barra de Topo você pode subir a logomarca do seu negócio apertando o botão Carregar.

Carregar a Logomarca do seu Negócio

A imagem carregada será adaptada, sem distorção, à Barra de Topo da Tela que tem 320 píxels de largura e 100 píxels de altura.

Você deve carregar uma logomarca com fundo transparente para a imagem ficar bem integrada na Barra de Topo.

Veja como fica a sua Logomarca no Celular Virtual

Caso não tenha uma Logomarca com fundo transparente, como no exemplo indicado:

Veja como fica uma Logomarca sem fundo transparente

Deve escolher uma cor da Barra de Topo igual à cor de fundo de sua Logomarca, dessa forma vai conseguir um bom resultado visual sem alterar o arquivo da sua Logomarca.

Alterar a cor de fundo da barra de topo para a cor de fundo da sua Logomarca

É importante carregar a sua Logomarca pois dessa forma sua marca será reforçada estando sempre presente em todas as telas do aplicativo.

Escolher modo de Navegação do Aplicativo

Para além da Logomarca o Easy Easy Apps disponibiliza vários modos de navegação dentro do aplicativo.

Na área Escolher Navegação, pode escolher entre navegação com menu Horizontal, Lateral e em Grelha.

Escolher o modo de navegação do seu aplicativo

Navegação com menu Lateral

Na Navegação com menu Lateral, todas as entradas estão escondidas, ficando visíveis apenas quando o usuário aperta o botão de menu no topo da tela.
Ou quando arrasta a tela da esquerda para a direita, o chamado gesto swipe em smartphones.

Navegação com menu Lateral

Navegação com menu Grelha

Na Navegação com menu Grelha você tem uma tela totalmente dedicada às entradas de menu.

Navegação com menu Grelha

Você dispõe de vários parâmetros que pode configurar, mas o mais importante é a Imagem de Fundo do Homescreen onde você pode carregar uma imagem para a tela das entradas de menu.

Essa imagem deve ter as dimensões 640 píxeis de largura e 1136 píxeis de altura e para que a imagem fique bem centrada no celular você tem que apertar a opção Tela.

Imagem de fundo do Homescreen

Navegação com menu Horizontal

Na Navegação com menu Horizontal, todas as entradas ficam no fundo da tela e o menu fica visível em todas as telas do aplicativo.

Navegação com menu Horizontal

No entanto, caso seu aplicativo tenha mais do que 5 entradas de menu, irá aparecer uma entrada com um Mais para que o usuário veja as restantes entradas do menu.

Entrada de Menu com um Mais no Menu Horizontal

Alterar a Cor de Fundo de Tela

Na seção de cores, você pode personalizar todas as cores do seu aplicativo.

A Cor de Fundo de Tela altera a cor de fundo das telas do conteúdo, sejam listas ou telas de detalhe.

Alterar a cor de Fundo

Alterar a Cor do Texto

Na Cor do Texto você pode alterar a cor dos textos de todas as telas do conteúdo.

Alterar a Cor do Texto

Alterar a Cor de Fundo do Menu

Na Cor de Fundo do Menu, você pode alterar a cor do fundo da navegação com menu Horizontal e Lateral.

Alterar a Cor de Fundo do Menu

Alterar a Cor dos Botões do Menu

Na Cor dos Botões do Menu você altera a cor dos botões dos menus Horizontal, Lateral e em Grelha, incluindo o texto que acompanha os botões.

Alterar a Cor dos Botões do Menu

Alterar a Cor do Botão Ativo do Menu

Na Cor dos Botões Ativos do menu você altera a cor do botão da entrada de menu que está ativa no momento.

Alterar a Cor do Botão Ativo do Menu

Alterar a Cor da Barra de Topo

Na Cor da Barra de Topo você altera a cor da barra que acompanha a sua logomarca no topo das telas.

Alterar a Cor da Barra de Topo

Alterar a Cor do Texto da Barra de Topo

Na Cor do Texto da Barra de Topo você pode alterar a cor do texto que aparece na barra de topo, o que inclui também o botão de menu lateral ou a palavra Voltar.

Alterar a Cor do Texto da Barra de Topo

Obrigado por ter acompanhado este tutorial. Se tiver dúvidas ou sugestões, por favor, coloque seus comentários e entraremos em contato com você.