Chips Android, Quando e Como Utilizar

Chips Android, Quando e Como
Utilizar Este Componente
thiengo.com.br

O componente Chip
O chip componente é uma pequena caixa que pode
conter até: imagem de perfil; texto; e ícone. Na
documentação do Material Design este componente
é descrito como "pequena caixa complexa" podendo
ser utilizado em vários contextos: tags; contatos;
marcações em texto; entre outros.
Para o chip componente, diferente do
BottomNavigationView e de outros componentes
visuais apresentados na documentação do Material
Design, não temos, até o momento da publicação
deste conteúdo, uma API nativa e sim várias APIs
de terceiros, algumas mais completas, gerais, e
outras mais especificas e menores.
Neste conjunto de slides vamos demonstrar o uso do chips componente com uma
library que internamente contém outras três bibliotecas sobre chips, bibliotecas
que se complementam. Assim teremos somente uma API sendo referenciada
diretamente, porém com uma reprodução mais próxima do demonstrado na
documentação do Material Design.

Especificações de uso
- Qualquer contexto onde seja necessário, de maneira destacada e completa, a
apresentação de pequenos itens que tenham ao menos um pequeno trecho de
texto:
- Representação de contato, tag de conteúdo, informe publicitário, notificação
interna, entre outros;
- Esta parte de "ao menos um pequeno trecho de texto" é definida aqui de
maneira explícita, pois na documentação do chips no Material Design isso
fica implícito: não fazer sentido ter um ChipView sem um pequeno texto,
mesmo que ele já tenha imagem e ícone.
Note que todas as especificações
para o componente chip são válidas
não somente para apps Android
como também para qualquer
aplicativo que faz uso da linguagem
de design Material Design

Especificações de comportamento
- O acionamento de um chip pode abrir
uma nova tela, mesmo que seja uma
flutuante em um card, ou abrir um
novo menu, também flutuante. Essa
nova entidade aberta deve ter
conteúdo relacionado ao chip
acionado;
- A opção de "deletar" pode fazer parte
do chip, um ícone de remoção estará
presente nele. A invocação da tecla
de delete também deverá acionar a
remoção do chip.
Clique para visualizar a animação

Especificações para chip de contato
Há na documentação de chip uma área somente para a formatação deste componente
quanto a apresentação de informações de contato.
Isso, pois chips de contato permitem um contexto mais eficiente ao usuário emissor de
conteúdo (SMS, email, mensagem social, …). O user, com as informações dos chips dos
usuários selecionados, saberá, sem dúvidas, quais pessoas foram escolhidas para envio.
- Quando o chip de contato é acionado, deve ser aberto um menu com algumas
informações extras sobre cada possível contato do chip acionado;
Na documentação do
Material Design,
quando o chip de
contato é acionado e
então um menu de
opções é aberto, este
é considerado
também um chip,
porém no modo
"aberto", algo não
verdadeiro quando o
chip não é um de
contato.

- O chip de contato tem quatro possíveis
estados:
- Normal (normal);
- Com focus (focused);
- Pressionado (pressed);
- Ativo (activated).

Especificações de design
- Somente textos curtos, sem quebras de linha:
- A exceção é para chips de contato quando no estado "aberto", onde pode
haver ainda mais linhas nos itens de menu.
- Os textos devem ter um tamanho de 13sp. Como cor, o preto (ou a cor de
contraste com o background do chip) com o canal alpha ligado, opacidade de
87%:
- Para o tamanho da fonte há uma exceção quando o chip for de contato.
Quando fechado ele deve ter 14sp ao invés dos 13sp. Aberto deve ter 16sp.
- A seguir as regras de dp para um single chip (chip sem ser de contato):

- A seguir as regras de dp para um chip de contato:

API externa
Aqui vamos utilizar a API MaterialChipsInput que a princípio é a mais completa
API, presente na comunidade Android, e atende a partir do Android 15, Ice Cream
Sandwich, mais de 99% dos devices Android em mercado.
Dentro desta library há também códigos de outras APIs sobre o chip componente,
APIs que podem ser melhores opções a ti caso o seu domínio do problema seja
mais específico e não necessite de todos os possíveis chips descritos na
documentação do Material Design.
Seguem bibliotecas internas ao MaterialChipsInput:
- Android Material Chips;
- Material Chip View;
- ChipsLayoutManager.

Instalação
Coloque a seguinte referência no Gradle
Project Level, build.gradle (Project: …):
Coloque a seguinte referência no Gradle App
Level, build.gradle (Module: app):
Para ambos os
arquivos Gradle:
sempre utilize a
versão mais atual
e estável da API.Sincronize o projeto.

Definição em XML do ChipsInput
ChipsInput é a opção do MaterialChipsInput para trabalho com chips de contato.
Todos os atributos de app: são opcionais e toda a configuração em XML pode
ser também criada via código de programação em alguma das linguagens
oficiais do Android.

Definição em Programação do ChipsInput
Como o ChipsInput faz uso
de vários componentes
visuais do Android:
RecyclerView,
LayoutManager e EditText.
Temos também que trabalhar
a inicialização via código
dinâmico.
Os itens de lista vinculados
via setFilterableList() não
são equivalentes aos itens
selecionados pelo usuário. Os
itens selecionados são os que
foram apresentados ao
usuário e ele os escolheu
depois dessa apresentação,
colocando-os dentro
do ChipsInput.
O vinculo de "itens selecionados" para com o ChipsInput é um
vinculo de parent, já o vinculo da "lista de contatos para sugestão"
com esse mesmo componente é um vinculo de siblings.

Adição de chip de contato
Há mais de uma interface pública para a tarefa de adição de chip selecionado.
A adição de chip via addChip() coloca este novo item na lista de chips
selecionados, selectedChipList. Para a adição de chip a lista de sugestões, o
processo é como adicionar um objeto a uma coleção, neste caso o acesso a
coleção de sugestões é via chipsInput.filterableList.

Remoção de chip de contato
Como para a adição, há também mais de uma interface pública para a tarefa de
remoção de chip selecionado.

Configuração com ChipsInterface
Para criar as suas próprias configurações de objeto chip, crie uma classe que
implemente a Interface ChipInterface:

ChipsListener para eventos
Se em seu domínio do problema é necessário ouvir: a entrada de texto do
usuário; a criação de novos chips; ou a remoção destes. Utilize o ChipsListener:
Este listener será muito útil caso em seu ChipsInput seja possível a entrada de contatos não presentes na
lista de sugestão. Ao menos com o onTextChanged() é possível criar um novo chip e adiciona-lo ao
ChipsInput se algumas regras forem encontradas no texto digitado, por exemplo: quando o usuário entra
com um novo endereço de email.

Carregamento remoto de dados do ChipsInput
Para dados assíncronos, que chegam ao aplicativo depois do ChipsInput já ter
sido iniciado e apresentado em tela, é preciso a modificação da lista de contatos
vinculada ao ChipsInput.
Note que um novo objeto
adicionado via chipsInput.add()
não é adicionado a lista de
sugestões, somente a lista de
contatos selecionados.
Uma outra opção a
substituição completa de lista
é a adição da nova coleção à
já existente:
chipsInput.filterableList.ad
dAll( contatos ).

Definição em XML do ChipView
O ChipView responde a todos os outros possíveis usos do componente chip, via
MaterialChipsInput.
Todos os atributos app: são opcionais, mas como informado anteriormente nas
especificações de chip componente: não faz sentido utilizar um chip sem um
rótulo em texto. Por isso, não deixe de especificar ao menos o app:label.

Definição em Programação do ChipView
É possível criar o ChipView e
toda a configuração dele
também em código de
programação.
Porém não há obrigatoriedade
do acesso via algoritmo como
com o ChipsInput, podemos
ter somente o XML definido e
resultados visuais similares.
Somente trabalhe com o
ChipView via algoritmo se a
sua lógica de negócio exigir.
Isso é importante para manter
a separação conceitos a mais
precisa possível.
ChipView em tela, representação de qualquer tipo de chip

Listeners de click e de remoção de ChipView
Para trabalhar eventos nos ChipViews, tem as opções de listener de clique e
listener de remoção de chip.

Fluxo para o carregamento de imagens
remotas em chips de contato
Para o trabalho com APIs de carregamento de imagens remotas, imagens de
avatar, uma possibilidade é construir um algoritmo que siga o fluxo abaixo.
Depois de vários testes é
possível notar como é o
comportamento interno do
MaterialChipsInput API.
Propriedades com o valor null
não são utilizadas, mesmo que
o null seja atribuído quando o
objeto ChipInterface já tenha
sido inicializado.

Limitações da API
- Quando a área de listagem de contatos selecionados no ChipsInput é pequena em tela, a
abertura de algum dos chips, o menu flutuante, somente pode ser posteriormente fechada
se deletarmos o item aberto, algo que ocasiona na remoção também do chip da listagem de
contatos selecionados. Isso é um bug, pois ocorre somente nesta condição "área pequena";
- Quando há a remoção de um chip de contato por meio da listagem de chips selecionados e
este chip também estava no estado "aberto", uma exceção é gerada e o app é fechado. A
API deveria gerenciar este caso e remover também o chip aberto;
- Não há uma maneira trivial de obter imagens remotas, algo que possivelmente será
necessário quando trabalhando com chips de contato;
- A documentação falha em informar sobre possibilidades de carregamentos remotos, de
contatos e de imagens, e não comenta sobre o comportamento interno da API de acordo
com as propriedades preenchidas. Nós developers temos de descobrir por "tentativa e
erro";
- Quando, no campo de ChipsInput, é fornecido o contato de algum usuário presente na lista
de sugestões, ele não é adicionado automaticamente se o user do app não seleciona-lo
manualmente pela lista, fica como se fosse um novo contato. Temos de construir na mão o
algoritmo dessa simples funcionalidade;
- Se o addChip() for utilizado sequencialmente, uma exceção é gerada.

Outras APIs
Caso queira estudar ainda mais APIs de componentes chip, não deixe de acessar
o link a seguir no Android-Arsenal:
- https://android-arsenal.com/search?q=chip

Conclusão
Com o componente chip é possível melhorar consideravelmente a experiência do
usuário e passar ainda mais profissionalismo seu ao aplicativo construído.
Podemos seguramente aguardar o lançamento de uma API nativa para este
componente, tanto para contatos como também para outros contextos.
Mas até que essa API nativa seja desenvolvida, podemos manter o uso, por
exemplo, da MaterialChipsInput que dá suporte a partir da API 15 do Android,
cobrindo mais de 99% do mercado.
As limitações da API estudada em slides não removem o bom custo benefício
dela, mesmo assim, caso você não necessite de chips em todos os contextos
possíveis, tente utilizar alguma API mais específica, que permita o trabalho
somente com chips de contato, por exemplo, ou chips para tag.

Fontes
Conteúdo completo, em texto e em vídeo, no link a seguir:
- https://www.thiengo.com.br/chips-android-quando-e-como-utilizar
Fontes:
- https://material.io/guidelines/components/chips.html
- https://github.com/pchmn/MaterialChipsInput
- https://www.thiengo.com.br/como-utilizar-spannable-no-android-para-
customizar-strings
- https://stackoverflow.com/questions/2801116/converting-a-view-to-bitmap-
without-displaying-it-in-android/3036736#3036736

Para estudo
- Treinamento oficial:
- Prototipagem Profissional de Aplicativos Android.
- Livros oficiais:
- Receitas Para Desenvolvedores Android;
- Refatorando Para Programas Limpos.
- Redes:
- Udemy;
- YouTube;
- Facebook;
- LinkedIn;
- GitHub;
- Twitter;
- Google Plus.
- Blog App.

Chips Android, Quando e
Como Utilizar Este Componente
thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com

Chips Android, Quando e Como Utilizar

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Chips Android, Quando e Como Utilizar

Similar to Chips Android, Quando e Como Utilizar (20)

More from Vinícius Thiengo

More from Vinícius Thiengo (12)

Chips Android, Quando e Como Utilizar