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](https://developer.android.com/static/images/widget_design/widget_examples.png?authuser=5&hl=pt)
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](https://developer.android.com/static/images/widget_design/widget_terms.png?authuser=5&hl=pt)
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](https://developer.android.com/static/images/widget_design/music_example.png?authuser=5&hl=pt)
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](https://developer.android.com/static/images/widget_design/music_example_red_line.png?authuser=5&hl=pt)
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) = 272dpminHeight
= 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](https://developer.android.com/static/images/ninepatch_raw.png?authuser=5&hl=pt)
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](https://developer.android.com/static/images/widget_design/music_example_layouts.png?authuser=5&hl=pt)
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.](https://developer.android.com/static/images/widget_design/music_example_stretched.png?authuser=5&hl=pt)
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](https://developer.android.com/static/images/widget_design/widget_template_excerpts.png?authuser=5&hl=pt)
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 »