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

Mario Camí

Desarrollador de aplicaciones Android. Amante de todo lo Open Source, de los videojuegos y nuevas tecnologías. En mi tiempo libre comparto todo lo aprendido y lo que aprendo en el desarrollo de Android a modo de artículo en el blog. La información nos hará libres!

También te podría gustar...