Diretrizes de design de widgets de aplicativos

Os widgets de apps (às vezes apenas "widgets") são um recurso introduzido no Android 1.5 e amplamente melhorado no Android 3.0 e 3.1. Um widget pode exibir rapidamente as informações mais oportunas ou relevantes de um aplicativo na tela inicial de um usuário. A imagem padrão do sistema Android inclui vários widgets, inclusive um para o Relógio analógico, o app Música e outros aplicativos.

Exemplos de widgets de aplicativos no Android 4.0

Figura 1. Exemplos de widgets de aplicativos no Android 4.0.

Este documento descreve como projetar um widget para que ele se encaixe graficamente com outros widgets e com outros elementos da tela inicial do Android, como ícones e atalhos na tela de início. Também descrevemos alguns padrões para a arte do widget e algumas dicas e sugestões gráficas.

Para mais informações sobre o desenvolvimento de widgets, consulte a seção Widgets de apps do Guia para desenvolvedores.

Anatomia de widget padrão

Os widgets típicos de apps Android têm três componentes principais: uma caixa delimitadora, um frame e os controles gráficos do widget e outros elementos. Os widgets de apps podem conter um subconjunto dos widgets de visualização no Android. Os controles compatíveis incluem rótulos de texto, botões e imagens. Para ver uma lista completa das visualizações disponíveis, consulte a seção Como criar o layout do widget de app no Guia para desenvolvedores. Widgets bem projetados deixam algumas margens entre as bordas da caixa delimitadora e o frame, e padding entre as bordas internas do frame e os controles do widget.

Os widgets geralmente têm margens e padding entre a caixa delimitadora, o frame e os controles

Figura 2. Os widgets geralmente têm margens entre a caixa delimitadora e o frame e padding entre os controles do frame e do widget.

Observação : a partir do Android 4.0, os widgets de apps recebem automaticamente margens entre o frame e a caixa delimitadora do widget de app para fornecer um melhor alinhamento com outros widgets e ícones na tela inicial do usuário. Para aproveitar esse comportamento altamente recomendado, defina a targetSdkVersion do aplicativo para 14 ou mais.

Os widgets projetados para se ajustarem visualmente a outros widgets da tela inicial recebem dicas dos outros elementos da tela inicial para alinhamento. Eles também usam efeitos de sombreamento padrão. Todos esses detalhes estão descritos nesta página.

Como determinar um tamanho para seu widget

Cada widget precisa definir um minWidth e um minHeight, indicando a quantidade mínima de espaço que ele precisa consumir por padrão. Quando os usuários adicionam um widget à tela inicial, ele geralmente ocupa mais do que a largura e a altura mínimas especificadas. As telas iniciais do Android oferecem aos usuários uma grade de espaços disponíveis em que eles podem colocar widgets e ícones. Essa grade pode variar de acordo com o dispositivo. Por exemplo, muitos celulares oferecem uma grade 4x4, e os tablets podem oferecer uma grade maior, de 8x7. Quando o widget é adicionado, ele é esticado para ocupar o número mínimo de células, horizontal e vertical, necessário para atender às restrições minWidth e minHeight. Conforme discutido abaixo em Como projetar layouts de widget e imagens em segundo plano, o uso de planos de fundo Nine-Patch e layouts flexíveis para widgets de apps permite que seu widget se adapte perfeitamente à grade da tela inicial do dispositivo e permaneça utilizável e esteticamente incrível.

Embora a largura e a altura de uma célula e a quantidade de margens automáticas aplicadas aos widgets possam variar entre os dispositivos, você pode usar a tabela abaixo para estimar aproximadamente as dimensões mínimas do widget, dado o número desejado de células de grade ocupadas:

Nº de células
(Colunas ou linhas)
Tamanho disponível (dp)
(minWidth ou minHeight)
1 40 dp
2 110 dp
3 180 dp
4 250 dp
n 70 × n − 30

É uma boa prática ser conservador com minWidth e minHeight, especificando o tamanho mínimo que renderiza o widget em um bom estado padrão. Por exemplo, como fornecer um minWidth e um minHeight, suponha que você tenha um widget de player de música que mostra o artista e o título da música que está tocando no momento (empilhados verticalmente), um botão Play e um botão Next:

Exemplo de widget de player de música

Figura 3. Exemplo de widget de player de música.

A altura mínima precisa ser a altura das duas TextViews para o artista e o título, além de algumas margens de texto. A largura mínima precisa ser a largura mínima utilizável dos botões Reproduzir e Próxima, mais a largura mínima do texto (por exemplo, a largura de 10 caracteres), além das margens de texto horizontais.

Exemplos de tamanhos e margens para cálculos mínimos de largura e altura

Figura 4. Exemplos de tamanhos e margens para cálculos de minWidth/minHeight. Escolhemos 144 dp como um exemplo de largura mínima boa para os rótulos de texto.

Veja alguns exemplos de cálculos abaixo:

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48 dp + (2 × 4 dp) = 56 dp

Se houver algum padding de conteúdo inerente no Nine-Patch do plano de fundo do widget, adicione-o a minWidth e minHeight de acordo.

Widgets redimensionáveis

Os widgets podem ser redimensionados horizontalmente e/ou verticalmente a partir do Android 3.1, o que significa que minWidth e minHeight se tornam efetivamente o tamanho padrão para o widget. É possível especificar o tamanho mínimo do widget usando minResizeWidth e minResizeHeight. Esses valores especificam o tamanho abaixo do qual o widget ficaria ilegível ou inutilizável.

Geralmente, esse é um recurso preferencial para widgets de coleção, como os baseados em ListView ou GridView.

Como adicionar margens ao widget do aplicativo

Como mencionado anteriormente, o Android 4.0 adicionará automaticamente pequenas margens padrão a cada borda de widgets na tela inicial para aplicativos que especificam um targetSdkVersion de 14 ou maior. Isso ajuda a equilibrar visualmente a tela inicial. Portanto, recomendamos que você não adicione margens extras fora da forma de segundo plano do widget do app no Android 4.0.

É fácil criar um único layout que tenha margens personalizadas aplicadas a versões anteriores da plataforma e não tenha margens extras para o Android 4.0 e versões mais recentes. Consulte Adicionar margens aos widgets do app no Guia para desenvolvedores para ver informações sobre como fazer isso com o XML de layout.

Como criar layouts e gráficos de plano de fundo de widget

A maioria dos widgets terá um retângulo sólido ou uma forma de retângulo arredondado no plano de fundo. É uma prática recomendada definir essa forma usando nove patches, um para cada densidade de tela. Consulte Suporte para várias telas para mais detalhes. É possível criar o Nine-patch com a ferramenta draw9patch ou simplesmente com um programa de edição gráfica, como o Adobe® Photoshop. Isso permite que a forma de segundo plano do widget ocupe todo o espaço disponível. O Nine-Patch precisa ser de borda a borda, sem pixels transparentes com margens extras, exceto alguns pixels de borda para sombras projetadas sutis ou outros efeitos sutis.

Observação : assim como nos controles em atividades, você precisa garantir que os controles interativos tenham estados visuais de foco e pressionado distintos usando drawables da lista de estados.

Pixels de borda do Nine-patch

Figura 5. Pixels de borda do Nine-patch indicando regiões esticáveis e padding de conteúdo.

Alguns widgets de apps, como aqueles que usam StackView, têm um segundo plano transparente. Para esse caso, cada item individual no StackView precisa usar um plano de fundo Nine-Patch de ponta a ponta, com poucos ou nenhum pixel transparente de borda para as margens.

Para o conteúdo do widget, use layouts flexíveis, como RelativeLayout, LinearLayout ou FrameLayout. Assim como os layouts de atividade precisam se adaptar a diferentes tamanhos de tela física, os layouts de widget precisam se adaptar a diferentes tamanhos de célula da grade da tela inicial.

Veja abaixo um exemplo de layout de um widget de música que exibe informações de texto e dois botões. Ele está baseado na discussão anterior de adição de margens, dependendo da versão do SO. Observe que a maneira mais robusta e resiliente de adicionar margens ao widget é unir o frame e o conteúdo do widget em um FrameLayout preenchido.

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

Se você observar o exemplo de widget de música da seção anterior, poderá começar a usar atributos de layouts flexíveis da seguinte maneira:

Extrair layouts e atributos flexíveis para um exemplo de widget de música

Figura 6. Extrair layouts e atributos flexíveis.

Quando um usuário adicionar o widget à tela inicial, em um dispositivo Android 4.0 de exemplo em que cada célula de grade tem 80 dp × 100 dp e 8 dp de margens são aplicados automaticamente em todos os tamanhos, o widget será esticado da seguinte forma:

Widget de música em uma grade de exemplo de 80 dp x 100 dp com 8 dp de margens automáticas
  adicionadas pelo sistema.

Figura 7. Widget de música em uma grade de exemplo de 80 dp x 100 dp com 8 dp de margens automáticas adicionadas pelo sistema.

Como usar o pacote de modelos de widgets de apps

Ao começar a projetar um novo widget ou atualizar um que já existe, é recomendável analisar os modelos de design abaixo. O pacote para download abaixo inclui gráficos em segundo plano Nine-Patch, XML e arquivos de origem do Adobe® Photoshop para várias densidades de tela, estilos de widgets de versão do SO e cores de widgets. O pacote de modelos também contém gráficos úteis para tornar todo o widget ou partes dele (por exemplo, botões) interativas.

Trechos do modelo de widget

Figura 8. Trechos do pacote de modelos de widgets de apps (densidade média, escuro, estilos do Android 4.0/anterior, estados padrão/focados/pressionados).

É possível fazer o download do arquivo mais recente do pacote de modelos de widgets de apps no link abaixo:

Faça o download do pacote de modelos de widgets de apps para o Android 4.0 »