desenvolvimento x diversidade de dispositivos android - devday 2012

Boas práticas: demonstrar recomendações da Google que são imprescindíveis para desenvolvimento Android.

DESENVOLVIMENTO X DIVERSIDADE DE DISPOSITIVOS ANDROID

Sunday, October 21, 2012

Matthaus Schall Lopez - [email protected]

GuidelineMarketshare

-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!)


mailto:[email protected]



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

4.0.3-4.0.4 Ice Cream Sandwich

15 23.7

2.2 Froyo 8 12.9

*Dados coletados durante o período de 14 diasterminando 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 diasterminando em 1 de Outubro de 2012





Entendendo tamanhos de tela e densidades

xlarge são pelo menos 960dp x 720dplarge são pelo menos 640dp x 480dpnormal são pelo menos 470dp x 320dpsmall são pelo menos até 426dp x 320dp

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





Dispersão de tamanhos de tela e densidades

ldpi mdpi hdpi xhdpi

small

normal

large

xlarge

1.7% 1.0%

0.4% 11% 50.1% 25.1%

0.1% 2.4% 3.6%

4.6%

*Dados coletados durante o período de 7 diasterminando em 1 de Outubro de 2012

**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 ficam 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 ficam 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

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 qualifiers e como utilizar?






São definições de “escopos” e configuraçõ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

-alguns padrões devem ser seguidos: -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

-alguns padrões devem ser seguidos: -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 idiomaUtilizando 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 idiomaUtilizando 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 telaUtilizando 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 telaUtilizando 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 mdpie 75x75 para ldpi,-utilizando novamente nossos qualifiers configuramos cada imagem em suas pastas corretas.





Iconografia (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





Iconografia (recomendações Google!)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áfica, lista, não muito detalhada. Curvas suaves e deve-se girar 45 graus para preencher o espaço focalA 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





Iconografia (recomendações Google!)Small / Contextual Icons-ícones para ações de status principalmente. Exemplo: rankings, tags:

-Tamanho: 16x16dp-Proporção e área de foco: 16x16dp total e 12x12dp na área de foco-Estilo: neutro, plano e simples. Formas preenchidas são ideais contra somente linhas.-Cores: usar cores não neutras com objetivo e moderação.





Iconografia (recomendações Google!)Notification Icons-caso a aplicação utilize notificações, você deve fornecer um ícone para sempre que houver notificações da app:

-Tamanho: 24x24dp-Proporção e área de foco: 24x24dp total e 22x22dp na área de foco-Estilo: plano e simples.-Cores: devem ser inteiramente brancos. O sistema pode aumentar e diminuir a claridade nos ícones.





Tipografia (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 fisicamente 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ênciahttp://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.flurry.com/default.aspx?Tag=Apps

http://www.flurry.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




http://en.wikipedia.org/wiki/Template:Timeline_of_Android_versions

http://en.wikipedia.org/wiki/Template:Timeline_of_Android_versions

























DÚVIDAS?Matthaus M. Schall L. [email protected]: Matthaus Schall Lopez




desenvolvimento x diversidade de dispositivos android - devday 2012

Documents