Android Circular ImageView With Border

By | October 29, 2015

As the title of the post suggest in this tutorial we will see how to make a circular shaped ImageView in android  , circular shaped image view looks awesome , as you can see in some of the android applications like whats app , google plus in which the profile pictures are in circular shape ,a circular shaped image prefect looks for profile images .

I’m using a CircularImageView library which is at (https://github.com/hdodenhof/CircleImageView)

Build Gradle

Add the following dependencies in build.gradle
file : build.gradle

dependencies {
    compile fileTree(dir: ‘libs’, include: [‘*.jar’])
    compile ‘com.android.support:appcompat-v7:23.0.1’
    compile ‘de.hdodenhof:circleimageview:2.0.0’
}

XML Layout

In the below xml layout the highlighted custom xml tag is used to create circular shaped imageview and the attribute of this tag is very self explanatory like setting border width and border color .
file : activity_main.xml

<LinearLayout
    xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:orientation=”vertical“>

    <LinearLayout
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”
        android:layout_weight=”1″
        android:background=”#ffffff”
        android:gravity=”center”>

        <de.hdodenhof.circleimageview.CircleImageView
            xmlns:app=”http://schemas.android.com/apk/res-auto”
            android:layout_width=”180dp”
            android:layout_height=”180dp”
            android:src=”@drawable/profile_pic”
            app:civ_border_color=”#000000″
            app:civ_border_width=”2dp” />

    </LinearLayout>

    <LinearLayout
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”
        android:layout_weight=”1″
        android:background=”#335781″
        android:gravity=”center”>

        <de.hdodenhof.circleimageview.CircleImageView
    xmlns:app=”http://schemas.android.com/apk/res-auto”
            android:id=”@+id/profile_image1″
            android:layout_width=”180dp”
            android:layout_height=”180dp”
            android:src=”@drawable/profile_pic”
            app:civ_border_color=”#ffffff”
            app:civ_border_width=”2dp” />

    </LinearLayout>
</LinearLayout>

MainActivity

Create a MainActivity and set the content of this activity with above defined xml layout .

file : MainActivity.java

package com.tutorialsbuzz.circularimage;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}