Guia do Iniciante: como converter IU iOS para Android

Artur Ferreira
Usemobile

--

por Artur Ferreira. Desenvolvedor Android na Usemobile.

Livremente baseado neste texto.

1. Não converta.

Aplicativos Android não devem ter as mesmas especificações de IU que um aplicativo desenvolvido para iOS. Os iPhones e iPads possuem botão “home” físico enquanto os dispositivos Android possuem os botões “voltar, home e multi-tarefa” na tela. Essa característica faz com os usuários Android possam acessar um app e alternar para outro facilmente. Dessa forma, os dois sistemas possuem fluxos de navegação diferentes então aplicativos desenvolvidos para ambos devem manter suas particularidades ainda que tenham design similar.

Uma das consequências dos botões do Android serem na parte de baixo é que as tabs devem ficar na parte superior.

Tabs no iOS (esquerda) e Android (direita)

2. Unidades

Ao trabalhar com Android é comum ouvir termos como “SP”, “DP” e “9 patch”. SP e DP são unidades de tamanho enquanto 9 patch é o nome de um tipo de arquivo.

DP significa Pixel independente de densidade. É uma unidade que nunca muda de tamanho.

SP é o mesmo que DP. A diferença aqui é que o SP é escalável, ou seja, os textos com tamanho SP irão variar de tamanho de acordo com o tamanho da fonte definida no dispositivo.

Fontes pequena, grande e enorme (Postaê)

9 Patch é um formato de bitmap redimensionável e que é capaz de reduzir o tamanho dos arquivos. Aqui é possível aprender como criar bitmaps redimensionáveis.

3. Entenda os tamanhos de telas e densidades

Diferentemente do iOS, existem diversos fabricantes que utilizam o Android como sistema operacional de seus dispositivos. Com isso, é preciso levar em conta telas de diferentes tamanhos ao desenvolver um app. O infográfico abaixo mostra a quantidade enorme de dispositivos que rodavam Android em 2015.

Fragmentação do Android em 2015(por OpenSignal)

A vantagem aqui é que não é preciso implementar para todos os tipos diferentes. O Android utiliza um sistema de densidade de tela que se adapta para cada tamanho de tela.

As densidades de tela do Android são as seguintes:

  • ldpi (baixa) ~120dpi
  • mdpi (média) ~160dpi
  • hdpi (alta) ~240dpi
  • xhdpi (extra-alta) ~320dpi
  • xxhdpi (extra-extra-alta) ~480dpi
  • xxxhdpi (extra-extra-extra-alta) ~640dpi
Densidades de tela da menor para a maior

Dessa forma, ao desenvolver com a resolução 1080 x 1920 px, por exemplo, estará desenvolvendo para todos os smartphones que sejam XXHDPI.

O ideal é testar no máximo possível (pelo menos 4 ou 5) de dispositivos diferentes a fim de verificar se não há problemas com as telas muito pequenas ou muito grandes. Aqui na Usemobile nós testamos em dispositivos com telas entre 4" e 5,5", além de testar no emulador do Android Studio com telas que estejam no mesmo intervalo mas que utilizem versões diferentes de API. Uma sugestão é desenvolver para maior resolução possível para facilitar na hora de importar as imagens para o Android Studio.

4. Ícones

Os ícones no Android tem um estilo próprio e seguem o padrão proposto pela Google (mais sobre isso no próximo tópico).

Alguns ícones do Android (Material Icons)

O Android redimensiona os ícones automaticamente. Uma dica importante é evitar utilizar imagens em formato .png e utilizar imagens .svg no lugar. As imagens em .png podem ficar destorcidas em determinadas telas enquanto o svg pode ser importado como Vector e, assim, manter sua qualidade independentemente do tamanho da tela.

5. Material Design

Manual Creative

Introduzido no Android Lollipop, o Material Design é um guia para design visual e foi definido como o padrão do Android a partir desta versão. Importantes componentes como RecyclerView e CardView vieram com esta versão do sistema e acompanham este padrão de design.

MindCoach

Com a introdução deste padrão, muitos desenvolvedores aderiram ao mesmo e seguem exemplos da própria Google (YouTube, Notas, Play Store) que cria aplicativos simples de se navegar e com um visual bonito.

Para quem está aprendendo pode ser interessante começar a aprender com aplicativos que apliquem o Material Design para então partir para outros apps mais elaborados que não sigam o padrão à risca.

6. Notificações

As notificações em geral consistem em ícone do app + texto ou imagem. A versão 7 do Android trouxe uma nova forma de apresentar as notificações então é importante observar como as notificações se comportam pois as versões 5 e 6 (Lollipop e Marshmallow) possuem outro estilo e as versões abaixo também (KitKat, Jelly Bean).

Notificações no Android Jelly Bean, Lollipop e Nougat

7. Não reinvente a roda

Por último, uma dica que na verdade serve para qualquer desenvolvedor é evitar escrever métodos ou desenvolver componentes que já existem. Precisa adicionar imagens a partir de um url e redimensioná-las? Procure soluções como o Picasso. Precisa de cartões que possam ser deslizados? Veja esta solução. Em resumo, procure por referências em sites como o Android Arsenal antes de desenvolver algo novo e, quem sabe, encontrar uma abordagem já existente ou pelo menos uma parecida em que possa se basear.

8. Links úteis

Google Material Design

materialup.com

androidux.com

pttrns.com

Bibliotecas

Material (componentes Material para Android pré-Lollipop)

MaterialEditText

MaterialSearchView

--

--