Android UI: Bottom Sheet
Um dos responsáveis pela introdução de componentes ergonômicos no Android.
Virou tendência as fabricantes desenvolverem celulares com telas maiores e muita gente adora isso. Porém, quanto maior a tela, menor é a experiência de uso quando utiliza-se o aparelho com uma só mão: é horrível alcançar o topo da tela com o polegar!
E isso é um problema, porque a maioria dos componentes do Material Design 1 foram pensados para o topo da tela, e isso inclui AppBar, ActionBar, Drawer Layout e alguns outros.
E o time do Material Design, que não é boba nem nada, já começava a introduzir componentes ergonômicos desde a versão 23 da biblioteca de suporte e design, e o Bottom Sheet estava lá.
Mais ergonômia, por favor.
Entenda ergonômia como a ciência do conforto, a interação entre homem-máquina, e isso também é muito importante na nossa área.
Ter um aplicativo ergonômico significa deixar o usuário mais confortável quanto ao uso do mesmo. É muito ruim ter um celular com uma tela de 5.99" e ter que mover o polegar ao topo da tela para realizar uma determinada ação, e eu acredito que todo mundo já tenha se deparado com este problema.
Bottom Sheet é um componente presentee no fundo da tela e é responsável por exibir conteúdo extra ou alguma ação.
Esse componente pode fazer parte da sua UI, presente no layout da tela, assim como também pode ser usado como um dialog, ou seja, desconectado da sua tela.
Utilizando o Bottom Sheet
O componente existe desde a versão 23.2 da biblioteca de suporte do Android. Se o seu projeto utiliza os artefatos do AndroidX, você deve utilizar a biblioteca do material design, senão a de design da biblioteca de suporte.
// AndroidX
implementation "com.google.android.material:material.1.0.0"// AppCompat
implementation "com.android.support:design:28.0.0"
Bottom Sheet incorporado na UI, via XML
Como dito anteriormente, você pode utilizar ele de duas formas: diretamente no layout ou como um dialog.
Neste caso, iremos aprender como o utilizar diretamente no layout, como parte da nossa View.
O pré-requisito para utilizar o Bottom Sheet no layout é a necessidade dele ser filho do CoordinatorLayout.
Os atributos behavior_peekHeight e layout_behavior são aplicados à classe BottomSheetBehavior que realiza os efeitos de sliding do conceito do Bottom Sheet, o PeekHeight é utilizado para definir a parte visível ao usuário.
Então, se o PeekHeight
- Não for definido, a parte visível ao usuário será todo o layout do Bottom Sheet.
- For 0dp, o layout não será visível ao usuário.
- For diferente de 0dp, a parte visível será do tamanho definido. Se chamarmos essa parte de header, e ela possui um tamanho de 86dp, então concluímos apenas ele estará visível.
Pronto. Você só precisa deste código no XML para criar um Bottom Sheet presente em sua View. O resultado do feito está logo abaixo.
Como você pode observar, não foi necessário nenhuma configuração do componente via código, isso porque o atributo behavior que atribuímos a ele faz referência à classe BottomSheetBehavior que faz todo o trabalho para nós.
Essa classe realiza todos os efeitos e comportamentos definidos nos conceitos do componente. Você pode herda-la e customizá-la a seu gosto.
Você também pode pegar a referência dela a partir do seu Bottom Sheet e customizar o comportamento dele via código.
Bottom Sheet fixo na tela
O código acima modifica o comportamento do BottomSheet, utilizando o atributo Hideable do BottomSheetBehavior, fazendo com que ele fique fixo na tela, ou seja, o usuário não conseguirá fazer com que ele suma da tela.
Bottom Sheet em tela cheia
Uma das coisas mais legais de Bottom Sheet e que vários aplicativos já usam, é o comportamento dele que permite que o usuário possa deslizá-lo até o topo da tela, veja o Google Maps ou até mesmo o Nubank, este permite o deslize até, aproximadamente, 80% da tela.
Esse efeito é bom para a experiência do usuário porque permite uma visão mais ampla da UI e também faz com que o aplicativo tenha uma UI mais flexível, sem necessitar de uma navegação profunda.
A lógica do código é simples: pegamos o tamanho total da tela e modificamos o LayoutParams do BottomSheet, especificando que agora o Height dele deve ter o mesmo tamanho da tela do dispositivo, permitindo, assim, o efeito de tela cheia.
Bottom Sheet como Dialog
Uma das outras formas de implementar o Bottom Sheet é o utilizando como Dialog. Isto é, não conectado à view e reutilizável.
Eu gosto de utilizar o Bottom Sheet como um Dialog porque isso permite que ele seja reutilizado em várias partes do app, sem precisar repetir código ou lógica de apresentação.
Eles também são mais fáceis de utilizar em dispositivos com telas grandes, comparados aos convencionais dialogs que posicionam-se no centro da tela.
A implementação é simples, a maior parte por código e a configuração também, se necessária.
O único ponto que o diferencia do Bottom Sheet via XML é que ele não necessita ser um filho direto de um CoordinatorLayout, e a implementação de um BottomSheetBehavior também não é necessária, pois o próprio Fragment herdado já o faz.
A regra para o peekHeight também é aplicável e funciona da mesma forma, mas deve ser feita via código, já que o layout não pertence à um CoordinatorLayout.
Felizmente, o código não é muito diferente da outra implementação, o único adicional é a questão da inicialização do próprio Fragment.
No caso acima, eu defino o peekHeight como uma dimensão, para não precisar converter Intpara dp
O peekHeight só é atribuído no onResume para garantir que o getParent() retornado pela View não seja nulo. Uma outra forma é postergar a ação com Post (veja View.Post).
Bottom Sheet Dialog em tela cheia
Ele também pode ter o mesmo comportamento de tela cheia e o código… é o mesmo!
Mesmo código, mesma lógica: especificar que o tamanho do Bottom Sheet, que neste caso é o getParent() da View do Fragment, terá o mesmo tamanho da tela do dispositivo.
Observação: você pode modificar o valor, e fazer com que o Bottom Sheet ocupe apenas 80% da tela ou o que você quiser.
Observação 2: você também pode configurar o comportamento em que o usuário pode fechar o Bottom Sheet deslizando-o, da mesma forma que foi feita com o Bottom Sheet por XML, usando o atributo extraHideable
O resultado é um Bottom Sheet deslizável até o topo da tela, mas que só pode ser fechado ao tocar fora dele.
É isso, amiguinhos. Com esse artigo já dá pra ter uma boa ideia de como e porquê usar o Bottom Sheet em seus aplicativos.
Esse é só o primeiro de uma série de artigos sobre os componentes de UI do Android.
Qualquer dúvida, reclamação, crítica ou sugestão é bem vinda.
Happy coding. 👌
Links
