No curso de Android II Integração com apps e recursos do device (conheça os cursos da Formação Android) desenvolvi a App Agenda para cadastrar alunos com o seguinte visual:
Autor(a)
Alex Felipe
Alex é instrutor e desenvolvedor e possui experiência em Java, Kotlin, Android. Atualmente cria conteúdo no canal https://www.youtube.com/@AlexFelipeDev.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Observe que temos uma lista de alunos que, a cada item da lista, tem uma imagem que representa a foto do aluno junto com o nome e seu telefone.
Embora o visual esteja atendendo, atualmente é muito comum vermos as imagens de cada item da lista de uma forma circular, conforme o exemplo abaixo:
Entretanto, como podemos fazer isso? Uma maneira bem fácil de realizar esse ajuste é por meio da lib CircleImageView.
Adicionando a dependência
Para fazermos uso dessa lib, precisamos, inicialmente, adicioná-la como dependência do nosso projeto adicionando script abaixo no arquivo build.gradle:
Após a sincronização do gradle, teremos acesso à view de.hdodenhof.circleimageview.CircleImageView, portanto, o que precisamos fazer agora é trocar a ImageView para essa nova!
Usando o CircleImageView
Para isso vamos até o arquivo layout/list_item.xml que é justamente o XML que representa cada item da lista. Nele temos o seguinte conteúdo:
Se executarmos a App neste instante temos este resultado:
Veja que legal, cada aluno da lista de alunos está com a imagem circular! Mas ainda tem um detalhe que não tá deixando a nossa imagem 100%... Note que a imagem está muito próxima à marge, ou seja, seria legal deixar um espaço entre a imagem e a borda do item da lista...
Para isso, precisamos apenas aplicar um padding básico mesmo, neste exemplo vou aplicar um padding de 5dp:
Entretanto, se rotacionarmos a nossa App nesse exato instante, o que será que acontece? Vamos testar!
E/UncaughtException: java.lang.ClassCastException: android.support.v7.widget.AppCompatImageView cannot be cast to de.hdodenhof.circleimageview.CircleImageView
Ops, recebemos uma exception! Por que será que aconteceu isso?
No curso, criamos dois layouts para o list_item.xml, isto é , o portrait (retrato) e o land (paisagem). Ou seja, se olharmos o XML para o modo land temos o seguinte conteúdo:
Note que ainda estamos usando a ImageView, portanto, vamos modificar para a CircleImageView no layout land da mesma forma como fizemos no layout portrait:
Agora tanto o nosso layout portrait como land estão com as imagens circulares! :D
Firulas da CircleImageView
Uma das coisas legais da lib CircleImageView, é que podemos chamar alguns atributos da View para ajustar mais ainda o design da nossa imagem, como por exemplo, adicionar uma borda. Vamos então adicionar uma borda para ver o resultado:
Neste exemplo fiz uso dos atributos app:civ_border_width para adicionar a largura da borda e app:civ_border_color para colocar a cor. Por fim, rodando a App, temos a seguinte imagem circular:
Neste post aprendemos como podemos fazer, de uma maneira fácil, para que nossas imagens fiquem circulares, bacana né?