Cara Menampilkan Circle Image pada Android

Seperti yang kita ketahui, saat kita ingin membuat dan mengembangkan sebuah aplikasi Android, ada saatnya kita akan menggunakan suatu wigdet yaitu ImageView. Namun, terkadang kita ingin image yang kita tampilkan mempunyai bentuk, tidak hanya berbentuk persegi, contohnya seperti bentuk bulat (circle).

Dalam tutorial kali ini kita akan mempelajari cara membuat Circle Image dengan praktis, yaitu menggunakan sebuah library. Library CircleImage ini dibuat oleh user github, Henning Dodenhof.

Pertama, buat project baru pada Android.

Siapkan image yang ingin ditampilkan dalam bentuk circle.

Lalu tambahkan library CircleImageView' pada build.gradle (Module:app), bagian dependencies.

compile 'de.hdodenhof:circleimageview:2.1.0'

Tambahkan baris koding pada file activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff7ea0"
    tools:context="com.example.acer.circularimage.MainActivity">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/profile"
        app:civ_border_color="#fff"
        app:civ_border_width="2dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="54dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="User Profile"
        android:layout_below="@id/profile_image"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true"
        android:textSize="15dp"/>

</RelativeLayout>

Lalu run project Android Studio anda. Outputnya kurang lebih akan seperti ini :

Untuk baris kode pada MainActivity.java, hanya berisi codingan ImageView biasa.