Suporte a Dispositivos Android

DESENVOLVIMENTO X DIVERSIDADE DE
DISPOSITIVOS ANDROID
Boas práticas: demonstrar recomendações da Google que são imprescindíveis para desenvolvimento
Android.

Sunday, October 21, 2012

Guideline
Marketshare
-Timeline de versões Android
-Dispersão de versões x aparelhos no mundo
-Dispersão histórica de versões x aparelhos no mundo
-Entendo tamanhos de tela e densidades
-Dispersão de tamanhos de tela e densidades
-Predominância de línguas nos sistemas ativos x países
-Predominância de modelos de aparelhos

Aplicando boas práticas!
-O que são as resources e como utilizar?
-O que são os qualifiers e como utilizar?
-Utilizando qualifiers para suporte regional e idioma
-Suportando múltiplos tamanhos de tela
-Suportando múltiplas densidades de tela
-Iconografia (recomendações Google!)
-Tipografia (recomendações Google!)
-Cores (recomendações Google!)
-Métricas e Grids (recomendações Google!)

Matthaus Schall Lopez - matthaus@nitrato.com.br


Timeline de versões Android

Última versão

4.1 - Jelly Bean (API 16)
Histórico
-4.1.1: 9 de Julho de 2012
-4.1.2: 9 de Outubro de 2012



Dispersão de versões x aparelhos no mundo

Versão Codenome API %

2.3-2.3.2 Gingerbread 9-10 55.8

Ice Cream
4.0.3-4.0.4 15 23.7
Sandwich

2.2 Froyo 8 12.9

*Dados coletados durante o período de 14 dias
terminando em 1 de Outubro de 2012

Dispersão histórica de versões x aparelhos no mundo

*Últimos dados coletados até o período de 14 dias


Entendendo tamanhos de tela e densidades

xlarge são pelo menos 960dp x 720dp
large são pelo menos 640dp x 480dp
normal são pelo menos 470dp x 320dp
small são pelo menos até 426dp x 320dp

Atenção: estas informações acima não estavam bem deﬁnidas nas versões anteriores a Android 3.0. Sendo assim,
você poderá encontrar dispositivos classiﬁcados de forma incorreta entre normal e large.



Dispersão de tamanhos de tela e densidades

ldpi mdpi hdpi xhdpi

small 1.7% 1.0%

normal 0.4% 11% 50.1% 25.1%

large 0.1% 2.4% 3.6%

xlarge 4.6%

*Dados coletados durante o período de 7 dias

**Estes dados são baseados no número de dis-
positivos que acessaram o Google Play



Predominância de línguas nos sistemas ativos x países



Predominância de modelos de aparelhos



Wake up!



O que ouvimos quando se trata de suportar múltiplos
dispositivos Android?



This is madness!



This is madness!

This is Sparta!



O que são as Resources e como utilizar?



São repositórios de: animations, color state list, drawable, layout, menu, string, style, valores primitivos




Disponibilizando resources:
-todas as resources ﬁcam em suas subpastas que por sua vez estão em /res
-seus nomes são por exemplo: drawable, layout, string. Sendo assim:
-/res/drawable/
-/res/layout/
-/res/string/
-alguns padrões devem ser seguidos:
-use apenas a-z, 0-9 e _ para nomear suas resources/arquivos.
-deve-se de iniciar com letras minúsculas
-isto é devido as resources serem convertidas em variáveis para o Android




Disponibilizando resources:
-todas as resources ﬁcam em suas subpastas que por sua vez estão em /res
-seus nomes são por exemplo: drawable, layout, string. Sendo assim:
-/res/drawable/
-/res/layout/
-/res/string/
-use apenas a-z, 0-9 e _ para nomear suas resources/arquivos.
-deve-se de iniciar com letras minúsculas
-isto é devido as resources serem convertidas em variáveis para o Android

Acessando resources:
-a partir dos arquivos XML:
-@tipo/nome_da_resource. Ex: @drawable/logomarca
-a partir do código (.java). São dois passos:
-R.tipo.nome_da_resource. Ex: R.drawable.logomarca (Para retornar o ID da resource)
-getResources().getDrawable(R.drawable.logomarca) (Retornando a Imagem em sí)



O que são os qualiﬁers e como utilizar?



São deﬁnições de “escopos” e conﬁgurações de utilização das nossas resources.




Utilizando qualifiers
-eles serão utilizados modificando os nomes de pasta de nossas resources
-podem ser utilizados múltiplos qualifiers ao mesmo tempo, observando apenas a ordem de precedência. Sendo assim:
-/res/drawable-hdpi
-/res/layout-<qualifier_1>-<qualifier_2>
-/res/string-hdpi-port
-a separação deles, deve utilizar hífen: “-”
-pastas não pode estar aninhadas, ex: /res/drawable/drawable-en/
-apenas um valor por tipo de qualifier é aceito, ex:
-/drawable-hdpi-ldpi. Isto não pode ser feito Caso necessite utilizar as mesmas resources para ambos os modos,
você deverá utilizar de duas pastas ou criar um “Alias Resource”.




Utilizando qualifiers
-eles serão utilizados modificando os nomes de pasta de nossas resources
-podem ser utilizados múltiplos qualifiers ao mesmo tempo, observando apenas a ordem de precedência. Sendo assim:
-/res/drawable-hdpi
-/res/layout-<qualifier_1>-<qualifier_2>
-/res/string-hdpi-port
-a separação deles, deve utilizar hífen: “-”
-pastas não pode estar aninhadas, ex: /res/drawable/drawable-en/
-apenas um valor por tipo de qualifier é aceito, ex:
-/drawable-hdpi-ldpi. Isto não pode ser feito Caso necessite utilizar as mesmas resources para ambos os modos,
você deverá utilizar de duas pastas ou criar um “Alias Resource”.

Acessando resources por qualifiers:
-nada precisa ser feito. O Android decidirá de acordo com a configuração atual qual qualifier(s) se enquadra



Utilizando qualifiers para suporte regional e idioma
Utilizando qualifiers de idioma
-são definidos por duas letras seguindo o padrão ISO 639-1
-opcionalmente podem ser seguidas de duas letras para definir a região seguindo padrão ISO 3166-1-alpha-2.
Estas letras devem ser precedidas por “r”
-Ex:
-/res/values-en
-/res/values-en-rUS
-/res/values-pt-rBR



Utilizando qualifiers para suporte regional e idioma
Utilizando qualifiers de idioma
-são definidos por duas letras seguindo o padrão ISO 639-1
-opcionalmente podem ser seguidas de duas letras para definir a região seguindo padrão ISO 3166-1-alpha-2.
Estas letras devem ser precedidas por “r”
-Ex:
-/res/values-en
-/res/values-en-rUS
-/res/values-pt-rBR

Let’s try!



Suportando múltiplos tamanhos de tela
Utilizando match_parent e wrap_content
-devemos evitar o uso de tamanhos “hard-coded”.
-em contrapartida devemos utilizar somente o espaço necessário para o componente ou expandir para o espaço disponível:
-wrap_content: sempre irá limitar o tamanho ao necessário para comportar o componente em tela.
-match_parent: sempre irá expandir o tamanho do componente até o tamanho do parent que o contém.
-nas versões abaixo da API 8 se utilizava fill_parent para funcionamento semelhante ao match_parent.

Utilizando RelativeLayout
-no layout do tipo relativo, devemos orientar um componente a partir do outro, utilizando sentenças parecidas com:
-ao lado de
-acima de
-abaixo de
-alinhar a direita do parent tal
-alinhar no topo no componente tal

Utilizando Qualifiers
-como vimos, podemos utilizar qualifiers para descrever Resources de acordo com as configurações correntes.
-tamanho: podemos utilizar o default como um layout de só um painel e com large um layout de dois painéis
-Smallest-width(sw): podemos trabalhar com um número mínimo para width determinada em dp, ex: sw600dp

Utilizando Nine-patch Bitmaps
-quando falamos em suportar vários tamanhos de tela, nossas resources de imagem também devem estar preparadas
-para isso podemos utilizar Nine-patch Bitmaps.
-através da ferramenta draw9patch geramos estas imagens.
-devemos partir de uma imagem, definir as áreas que podem ou não ser “esticadas”.
-assim será gerado um arquivo do tipo 9.png que será interpretado pelo Android esticando apenas as áreas definidas.



Suportando múltiplas densidades de tela
Utilizando Density-independent Pixels
-um erro muito comum é utilizarmos pixels(px) para definir tamanhos e distâncias em nossos layouts
-qual o problema disto?
-telas diferentes, possuem densidades de pixel diferentes
-isso nos diz diretamente que o mesmo número de pixels pode ter tamanhos diferentes em telas diferentes.
-qual a solução?
-utilize sempre as unidades “dp”ou “sp”.
-dp: pixel independente de densidade que corresponde ao tamanho físico do píxel a 160 dpi.
-sp: a mesma unidade de medida, porém baseada nas preferências de tamanho de fonte do usuário.
-com isso, você deve utilizar “sp”apenas para medidas de texto, nunca para layouts!

Utilizando Bitmaps alternativos
-a partir do momento que estamos lidando com um grande número de devices, temos que nos preparar para disponibilizar
nossas resources nas densidades conhecidas: low, medium, high, extra_hight.
-para começar, você deve ter esta imagem em formato de vetor. Posteriormente utilizar a seguinte escala:
-xhdpi: 2.0
-hdpi: 1.5
-mdpi: 1.0 (baseline)
-ldpi: 0.75.
-exemplo: Se você tem uma imagem de 200x200 para xhdpi, você deverá ter em 150x150 para hdpi, em 100x100 para mdpi
e 75x75 para ldpi,
-utilizando novamente nossos qualifiers configuramos cada imagem em suas pastas corretas.



Iconograﬁa (recomendações Google!)
Launcher
-a representação do nosso aplicativo na home ou qualquer página de aplicativos:
-Tamanho: 48x48dp para aplicativo
-Tamanho: 512x512px para ser disponibilizado no Google Play
-Proporção: 48x48dp
-Estilo: qualquer tipo de modelagem incluindo 3D



Action Bar
-ícones principais de ação de nossa aplicação:
-Tamanho: 32x32dp
-Proporção e área de foco: 32x32dp total e 24x23dp na área de foco
-Estilo: Pictográﬁca, lista, não muito detalhada. Curvas suaves e deve-se girar 45 graus para preencher o espaço focal
A espessura das linhas e traços e espaços negativos, devem ser de no mínimo 2dp
-Cores: #333333; Habilitado: 60% opacidade, Desabilitado: 30% opacidade



Small / Contextual Icons
-ícones para ações de status principalmente. Exemplo: rankings, tags:
-Tamanho: 16x16dp
-Estilo: neutro, plano e simples. Formas preenchidas são ideais contra somente linhas.
-Cores: usar cores não neutras com objetivo e moderação.



Notification Icons
-caso a aplicação utilize notificações, você deve fornecer um ícone para sempre que houver notificações da app:
-Tamanho: 24x24dp
-Estilo: plano e simples.
-Cores: devem ser inteiramente brancos. O sistema pode aumentar e diminuir a claridade nos ícones.



Tipograﬁa (recomendações Google!)
Padrões
-fontes padrões utilizadas
-Roboto Regular
-Roboto Bold
-cores
-o Android sempre utiliza um par de cores padrão (primária e secundária):
-para fundos menos claros, utilize: textColorPrimary, textColorSecondary
-para fundos mais escuros, utilize textColorPrimaryInverse, textColorSecondaryInverse
-tamanhos
-Micro (12sp), Small (14sp), Medium (18sp), Large (22sp)



Cores (recomendações Google!)
Padrões
-utilize cores para dar ênfase.
-lembre-se que vermelho e verde podem ser indistiguível para daltônicos
-cores:
-azul: #33B5E5, #0099CC
-roxo: #AACC66, #9933CC
-verde: #99CC00, #669900
-laranja: #FFBB33, #FF8800
-vermelho: #FF4444, #CC00
-lembre-se que o azul é a cor tradicional do Android. Cada cor tem sua correspondente “darker shade” que pode ser
utilizada como complemento.



Métricas e Grids (recomendações Google!)
48dp Rhythm
-”touchable UI components” são geralmente estabelecidas ao longo de 48dp
-por que 48dp?
-geralmente 48db transmite ﬁsicamente em torno de 9mm (variando de acordo com a device).
-o intervalo de conforto é dado em um intervalo de 7-10mm. Sendo assim, conseguimos garantir precisão para os dedos
-caso você não esteja utilizando este padrão, você deve garantir que:
-seus objetos nunca serão menores que 7mm
-você deverá encontrar a relação entre a densidade e dos elementos a serem tocados.

Mind the gaps
-o espaçamento entre elementos é de 8dp



Sites e links de referência
http://en.wikipedia.org/wiki/Template:Timeline_of_Android_versions
http://developer.android.com/about/dashboards/index.html
http://developer.android.com/guide/practices/screens_support.html
http://blog.ﬂurry.com/default.aspx?Tag=Apps
http://www.ﬂurry.com/big-data.html
http://developer.android.com/guide/topics/resources/providing-resources.html
http://developer.android.com/guide/topics/resources/accessing-resources.html
http://developer.android.com/training/multiscreen/index.html
http://developer.android.com/training/multiscreen/screensizes.html
http://developer.android.com/design/style/iconography.html
http://developer.android.com/design/style/typography.html
http://developer.android.com/design/style/color.html
http://developer.android.com/design/style/metrics-grids.html



DÚVIDAS?
Matthaus M. Schall L. Vizuete
-matthaus@nitrato.com.br
-Facebook: Matthaus Schall Lopez


Suporte a Dispositivos Android

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Suporte a Dispositivos Android

Semelhante a Suporte a Dispositivos Android (6)

Suporte a Dispositivos Android