Os widgets de aplicativos (às vezes apenas "widgets") são um recurso introduzido no Android 1.5 e melhorado consideravelmente no Android 3.0 e 3.1. Um widget pode exibir as informações mais oportunas ou relevantes de um aplicativo rapidamente na tela inicial de um usuário. A imagem padrão do sistema Android inclui vários widgets, incluindo um para o Relógio analógico, o aplicativo Música e outros aplicativos.
Figura 1. Exemplos de widgets de aplicativos no Android 4.0.
Este documento descreve como criar um widget que combine graficamente com outros widgets e elementos da tela inicial do Android, como ícones e atalhos da tela de início. Também são descritos alguns padrões de arte de widgets e dicas e sugestões gráficas.
Para mais informações sobre o desenvolvimento de widgets, consulte a seção Widgets de aplicativos do Guia do Desenvolvedor.
Anatomia de widget padrão
Os widgets típicos de aplicativos para Android têm três componentes principais: uma caixa delimitadora, um frame e os controles gráficos e outros elementos do widget. Os widgets de aplicativo 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 uma lista completa de visualizações disponíveis, consulte a seção Como criar o layout do widget de aplicativo no Guia do desenvolvedor. 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.
Figura 2. Os widgets geralmente têm margens entre a caixa delimitadora e o frame e padding entre o frame e os controles.
Observação: a partir do Android 4.0, os widgets de apps recebem margens automaticamente entre o frame e a caixa delimitadora do widget de app para oferecer um melhor alinhamento com outros widgets e ícones na tela inicial do usuário. Para aproveitar esse comportamento altamente recomendável, configure a targetSdkVersion do seu aplicativo para 14 ou mais.
Os widgets projetados para combinar visualmente com outros widgets ou a tela inicial recebem indicações dos outros elementos da tela inicial em relação ao alinhamento. Eles também usam efeitos de sombreamento padrão. Todos esses detalhes são descritos neste documento.
Como determinar um tamanho para seu widget
Cada widget precisa definir um minWidth e minHeight, indicando a quantidade mínima de espaço que ele consumirá por padrão. Quando os usuários adicionam um widget à tela inicial, ele geralmente ocupa mais 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 smartphones oferecem uma grade de 4x4, e os tablets podem oferecer uma grade maior, de 8x7. Quando seu widget é adicionado, ele é esticado para ocupar o número mínimo de células, horizontal e verticalmente, necessário para satisfazer as restrições minWidth e minHeight. Conforme discutido em Como criar layouts e gráficos de plano de fundo de widget, o uso de planos de fundos e layouts flexíveis Nine-patch para widgets de aplicativos permitirá que seu widget se adapte à 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, assim como a quantidade de margens automáticas aplicadas aos widgets, variem entre os dispositivos, é possível usar a tabela abaixo para fazer uma estimativa aproximada das dimensões mínimas do widget, de acordo com o número desejado de células 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 prática recomendada ser conservador com minWidth e minHeight, especificando o tamanho mínimo de renderização do widget em um bom estado padrão. Para ver um exemplo de como fornecer minWidth e minHeight, suponha que você tenha um widget do player de música que mostre o artista e o título da música sendo reproduzida (empilhados verticalmente), um botão Reproduzir e um botão Próxima:
Figura 3. Exemplo de widget de player de música.
A altura mínima precisa ser a altura dos seus dois TextViews para o artista e o título, além de algumas margens do 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 (digamos, a largura de 10 caracteres), além das margens do texto horizontal.
Figura 4. Exemplo de tamanhos e margens para cálculos minWidth/minHeight. Escolhemos 144 dp como exemplo de uma boa largura mínima para os rótulos de texto.
Veja alguns exemplos de cálculos abaixo:
minWidth= 144 dp + (2 × 8 dp) + (2 × 56 dp) = 272 dpminHeight= 48 dp + (2 × 4 dp) = 56 dp
Se houver um padding de conteúdo inerente no Nine-patch de plano de fundo do widget, será necessário adicionar minWidth e minHeight.
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. Você pode especificar o tamanho mínimo do widget usando minResizeWidth e minResizeHeight. Esses valores especificam o tamanho mínimo para o widget não ficar 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 adiciona automaticamente pequenas margens padrão a cada borda de widgets na tela inicial para aplicativos que especificam targetSdkVersion como 14 ou mais. Isso ajuda a equilibrar visualmente a tela inicial. Sendo assim, recomendamos que você não adicione margens extras fora da forma de plano de fundo do widget do aplicativo no Android 4.0.
É fácil criar um único layout com margens personalizadas aplicadas a versões anteriores da plataforma e sem margens extras para o Android 4.0 e versões posteriores. Consulte Como adicionar margens aos widgets do aplicativo no Guia do desenvolvedor para ver informações sobre como fazer isso com o layout XML.
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 Nine-patch, um para cada densidade de tela, consulte Compatibilidade com várias telas para mais detalhes. É possível criar um Nine-patch com a ferramenta draw9patch ou simplesmente com um programa de edição gráfica como o Adobe® Photoshop. Isso permitirá que a forma de plano de fundo do widget ocupe todo o espaço disponível. O Nine-patch deve ser borda a borda, sem pixels transparentes, fornecendo margens extras, exceto talvez alguns pixels de borda para sombras projetadas sutis e outros efeitos sutis.
Observação: assim como nos controles de atividades, certifique-se de que os controles interativos tenham estados visuais de foco e pressionado distintos usando drawables da lista de estados.
Figura 5. Pixels de borda do Nine-patch que indicam regiões elásticas e padding de conteúdo.
Alguns widgets de aplicativos, como os que usam um StackView, têm um plano de fundo transparente. Para esse caso, cada item individual no StackView usará um plano de fundo Nine-patch de borda a borda com poucos ou nenhum pixel transparente de borda nas margens.
Para o conteúdo do widget, use layouts flexíveis, como RelativeLayout, LinearLayout ou FrameLayout. Assim como seus 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élulas 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. A forma mais robusta e resiliente de adicionar margens ao widget é unir o frame e o conteúdo do widget em um conjunto FrameLayout.
<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>
Olhando o exemplo de widget de música da seção anterior, é possível começar a usar atributos de layout flexível da seguinte maneira:
Figura 6. Extrair layouts e atributos flexíveis.
Quando um usuário adiciona o widget à tela inicial, em um dispositivo Android 4.0 de exemplo, em que cada célula da 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 maneira:
Figura 7. Widget de música em uma grade de exemplo de 80 dp x 100 dp com 8dp 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 widget existente, é uma boa ideia analisar primeiro os modelos de design abaixo. O pacote disponível para download abaixo inclui gráficos em segundo plano Nine-patch, XML e arquivos do Adobe® Photoshop para diversas densidades de tela, estilos de widget 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.
Figura 8. Trechos do pacote de modelos de widgets de apps (densidade média, escuro, estilos Android 4.0/anteriores, estados padrão/em foco/pressionado).
É 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 »