Android com Kotlin: personalize o seu app

Personalizando o item do produto - Apresentação

Olá, pessoal! Beleza? Eu sou o Alex Felipe, instrutor aqui da Alura, e vou apresentar para você o curso de Android com Kotlin, personalizando o app.

Para esse curso, eu vou assumir que você tenha alguns pré-requisitos que foram apresentados no primeiro curso de Android com Kotlin aqui da plataforma, que ele ensina os fundamentos de Android, ensina como você vai criar o seu primeiro aplicativo e tem todo o conteúdo necessário para você continuar a partir desse curso.

Caso você não tenha a mínima ideia sobre o conteúdo apresentado nesse curso, você pode acessar, por exemplo, o GitHub, o repositório desse curso - que é justamente esse Android com Kotlin fundamentos do perfil da Alura. Tem aqui um read me mostrando mais detalhes técnicos sobre esse projeto.

Então aqui nós temos uma amostra, mostrando o que é o projeto, o que ele faz e então é indicado que é o e-commerce de produtos naturais – que é a partir desse primeiro módulo que nós fizemos do curso, criamos ali um projeto que lista produtos e também nos permite cadastrar a partir de um formulário.

Então foi nesse primeiro curso que aprendemos tudo que é necessário para criarmos o nosso primeiro aplicativo e entendermos todos os conceitos que são normais ou comuns em qualquer aplicativo Android.

E aí, dado que você vai aprender todo esse conteúdo e que você tem todo esse conteúdo compreendido, você pode prosseguir sem nenhum problema. Para mais informações sobre o que fizemos nesse curso, temos aqui a parte técnica e de tecnologias no projeto.

Como é o caso de saber o que é Kotlin, activities, layout para as activities, então conhecer o constrainsLayout, textView, recyclerView, editText, button, entender o conceito de binding de view, listener de clique, a biblioteca do AndroidX e também conhecer um pouco de refatoração de código.

Então se você conhece esses tópicos sem nenhum problema será tranquilo, você pode continuar com esse curso sem nenhum problema. Nesse caso, se você quiser saber mais sobre esse projeto que foi desenvolvido, caso você não tenha feito, aqui também fala a respeito do desafio que foi proposto, como você consegue acessar o projeto - ou seja, baixando ou acessando o código fonte.

E até mesmo conferir o curso de verdade, se você quiser mais informações ainda, como é o caso aqui dessa página - que é do curso que é justamente esse “Android com Kotlin: Crie o seu primeiro app”.

Então de informações relacionadas aos pré-requisitos são essas, agora eu vou começar a mostrar o que nós vamos fazer durante esse curso e depois vou falar um pouco mais a respeito da parte técnica que nós vamos desenvolver aqui.

Então, vamos começar! Para isso, eu vou entrar aqui no Android Studio e eu vou abrir o emulador. Olhe só que diferente que está o nosso aplicativo em relação aquela primeira amostra.

Logo de cara vemos que teve uma mudança das cores relacionada à configuração de tema, que vai ser uma das coisas que vamos ver aqui. Também, se acessarmos o nosso formulário, vamos perceber que agora ele mudou bastante.

Antes só ficava ali o editText aqui em cima. Agora o editTjá ext até mudou de visual, veja que ao clicar nele nós temos um aspecto visual diferente. Vamos aprender a fazer isso com os componentes do Material Design.

Também, além disso, ao clicar aqui na nossa imagem, vamos apresentar agora uma nova tela, conhecida como caixa de diálogo. A partir dela nós conseguimos adicionar imagens, como por exemplo: eu separei uma imagem aqui a partir de uma URL que eu posso copiar, eu posso clicar aqui e pressionar no input do formulário e colar. Dessa forma, eu posso carregar a imagem e falar: “beleza, é essa imagem que eu quero”. Eu confirmo e tenho acesso a essa imagem.

Da mesma forma, eu posso chegar aqui no input do formulário e colocar uma informação, posso colocar de teste só para simular – “teste”, “teste” e o valor de “123” - olhe só como vai ficar o nosso produto agora com essa mudança. Eu clico em “SALVAR” e olhe só que interessante, ele mostra aqui um contêiner diferente!

Esse componente é conhecido como card. Agora os nossos produtos têm uma imagem, o nome do produto tem um maior destaque, também conseguimos colocar uma descrição com menor destaque e o valor formatado. Veja que serão muitos detalhes que nós vamos aprender a colocar aqui, justamente para melhorarmos essa apresentação do aplicativo.

Se voltamos novamente no nosso primeiro aplicativo, vemos que essa parte da personalização foi bastante simples, justamente para focarmos na parte de fundamentos, só que agora o nosso objetivo é justamente melhorarmos essa impressão.

Então veja que aqui ficou totalmente diferente, ficou bem mais interessante com essa mudança que fizemos aqui no nosso aplicativo.

Aí para falarmos um pouco mais do conteúdo mais técnico que vamos aprender para chegar nesse resultado, basicamente vai ser o seguinte: vamos aprender como conseguimos colocar fontes. Então veja que até mesmo a fonte é diferente, como conseguimos colocar imagens e utilizar a imageView - que é o componente que permite colocar imagens.

Vamos aprender como nós conseguimos utilizar essa caixa que vimos aqui, a caixa de diálogo - ou dialog, tecnicamente falando. Vamos aprender recursos aqui do constraintLayout para permitirmos, por exemplo, que utilizemos medidas até mesmo de porcentagem para colocarmos aqui no nosso componente.

Então vamos aprender diversas técnicas justamente focadas para personalizarmos o nosso aplicativo da maneira que queremos, considerando uma proposta de implementação que eu vou apresentar para você também.

Então o objetivo desse curso, de fato, é focar nas técnicas gerais que temos para personalizar o nosso aplicativo; reutilizar componentes prontos, como é o caso desses componentes do Material Design; e também para utilizar técnicas de refatoração que ainda não vimos, separando componentes, separando responsabilidades e assim por diante.

Então eu espero que você esteja animado com a proposta do curso, com o projeto e eu conto com sua presença! Então, vamos começar? Vamos lá!

Personalizando o item do produto - Preparando o ambiente

Antes de implementar novas features eu vou aproveitar esse momento para falar do nosso ambiente que iremos utilizar aqui durante o curso. Caso você tenha feito o curso de fundamentos de Android com Kotlin, notou que nós estamos reutilizando o projeto Orgs, que se trata justamente daquele aplicativo que simula um e-commerce de produtos naturais.

E o que é importante de você saber, caso você já tenha acesso a esse projeto? É que a partir deste curso, vamos utilizar um padrão conhecido como view binding - que é justamente uma biblioteca que facilita o processo de binding de view, como vimos no curso anterior.

Essa técnica foi proposta no desafio do curso anterior; então se você pulou esse desafio. É muito importante que se atente a essa informação e que agora utilize também essa técnica, que também é uma recomendação da equipe de desenvolvedores do Android.

Só para você ter mais informações, eu vou aproveitar esse momento para acessar o código da nossa ‘ListaProdutosActivity’, que é aquela nossa activity para lista de produtos. Note que a partir desse código nós já não temos mais uma referência ao arquivo de layout que fazíamos no nosso processo de binding de view, seja aqui no construtor do nosso ‘AppCompatActivity’ como também no ‘setContentView’.

Porque agora, a partir desse nosso view binding, ele fica responsável em fazer esse processo de binding de view. Então só para você ter mais um pouco de informação, basicamente vamos ter essa referência conhecida como binding e que vem a partir dessas classes geradas por esse view binding, que é tudo explicado durante esse desafio. A partir desse binding nós temos acesso às nossas views.

Então, por exemplo: se eu quero acessar o nosso ‘recyclerView’, ele tem a partir do ‘binding’, o nosso ‘recyclerView’ a partir do id que colocamos, que é aquele activity lista produtos ‘recyclerView’.

Então é basicamente isso que vamos utilizar durante esse projeto, caso você ainda não tenha feito - só para você ter um pouco mais de informações no desafio, nós temos acesso a esse nosso artigo aqui da Alura, que é de *view binding, falando a respeito de como que ele é, porque que ele é importante, porque é recomendado e como que você pode fazer a sua primeira implementação.

Então se você não fez, vá ao desafio e dê uma olhada como que é possível fazer essa implementação. Lá no desafio também tem o código com a solução e a partir do momento que você implementar, você pode encerrar esse vídeo e continuar com a próxima atividade.

A próxima informação que eu preciso passar é que, caso você não tenha acesso a esse projeto, caso seja o seu primeiro curso que você está fazendo aqui de Android - sim, você pode fazer esse curso caso você tenha se identificado e consegue, sim, entender todas as informações, dado os pré-requisitos.

O que eu vou te mostrar agora é como que você consegue acessar o nosso projeto. Para acessar esse nosso projeto, você vai precisar baixá-lo. Para baixar, você pode acessar o repositório do GitHub, o alura-cursos / android-com-kotlin-personalizando-ui.

Pode ser que ele mude no momento que você estiver acessando esse curso. Então, qual é a minha recomendação? Que você confira as atividades para verificar como que você pode baixar; mas assumindo que você está no GitHub, basicamente, você vai ter acesso ao nosso readme, mostrando o que nós vamos ter no aplicativo.

E aqui embaixo vai ter essa aba de acesso ao projeto, que permite que você consiga acessar o código fonte do projeto inicial, ou até mesmo baixá-lo. Se você clicar para baixar, basicamente ele vai baixar o arquivo em ZIP. Se você acessa o seu código-fonte aqui do nosso projeto, ele acessa essa branch do projeto inicial.

E você também pode baixar, seja o projeto aqui em Git, pegando aqui essa URL do Git, ou até mesmo fazendo download do ZIP - o que é linkado lá no nosso readme. Então eu vou mostrar o exemplo de como seria fazer o download do ZIP, porque se você não tiver o Git, você não consegue fazer o uso da URL.

Então, vamos lá! Para isso, após baixar, ele vai te dar acesso a esse arquivo em ZIP e basicamente você precisa extrair primeiro o conteúdo desse ZIP porque você não consegue abrir um projeto a partir de um ZIP.

Para isso, você pode usar a ferramenta que você tem no seu sistema operacional. Nesse caso, eu tenho esse 7-Zip. Eu vou usar a opção de extrair aqui, “Extract Here”. A partir desse momento, ele vai extrair todos os arquivos. Se nós clicarmos duas vezes no que ele extraiu, ele vai nos dar acesso a todo o projeto.

Então, qual é o próximo passo após a extração? É renomear esse arquivo que ele extraiu para você. Nesse caso, eu vou renomear com o nome “Orgs”, que se trata justamente do projeto.

Agora que nós temos acesso realmente ao nosso projeto, só precisamos abrir com o Android Studio. Aqui no Android Studio nós podemos acessar esse projeto primeiro fechando, ou até mesmo abrindo aqui diretamente. Eu vou mostrar com a técnica de fechar, porque pode ser que você também abra o Android Studio pela primeira vez e entre na nossa tela de launcher.

Então para fechar aqui o nosso projeto, temos a opção no canto superior esquerdo de “File > Close Project”. Se você preferir os atalhos, assim como eu também sou acostumado a usar atalho, tem as teclas “Ctrl + Shift + A” - que vem aqui nessa aba superior de “Actions”, “Close Project”.

Então clicando aqui na tecla “Enter”, que é exatamente o mesmo procedimento, o que ele vai fazer? Ele vai voltar para a tela de launcher do Android Studio, que provavelmente é uma tela similar de quando você abre o Android Studio primeira vez.

A diferença é que ele mostra aqui um histórico de projetos que foram abertos, como é o caso desse projeto do curso anterior.

Então, qual é o próximo passo? Além de saber também que a partir desse curso nós vamos estar utilizando aqui o Android Studio 4.2.1, veja que o Android Studio atualiza frequentemente; como eu havia comentado com vocês.

Agora aqui no Android Studio para abrir um projeto novo temos essa segunda opção que é essa “open an existing project”, clicando nela, ela vai abrir aqui um explorador de arquivos mostrando os arquivos que podemos navegar dentro do sistema.

E aqui ele mostra o projeto do curso anterior que eu fiz aqui, e logo abaixo onde eu deixei o nosso projeto novo, que é esse Orgs, também podemos acessar esse novo projeto, que ele até mostra esse “androidezinho” para indicar que é um projeto Android.

Então é só clicar em “OK”, que ele vai fazer todo aquele procedimento que já vimos anteriormente de quando criamos um projeto e assim por diante, de indexarmos arquivos, fazermos ali as tasks do Gradle e assim por diante. Então vou clicar em “OK”, aguardar e nós vamos ver o que vai acontecer.

Olhe só, o Android Studio conseguiu fazer o import e abrir o nosso projeto a partir desse arquivo que baixamos! Então se tentamos acessar um código, como é o caso da ListaProdutosActivity, ele nos mostra a nossa activity sem nenhum problema.

Agora o próximo passo é realmente testar, executar para ver se apresenta exatamente os mesmos comportamentos. Para isso, eu vou clicar aqui no nosso play, que é o nosso “Run app” e vamos ver se ele abre o emulador e se ele executa conforme o esperado.

Olhe só, o Android Studio conseguiu aqui abrir o Orgs e agora para nós testarmos, podemos tentar criar um produto. Então, clicando aqui no nosso floating action button no canto inferior direito do celular, eu vou colocar o nome de ‘Teste’ e na descrição ‘Teste desc’ - só para diferenciar - e o valor ‘123’. Clicando no botão “SALVAR” nós percebemos que funciona conforme o esperado.

Então esses são os passos, os procedimentos e as informações importantes que você precisa saber para a preparação de ambiente, seja se você já fez o curso anterior ou se você é novo, fazendo pela primeira vez o curso. Então, até já!

Personalizando o item do produto - Adicionando imagem no item

Agora que temos o nosso projeto inicial preparado e configurado para colocarmos novas features, o nosso próximo passo vai ser analisar a nova proposta de implementação para o projeto Orgs. Para isso, temos acesso ao documento “Orgs, proposta de implementação de telas” - que vai ter todas as informações detalhadas do que precisamos fazer para o nosso projeto.

Então, descendo um pouco e indo para a segunda página, já vamos ver que temos um aspecto visual bem diferente ao que fizemos inicialmente. Note que agora temos cores diferentes, que vão dar uma outra cara para o nosso aplicativo.

Até mesmo aqui, o item que representa um produto vai ter alguns aspectos visuais bem diferentes do que vimos, correto? Como é o caso de uma imagem, as fontes são diferentes. Aqui em uma fonte temos negrito, temos um espaçamento, uma margem diferente e até mesmo a formatação da moeda também modificou.

Então perceba que vamos ter que aplicar alguns detalhes para colocarmos esse aspecto visual para cada um dos nossos produtos. Dado essa primeira proposta, vamos começar com essa primeira implementação. O que eu vou propor para vocês agora vai ser a adição de imagens nos nossos produtos.

Então, vamos começar! Como nós podemos fazer isso dentro do Android Studio? Voltando aqui no nosso projeto, basicamente vamos ter que modificar o nosso adapter. Se entramos no nosso adapter, que vai ser o nosso ListaProdutosAdapter, notamos que temos o nosso layout do adapter, que é esse ProdutoItemBinding. Se eu clico nele e aperto as teclas “Ctrl + B”, ele vai acessar também o nosso arquivo de layout. Isso que é bem bacana aqui do view binding.

Ele está carregando aqui para nós... Agora que ele carregou eu vou minimizar o emulador, nós precisamos ajustar esse item para que ele então tenha uma imagem. Então deixe-me aumentar aqui esse item para nós... Aumentei.

Agora precisamos colocar uma view, porque ela é capaz de receber imagens aqui no Android. No caso do framework nós temos acesso a esse componente chamado de ImageView na lateral esquerda. Se clicamos, arrastamos e soltamos dentro do nosso layout, olhe só o que acontece.

Ele faz um aspecto visual muito similar ao floating Action Button porque ele precisa também de um resource, no caso de um drawable, para colocar uma imagem de amostra - justamente para que ele apresente o conteúdo, porque senão ele não apresenta nada.

Aqui nós temos muitas opções. Dentre elas, veja que ele mostra do nosso aplicativo também algumas informações aqui do Android. Curiosamente, ele mostra esse primeiro item, que é conhecido como sample data. O que seria esse sample data?

Basicamente, são informações que temos aqui no nosso projeto que servem justamente para apresentarmos conteúdos no preview. Então qualquer tipo de dado que peguemos do sample data, ele vai ser um dado destinado ao preview.

Então veja que são imagens justamente para utilizarmos para simular uma imagem real, mas que só fica aqui na parte da edição visual, então dentre as opções temos esse avatars que representam pessoas e temos também esse scenic - que seria ali, basicamente, cenas que podemos adicionar, planos de fundos gerais e por aí vai.

Então eu vou usar esse scenic, vou clicar em “OK” e nós vamos ver o que vai acontecer... Olhe só, ele já colocou uma ImageView bem grande aqui. Nós vamos ter agora o nosso trabalho de ajustar conforme as constraints.

Só para questão de acessibilidade, dado que você pode também querer adicionar a Imageview via código apenas, porque você não gosta do editor visual, é bastante justo. Vamos entrar aqui no nosso split e ver o que aconteceu ao colocarmos a nossa ImageView.

Note que aqui ele simplesmente colocou a view e adicionou o id, o width, o height e também ele colocou esse nosso srcCompat com tools, tools.srcCompat, justamente porque estamos usando sample data.

Então se queremos colocar uma imagem aqui na nossa ImageView, vamos precisar utilizar esse srcCompat, ele que vai colocar as imagens para nós.

Da mesma maneira que já vimos nas outras views, precisamos sim, configurar as constraints para atingirmos esse visual que estamos vendo aqui - que é esse quadrado que ele está bem aqui na esquerda. Posteriormente vamos nos atentar para esses detalhes, o importante nesse momento é que consigamos ajustar essa imagem para fazermos a primeira implementação.

Para isso, o que vamos fazer? Inicialmente vamos definir as constraints, seja de início, fim, topo e baixo. Então eu vou começar com app:layout_constraintStart_toStartOf=”parent”, porque realmente precisamos nos alinhar com o parent e em seguida eu vou colocar um app:layout_constraintTop_toTopOf=”parent”, app:layout_constraintBottom_toBottomOf=”parent”.

Na parte do fim eu vou colocar no início de um desses text views. Então vamos colocar aqui: app:layout_constraintEnd_toStartOf=”@id/produto_item_nome”. Eu vou colocar do produto_item_nome.

Então veja que já definimos as constraints. Por não utilizar o match constraint, ele apresenta um comportamento um pouco estranho. Agora sim, nós vamos fazer alguns ajustes para conseguirmos colocar o comportamento esperado.

A primeira coisa que eu vou fazer aqui vai ser o height e também o width, eu vou colocar com o match constraint para conseguirmos aumentar e diminuir conforme as definições da constraint. Então, 0dp para width e 0dp para o height. Olhe só como é que ele ficou, ele já nos mostrou ali um aspecto visual um pouco diferente.

Deixe-me aumentar um pouco aqui para vocês verem. Olhe só, ele ficou bem pequeno aqui para nós. Dado que agora fizemos isso, sim, podemos colocar algumas configurações para apresentarmos esse aspecto visual que estamos vendo aqui na nossa proposta de implementação.

Então, por exemplo: na largura nós temos aqui cerca de 100, 200dp, vamos colocar um valor mais ou menos assim a princípio. Então aqui no width vamos deixar como 100dp, por exemplo. Olhe só, ele já aumentou um pouco e ficou um pouco mais interessante.

Só que ele está saindo um pouco aqui do nosso layout. Por que isso acontece? Porque estamos usando a nossa constraint de fim no inicio aqui do nome. O nome se posiciona bem aqui na extremidade do nosso constraintLayout, que seria o parent.

Então, o que precisamos fazer nesses casos? Uma das técnicas que podemos utilizar é fazer com que essa constraint do nosso nome fique alinhada ao fim da nossa ImageView, porque dessa forma ela sempre vai crescer e se ajustar com o fim da nossa ImageView. Dessa forma, a ImageView consegue ficar no inicio até o seu fim, conforme sua largura. Vamos ver como fica?

Vamos lá! Então aqui no nome, ao invés de pegar o app:layout_constraintStart_toStartOf=”parent” do parent, eu vou pegar o app:layout_constraintStart_toEndOf=”@id/imageView”. Então deixe-me colocar aqui imageView. Olhe só que interessante, ele já mudou bastante em relação à configuração que fizemos.

É claro, as outras informações elas ficaram ali na mesma posição, justamente porque a constraint, ainda se alinha com o parent, o que podemos fazer agora é basicamente se alinhar - ou com a ImageView, ou até mesmo com o nosso nome.

Então o que eu vou fazer vai ser com o nome, porque se ajustamos o nome, todo mundo vem junto dele. Então vamos pegar aqui o app:layout_constraintStart_toStartOf=”@id/produto_item_nome”, aí podemos tirar aqui essa margem do início e do final - até mesmo o app:layout_constraintEnd_toEndOf=”@id/produto_item_nome” podemos pegar do nome, porque aí já se ajusta corretamente… Ajustou, então aqui a parte da descrição já se ajustou.

Agora nós temos a parte do valor, que podemos fazer a mesma coisa. Aqui no app:layout_constraintEnd_toEndOf=”@id/produto_item_nome” nós podemos colocar com o nome para ele se alinhar conforme a largura do nosso nome e o app:layout_constraintStart_toStartOf=”@id/produto_item_nome”, com o nome também para ele se alinhar a largura do nosso nome; removendo aqui as margens da mesma forma que fizemos da descrição, para se manter na mesma largura.

Então dessa forma, sim, já entregamos um comportamento bastante similar ao que estamos vendo aqui, conseguimos fazer isso. Inclusive, podemos até mesmo fazer essa configuração mais quadrada, que seria justamente colocarmos o mesmo valor que fizemos para a largura com altura. Dessa forma, também vamos crescendo conforme o que é esperado.

Então vamos colocar aqui android:layout_height= “200dp”. Olhe só, já ficou bem maior! No caso é 100dp e eu coloquei 200dp. Agora sim, ele já tem um formato mais quadrado em relação ao que esperamos aqui.

Agora que fizemos isso, qual é o próximo passo? O próximo passo, agora que fizemos essa parte da imagem, é justamente colocarmos esse comportamento que estamos vendo de preenchimento do espaço da imagem.

Porque se olhamos aqui como está o nosso código, se a imagem é mais larga - que é o que chamamos de widescreen, que seria ali uma tela larga - ela tem essas faixas em branco, justamente porque não tem conteúdo e precisa realmente ter ali uma parte para preencher, que seria esse branco.

Então para conseguirmos preencher tudo com apenas a imagem, temos algumas propriedades aqui da ImageView que também são conhecidas como escalas, ou tipo de escalas. Então se queremos modificar esses tipos de escala, vamos ter essa propriedade chamada de scaleType.

A partir dessa scaleType nós vamos ter muitas opções. Se eu não me engano, essa inicial é a talvez seja a fitCenter, ela é padrão porque realmente é a que atende a maioria dos casos - mas dado que queremos preencher o que podemos fazer para independentemente da imagem, se ela é mais quadrada, se ela é mais wide ou o que seja, nós queremos preencher.

Para isso, vamos ter essa opção conhecida como center. Ela fica um pouco desfocada, ela perde um pouco da imagem justamente porque ela centraliza na imagem, independentemente do tamanho do seu conteúdo.

Como também temos a outra, conhecida como centerCrop. Ela também vai centralizar, só que ela vai cortar o conteúdo que vai além do contêiner da ImageView – que, nesse caso, é um quadrado.

Então se fosse algo mais wider, aí ela manteria o modo mais largo da coisa. Podemos até testar para vermos se isso realmente acontece. Eu vou até deixar o width agora nos 200dp... Olhe só, ele já mantém esse conteúdo mais largo.

Então, no geral, o que costumamos utilizar é esse centerCrop porque ele vai manter centralizado e vai cortar, caso o conteúdo da imagem ele exceda o contêiner que queremos, que é esse quadrado.

Então veja que a princípio é dessa forma que trabalhamos para colocarmos imagens. Agora que fizemos essa primeira configuração, podemos testar o nosso código. Eu já adianto que não vai funcionar, como esperamos justamente porque temos aqui no código tools.

Então só para ter essa imagem, eu vou colocar uma imagem concreta para nós vermos essa imagem ali na nossa tela. Então eu vou colocar aqui o nosso app:srcCompat. Aqui dentro dele eu vou colocar um drawable, para justamente apresentar um conteúdo visual da ImageView. Então, aqui eu vou deixar como drawable.

Vamos ver aqui se temos alguma coisa que podemos utilizar. Eu vou pegar um drawable que vem do Android, porque do Android já tem algumas cores que podemos utilizar - até mesmo utilizar as cores que temos aqui. Então, ”@android:color, deixe-me ver aqui... Eu vou pegar um purple, que seria ali um roxo /holo_purple”.

Dessa forma, nós testamos e depois vemos como podemos colocar uma imagem personalizada. Eu nem vou colocar um drawable porque nós não temos realmente um drawable, que seria interessante para esse teste.

Então eu vou executar... Agora que eu executei o aplicativo, eu vou adicionar um produto só para nós vermos o que acontece agora que temos esse campo destinado a ImageView... Olhe só, ele já nos mostra ali o contêiner.

Nessa primeira parte nós já preparamos justamente para colocarmos uma imagem e a seguir prosseguimos com essa implementação justamente para colocarmos uma imagem diferente, sem ser uma cor, e até mesmo aplicarmos essas outras propriedades no texto do nome, da inscrição e também do valor. Então, até já!

Sobre o curso Android com Kotlin: personalize o seu app

O curso Android com Kotlin: personalize o seu app possui 244 minutos de vídeos, em um total de 65 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:

• Personalizando o item do produto
• Componentes do material e novas técnicas
• Melhorando o visual do formulário
• Utilizando imagens com o Coil
• Finalizando o projeto