O CircleImageView é um componente de imagem circular eficiente para Android, que utiliza BitmapShader para gerar um efeito circular impecável. Ele evita os problemas de desempenho comuns em implementações tradicionais e se tornou uma solução preferencial para exibir avatares em aplicações Android.
Vantagens do CircleImageView
Implementações de avatares circulares com ImageView padrão podem apresentar gargalos de desempenho ou artefatos visuais. O CircleImageView resolve essas questões através de sua abordagem inovadora:
- Renderização Eficiente: Emprega a técnica
BitmapShader, eliminando a necessidade de criar cópias da imagem original. - Aceleração por Hardware: Não utiliza
clipPath, garantindo compatibilidade total com a aceleração por hardware. - Suavização de Bordas: Oferece bordas lisas e sem serrilhados para uma melhor experiência visual.
- Baixo Consumo de Memória: Dispensa o desenho em dobro, resultando em um uso mais eficiente da memória.
Integração Rápida
1. Adicionar Dependência
Inclua a seguinte linha no arquivo build.gradle (módulo app):
dependencies {
implementation 'de.hdodenhof:circleimageview:3.1.0'
}
2. Utilização no Layout XML
Adicione o componente ao seu arquivo de layout XML:
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/user_avatar"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/default_avatar"
app:civ_border_width="2dp"
app:civ_border_color="@color/black"/>
3. Configurar Fonte da Imagem
Você pode definir a imagem dinamicamente via código:
CircleImageView avatarView = findViewById(R.id.user_avatar);
avatarView.setImageResource(R.drawable.user_photo);
// Ou utilizando bibliotecas de carregamento de imagem como Glide/Picasso
Glide.with(this)
.load(userImageUrl)
.dontAnimate() // Desabilita animação de transição
.into(avatarView);
Observação: Ao usar bibliotecas de carregamento, é recomendável desabilitar animações de transição (ex: dontAnimate() no Glide ou noFade() no Picasso).
Opções de Customização
O CircleImageView oferece diversas propriedades para personalização:
app:civ_border_width: Define a espessura da borda circular.app:civ_border_color: Especifica a cor da borda.app:civ_border_overlay: Controla se a borda deve se sobrepor à imagem.app:civ_circle_background_color: Define a cor de fundo do círculo.
Perguntas Frequentes
Uso de VectorDrawable como Fonte
Não é recomendado o uso direto de VectorDrawable com CircleImageView devido a potenciais problemas de desempenho. Uma abordagem alternativa é converter o gráfico vetorial para um formato circular antes de exibi-lo com um ImageView padrão.
Adicionar Efeito de Ondulação ao Toque
Para implementar um efeito de ondulação circular:
- Crie um
shapecircular para ser usado comoripple. - Envolva o
CircleImageViewem umFrameLayout. - Defina o fundo do
FrameLayoutcom o drawable deripple.
Espaçamento entre Imagem e Borda
Não há um atributo direto para isso. Uma solução alternativa é envolver o CircleImageView em um layout pai (como ConstraintLayout ou LinearLayout) e aplicar padding a este layout pai, definindo sua cor de fundo para simular o espaçamento.
Por que ScaleType é sempre CENTER_CROP?
Essa configuração é intencional, pois o CENTER_CROP é o tipo de escala mais adequado para a exibição de avatares. Tentar modificar o ScaleType resultará em uma exceção.
Estrutura do Projeto
- Implementação principal:
circleimageview/src/main/java/de/hdodenhof/circleimageview/CircleImageView.java - Definições de atributos:
circleimageview/src/main/res/values/attrs.xml - Exemplo de uso:
sample/src/main/java/de/hdodenhof/circleimageview/sample/MainActivity.java
Histórico de Versões
- 3.1.0: Melhorias na escala de bitmap.
- 3.0.0: Suporte a eventos de toque restritos à área circular; migração para AndroidX.
- 2.2.0: Adicionado suporte a
elevation. - 2.1.0: Introduzido suporte a
paddinge opção para desabilitar a transformação circular.
Licença
O CircleImageView é distribuído sob a licença Apache License 2.0.