Data Binding no Android: vinculando modelo com layout

Utilizando o binding de views - Introdução

Olá, pessoal! Tudo bem? Eu sou o Alex Felipe, instrutor aqui da Alura e vou apresentar para vocês o curso de Data Binding no Android.

Para esse curso eu vou exigir que você tenha como pré-requisito todo o conteúdo que vimos sobre arquitetura de Android, utilizando ali o ViewModel, LiveData e o Room, porque eu já vou usar como base nesse projeto que vamos usar como exemplo.

Se pegarmos esse projeto, nós percebemos que é um projeto que nos lista notas, tanto permite editar, como também inserir notas. Só que o nosso foco não vai ser tanto nessa parte do produto, e sim na maneira como nós implementamos esse tipo de solução, em relação à questão de como pegamos o nosso código-fonte ali, o nosso modelo, e integramos com a parte visual, que fazemos um vínculo.

E essa vai ser a base do nosso curso. Vamos ver como que o Data Binding, como uma biblioteca aqui do Android, consegue nos ajudar. Passando um pouquinho mais sobre essa parte técnica. O que seria esse Data Binding?

Se pegarmos aqui, na própria página do Jetpack, inclusive - é um componente que faz parte do Jetpack, da parte de arquitetura - nós percebemos que ele faz parte de uma biblioteca para nos ajudar nesse tipo de tarefa, que é pegar o código que temos interno, o nosso modelo, por exemplo, e vincular com a nossa tela de layout.

Vai ser isso que nós vamos aprender durante esse curso. Como nós conseguimos instalar, usar o Data Binding e usar os seus recursos, para ajudar o nosso trabalho como desenvolvedores de Android a fazer esse vínculo entre o código-fonte e o layout.

Se pegarmos um pouquinho aqui da página, vamos ver basicamente o que veremos durante o curso. Então tem essa parte de como utilizamos, vai ter a parte de como utilizamos as expressões, para vermos como é possível, por exemplo, determinarmos se uma view vai aparecer ou não. Querendo ou não, aqui nós temos algumas regrinhas que mostram isso.

Como é o caso, por exemplo, de tentar colocar o endereço de uma imagem e apresentar esse conteúdo. Nós vamos ver como é possível colocarmos aqui e fazermos essas coisas visíveis ou então como vamos apagar e assim por diante.

Nós vamos ver que atualmente o nosso código-fonte já tem isso disponível para nós. Tudo está funcionando, só que nós vamos ver que está um pouquinho manual, e com o Data Binding nós vamos fazer toda essa conversão. Então, vão ter as expressões, vai ter a maneira como colocamos, por exemplo, objetos observáveis, o que seria one-way e two-way Data Binding.

Vamos ver também que existe até mesmo a maneira como vinculamos aqui, ou no caso integramos, o Data Binding com o LiveData, para que nós consigamos também entregar aquela solução que vimos com o Lifecycle-Aware, então também vamos ver isso. Vamos conhecer toda a base de como funciona o Data Binding e como podemos estar resolvendo os problemas comuns.

Então perceba que não vai ser um curso para implementar novas features, e sim analisar o projeto da maneira como ele está atual e como ele pode ser melhorado em relação a esse comportamento de vínculo entre o dado e o layout, utilizando aqui, o Data Binding.

Eu espero que você tenha gostado da proposta do curso. Perceba que é um curso um pouquinho mais avançado mesmo, porque já exige um pouco mais de pré-requisito, mas você vai ver que vai ter bastante ganho durante a conclusão. Eu conto com a sua presença e até mais!

Utilizando o binding de views - Conhecendo o projeto

Antes de começarmos a falar sobre o Data Binding, eu vou aproveitar esse momento para apresentar para você o nosso projeto que será utilizado durante o curso, seja na parte de features, que são os comportamentos que temos implementados, como também na implementação de código, as bibliotecas, as ferramentas e assim por diante. Então vamos começar!

Como vemos aqui logo de cara, a primeira feature que podemos ver é a listinha de notas. Veja que temos uma lista de notas, algumas com alguns aspectos diferentes, nós vamos entender no decorrer dessa apresentação. Perceba que a princípio esse é o primeiro comportamento.

No final dessa telinha nós percebemos também que temos um botão aqui, um “floating action button”, para que consigamos acessar uma nova tela que permita adicionar novas notas. Vamos clicar para vermos como funciona.

Veja que ele já mostra uma tela vazia, indicando que podemos estar colocando um título, uma descrição, aqui temos uma estrelinha, que seria um “checkbox”, para indicar se é uma nota favorita ou não.

E também temos a capacidade de adicionar uma foto, aqui temos outro “floating action button” para isso. Então vamos preencher aqui uma nota nossa, para vermos como seria a adição de uma nota.

Vou colocar o título como “teste”, a descrição também vou colocar como “teste” e aqui eu vou marcar como favorito, para vermos esse comportamento. Então eu vou adicionar uma foto.

Nesse caso da foto, olhe só o que acontece, nós abrimos um “alert”, nos indicando que temos que colocar uma URL, e podemos estar colocando clicando nesse campinho, nesse “edit text”, que ele fala “Digite o endereço da imagem”.

Se colocarmos qualquer coisa, por exemplo, olhe só o que acontece: vamos clicar em “Salvar” e ele vai tentar carregar a imagem. Por padrão, quando ele não consegue carregar a imagem, ele nos mostra esse “X”. Ele vai nos mostrar que carregou alguma coisa, só que ele fala: “Eu tentei carregar, mas não deu certo. Então esse é o padrão para você, tente colocar outra válida”.

E ao mesmo tempo, quando ele indicou ali, ele percebeu que tem algum endereço, ele sumiu com o “floating action button”, é uma regrinha que colocamos aqui. Para colocarmos novamente a imagem, nós clicamos sobre a imagem e ele nos abre novamente o “alert dialog”. Nós tiramos esse endereço e colocamos um endereço válido de uma imagem, mas qual seria esse endereço válido?

Aqui, o que nós utilizamos? Uma biblioteca que se chama Glide, que tem capacidade de carregar imagens até mesmo de endereços HTTPS, então podemos pegar um endereço HTTPS e podemos colocar aqui, que ele vai carregar para nós.

A minha sugestão é você utilizar alguma imagem que está na internet, que seja um endereço que você conheça, ou então, você pode pegar até mesmo de sites como o Pixabay, que são imagens gratuitas, e utilizar essas imagens que estão apresentadas aqui. Você pode pegar qualquer uma delas.

Por exemplo: essa que tem uma lâmpada. Eu vou clicar em cima dela, ele vai abrir a imagem e eu vou clicar com o botão direito. “Copiar endereço da imagem”. Copiou e aqui eu entro, eu pressiono. Ele vai apresentar essa opção de “paste”, eu dou o “paste” aqui. Olhe só o “.jpg” no final, que é a extensão da imagem, eu vou salvar e ele carregou a imagem para nós.

Então com o Glide, que é a ferramenta que nós utilizamos, ele tem essa capacidade e conseguimos colocar aqui a imagem sem nenhum problema. Vamos salvar para vermos como fica? Vamos lá!

Para isso, eu clico aqui e - olhe só no topo, ele salva a notinha para nós! É dessa maneira que nós conseguimos salvar a nota, essas são as duas principais features. A outra e terceira feature que temos aqui é a edição, nós conseguimos entrar aqui e editar essa nota.

Já que tínhamos um aspecto que tinha um favorito e tinha uma imagem, vamos ver como fica sem esses dois itens. Eu vou tirar aqui o nosso favorito e também a nossa imagem. Para isso, eu seleciono tudo e apago. Salvo. Ele foi lá e apareceu aqui o “floating action button” novamente, mas agora não temos nenhuma imagem. Eu vou salvar aqui e já não temos mais o nosso favorito e a nossa imagem.

Essas são as features que vamos ter durante o curso, o que estaremos analisando durante o nosso projeto e também vamos utilizar o Data Binding para que mantenha esse mesmo comportamento, só que com as soluções do Data Binding.

Agora, em relação a implementação de código, o que estamos utilizando aqui? Como eu havia comentado, para carregarmos as nossas imagens nós estamos utilizando o Glide. Essa é a página do GitHub do Glide, no qual mostra como você consegue utilizá-lo dentro do seu projeto.

Ele mostra algumas referências para documentação, a página de releases e assim por diante. Fique à vontade de consultar, de repente, explorar um pouquinho mais essa ferramenta, que é muito bacana. Você pode até mesmo usar em projetos seus.

E o que mais nós estamos utilizando? Também estamos usando como base até mesmo conteúdos que vimos de cursos anteriores, da Architecture Components. Estamos usando, por exemplo, Lifecycles, LiveData, Navigation, o ViewModel, o Room e aqui já estamos tendo aquela estrutura que já conhecemos, que é do guia de arquitetura de aplicativos Android. Estamos mantendo também aquela mesma arquitetura.

Se caso tiver dúvida de como é, você pode pegar aqui, “guide architecture android”, e ele já mostra no próprio Google como funciona essa arquitetura. Se você vier aqui novamente no diagrama, você vai dar aquela relembrada, porque já usamos bastante aqui, o ViewModel, Repository, temos o WebPI etc.

Nesse caso, nesse curso eu estou usando apenas o Room, então é um banco de dados apenas interno, porque não tem tanta necessidade de integração para podermos utilizar aqui o Data Binding. Foi por isso que eu não utilizei toda ela completa, então essa parte de acessar o dado remotamente, nós não estamos fazendo para não ficar mais complexo do que deveria.

E o que vamos estar utilizando vai ser o nosso Data Binding, em relação à essa parte arquitetura. Nós percebemos que o Data Binding faz parte também do Architecture Components, então vamos estar utilizando essa ferramenta para nos auxiliar em algumas partes que vamos conhecer durante o curso.

Um outro ponto que também é interessante é que aqui você percebe que quando eu inicializei o nosso projeto, ele já veio com essas notas, a “Título 10”, “Título 9”, 8 etc. Essas notas são um “preset” que eu fiz para nós. Onde está esse “preset”? Ele está nesse arquivo chamado de “AppModules”.

Nesse “AppModules”, o que está acontecendo? Aqui nós estamos utilizando o Koin como uma solução de ação de dependência e aqui eu crio uma instância de banco de dados de testes, para que consigamos fazer toda a brincadeira e consigamos testar sem nenhum problema.

E dele tem um callback do próprio banco de dados, que no momento em que faz uma criação, ele adiciona aqui várias notas, até mesmo aquelas imagens que vimos por padrão, são imagens que podem vir aleatoriamente.

Aqui temos uma quantidade mais ou menos de 10 imagens e aqui eu meio que faço um sorteio de qual vai ser a imagem durante essa criação. É por isso que tem notas aleatórias, algumas são favoritas, outras não, para que tenhamos um aspecto visual diferente das possibilidades.

Então, é basicamente isso que temos aqui de projeto. Fique à vontade para consultar o código-fonte, eu vou deixar disponibilizado para vocês. Até mesmo também o link, já que faz o download em um zip. Aí vocês fazem aquele processo de tirar do zip e colocar aqui no Android Studio. Execute e veja se chega a esse mesmo resultado.

A seguir nós já começamos a entender o que seria o Data Binding e como podemos estar utilizando-o dentro do nosso projeto. Até já!

Utilizando o binding de views - Introduzindo o Data Binding

Agora que já conhecemos o nosso projeto, vamos entender como o Data Binding vai nos ajudar durante o nosso desenvolvimento. Então vamos começar.

Vamos partir da página do Jetpack, que mostra, justamente dentro do Architecture Components, o Data Binding. Ele vem com a seguinte mensagem: "Vincule de forma declarativa dados observáveis a elementos da IU". O que isso significa, então, sem pegar todo aquele contexto?

Significa que ele vai atuar naquele processo que fazemos entre pegar o nosso código-fonte e vincular ao código do layout; com toda aquela declaração que fizemos do layout. Então o DataBinding vai atuar nessa parte. E agora vamos entender, com mais detalhes, como ele vai nos ajudar com relação a essa tarefa.

Então, para isso, eu vou clicar no link do Data Binding e ele vai abrir essa página de overview, em que ele mostra uma visão geral de como funciona essa ferramenta para nós.

Então, logo de cara, ele já vem com aquela ideia de como fazer o vínculo de dados do nosso aplicativo com o layout. Esse é o modo padrão, que aprendemos desde os fundamentos de aplicativos Android.

Então, ele fala que é muito comum fazermos a busca de uma view com base em um layout que temos. E então, com base no conteúdo que buscamos, modificamos uma propriedade. Ele está mostrando uma solução em Kotlin que usa o apply; e em Java seria algo bastante similar, só que teria mais uma linha mostrando setText.

E isso é muito comum. Aqui nesse projeto inicial, como base, nós também estamos fazendo isso. Seja aqui no RecyclerView, em que usamos um adapter e fazemos o vínculo desses dados, utilizando essa mesma técnica; ou até mesmo o nosso formulário. Então precisamos sempre ter essa tarefa de criar um layout, buscar a view e, depois, fazer essa manipulação para gerar o vínculo de dados, independentemente do que for.

Com o Data Binding, temos uma proposta um pouco diferente. Vamos, sim, conseguir fazer o vínculo; só que, na implementação, será mais declarativo para a parte do layout. O que isso significa?

Que, dentro do layout, nós vamos falar o que queremos fazer com determinado objeto. Aqui no exemplo ele fala o seguinte: ele está recebendo, por exemplo, um viewmodel (poderia ser qualquer coisa), e ele está usando essa propriedade para preencher o TextView mostrado acima.

Então veja que, no Data Binding, temos essa outra oportunidade. Ao invés de buscar todas as views e depois fazer todo o vínculo dentro do código-fonte, faremos isso por meio do layout. O nosso próprio layout vai se responsabilizar em pegar um objeto qualquer e, a partir deste objeto (que ele sabe o que é), ele coloca os dados conforme o que é esperado.

Quais benefícios nós temos com isso? Não precisamos mais buscar todas as views e fazer todo esse tratamento para cada layout que formos utilizar. Faremos isso uma única vez no layout, podendo reutilizar esse layout em qualquer outro tipo de entidade do Android, seja Activity, Fragment, e assim por diante. Essas entidades vão apenas mandar esse objeto para o nosso layout. E ele fica totalmente responsável por fazer tudo o que precisa ser feito.

Então veja que, a princípio, o core do Data Binding é, justamente, fazer esse procedimento: evitar que, no código-fonte, nós nos responsabilizemos por indicar o que cada elemento visual deve fazer com base no objeto que temos na nossa fonte.

Como podemos ver, temos diversos tipos de recursos no Data Binding. São expressões para conseguir fazer algumas coisas um pouco mais complexas como trabalhar com objetos observáveis e, até mesmo, notificar o nosso layout quando tivermos uma mudança no código-fonte. Isso sem ter que fazer novamente o setText e assim por diante. Veremos que o Data Binding tem esse tipo de possibilidade, o que é algo muito bacana.

E vamos entender também que, para que ele funcione, serão utilizadas técnicas bem comuns em outras ferramentas, como o Annotation Processor. No caso, não utilizaremos anotações, porque já existe certa integração dentro do Android SDK, mas ele vai usar o Processor para gerar as classes para nós.

Dessa maneira, quando estivermos utilizando o layout, vamos perceber que vai ser interessante, por exemplo, ter um feedback se o que colocamos no XML está sendo funcional com base no que temos no código-fonte. Então, veremos que, por meio do Processor, ele consegue fazer isso para nós - dar esse feedback, seja um erro ou algo que está funcionando.

Veremos que tem adaptadores e assim por diante. Então, como overview, queria realmente passar essas informações para vocês. Dessa maneira, você já tem um resumo de como será essa ferramenta, de como utilizá-la e o que ela traz de benefícios.

É claro, durante o curso veremos com mais detalhes alguns dos benefícios, o que temos de ganho. Nesse mo0mento, perceberemos realmente o poder do Data Binding.

E agora que passamos por essa breve introdução, falando dos principais destaques, vamos, em seguida, colocar o Data Binding no nosso projeto. Vamos começar com a nossa conversão, por exemplo, a nossa listinha de notas. Então, até já.

Sobre o curso Data Binding no Android: vinculando modelo com layout

O curso Data Binding no Android: vinculando modelo com layout possui 169 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Utilizando o binding de views
• Implementando Binding Adapters
• Lidando com event listeners
• Entendendo one-way e two-way Data Binding
• Campos observáveis e LiveData