Cómo añadir una imagen circular

En muchas aplicaciones por mero motivo estético se utilizan una serie de imágenes circulares, sea para adaptarse a Material Design u otras cuestiones de diseño. Entre ellas encontramos la imagen de usuario en la app de Twitter por ejemplo, los chats de Messenger o las historias de Instagram. Sea cual sea el caso, hoy veremos cómo podemos implementarla una imagen circular en Android.

Importando la librería CircleImageView

Para este ejemplo veremos cómo añadir una imagen circular con la librería Circle Image View. Así que para ello, nuestro primer paso va a ser importarla en el archivo build.gradle del módulo ‘app’, en el apartado ‘dependencies’. De tal manera que nos queda así:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.1"

    defaultConfig {
        applicationId "es.mscdroidlabs.imagencircular"
        minSdkVersion 14
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.3.1'

    compile 'de.hdodenhof:circleimageview:2.1.0'
}

Seguidamente sincronizaremos de nuevo el proyecto pulsando en ‘Sync Now‘ en azul arriba a la derecha para hacer la importación efectiva. A partir de aquí solo nos queda añadir el código xml correspondiente de Circle Image View en cualquier Layout que dispongamos. El objeto ‘de.hdodenhof.circleimageview.CircleImageView’ lo utilizamos de igual manera que si de un ‘Image View’ convencional se tratara. Así pues, añadimos nuestro objeto al layout.

Añadiendo CircleImageView al Layout

<de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/imagen"
        app:civ_border_width="2dp"
        app:civ_border_color="#99000000"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

Los ajustes ‘app:civ_border_width’ y ‘app:civ_border_color’ corresponden al ancho y color del borde respectivamente. Podemos eliminar el borde sencillamente quitando estas 2 líneas o dando un ancho de ‘0dp’.

En este caso utilizamos una imagen cargada directamente desde el directorio ‘Drawable’ dentro de la app, pero podemos acceder al objeto desde el código instanciandolo como un ImageView cualquiera y utilizar los métodos ‘.setImageDrawable()’ o ‘.setOnClickListener()’:

CircleImageView civ = (CircleImageView) findViewById(R.id.imagen_circular);

El resultado final, pasando de la imagen original :

Como veís, es muy sencillo utilizar imágenes circulares en las aplicaciones, aparte nos dan ese toque al estilo Material Design que hará que nuestra aplicación sea mas cómoda para la vista de nuestro usuarios, evitando así imágenes cuadradras o descentradas.

Más en Github