Desenvolvimento x Diversidade de dispositivos Android - DevDay 2012

1,026 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,026
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvimento x Diversidade de dispositivos Android - DevDay 2012

  1. 1. 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
  2. 2. 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.brSunday, October 21, 2012
  3. 3. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  4. 4. 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 terminando em 1 de Outubro de 2012 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  5. 5. 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 definidas nas versões anteriores a Android 3.0. Sendo assim, você poderá encontrar dispositivos classificados de forma incorreta entre normal e large. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  6. 6. 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 terminando em 1 de Outubro de 2012 **Estes dados são baseados no número de dis- positivos que acessaram o Google Play Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  7. 7. Predominância de línguas nos sistemas ativos x países Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  8. 8. Predominância de línguas nos sistemas ativos x países Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  9. 9. Predominância de modelos de aparelhos Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  10. 10. Wake up! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  11. 11. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  12. 12. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  13. 13. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? This is madness! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  14. 14. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? This is madness! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  15. 15. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? This is madness! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  16. 16. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? This is madness! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  17. 17. O que ouvimos quando se trata de suportar múltiplos dispositivos Android? This is madness! This is Sparta! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  18. 18. O que são as Resources e como utilizar? Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  19. 19. O que são as Resources e como utilizar? Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  20. 20. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  21. 21. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  22. 22. 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 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í) Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  23. 23. O que são os qualifiers e como utilizar? Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  24. 24. O que são os qualifiers e como utilizar? Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  25. 25. O que são os qualifiers e como utilizar? São definições de “escopos” e configurações de utilização das nossas resources. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  26. 26. 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”. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  27. 27. 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”. Acessando resources por qualifiers: -nada precisa ser feito. O Android decidirá de acordo com a configuração atual qual qualifier(s) se enquadra Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  28. 28. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  29. 29. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  30. 30. 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! Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  31. 31. 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. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  32. 32. 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. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  33. 33. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  34. 34. 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 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  35. 35. 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. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  36. 36. 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. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  37. 37. 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) Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  38. 38. 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. Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  39. 39. 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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  40. 40. 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.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 Matthaus Schall Lopez - matthaus@nitrato.com.brSunday, October 21, 2012
  41. 41. DÚVIDAS? Matthaus M. Schall L. Vizuete -matthaus@nitrato.com.br -Facebook: Matthaus Schall LopezSunday, October 21, 2012

×