Circular Imageview in Custom Listview in Android | In this tutorial, we’ll learn how to implement circular image view. To demonstrate this, we’ll create a list a custom list view, and add a custom row to our circular image. Many of the famous apps have implemented this type of functionality. For example, Whatsapp has this type of list view in the `contacts`  fragment. Also, Facebook and Instagram have this type of image view in their `Your Story` section. Wants to learn advanced android application development from scratch – Beyond Basics

Looks interesting right? So let’s get started.

Sample output:

For demo purposes, I’ve used the same image in all the row, you can use different images for different rows, statically and dynamically as per your need. Just add more drawable images.

Sample APK: circularImage

Sample Project: circularImage_1.0

Creating a New Project:

Open your Android Studio & create a new Project, give name whatever you like and We’ll keep all the things by default and clicked finish.

Adding permissions to manifest.xml:

We don’t need any special permission for this project.

Adding Dependencies to Gradle file:

We’ll use the following library for implementing circular image view.

compile 'de.hdodenhof:circleimageview:2.1.0'

Now rebuild your project after adding this dependency and you are ready to use circular image view.

Now add following Java code in your MainActivity to implement custom list view.

MainActivity.java

package com.kaushal28.circularimage;

import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.widget.ListView;

public class MainActivity extends Activity {

    ListView lv;
    Context context;
    
    public static int[] prgmImages = new int[50];
    public static String[] prgmNameList = new String[50];

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

        context=this;
        for(int i=0;i<50;i++){
            prgmImages[i] = R.drawable.image;
            prgmNameList[i] = "Jennifer Jones";
        }

        lv=(ListView) findViewById(R.id.list_view);
        lv.setAdapter(new CustomAdapter(this, prgmNameList,prgmImages));

    }
}

Two arrays ` prgmImages` and `prgmNameList` are for storing our image drawable and the text of our text view. We are using a custom adapter for list view to include both of this. Following is the code for the custom adapter.

Related:

Upload image from gallery to firebase in Android

Printing Images from your Android Application, Using Kotlin

Image Compression in Android

Image blur using Renderscript in Android Application

Upload Camera images to Firebase Storage in android

CustomAdapter.java

package com.kaushal28.circularimage;

/**
 * Created by ADMIN on 7/1/2017.
 */

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class CustomAdapter extends BaseAdapter{
    String [] result;
    Context context;
    int [] imageId;
    private static LayoutInflater inflater=null;
    public CustomAdapter(MainActivity mainActivity, String[] prgmNameList, int[] prgmImages) {
        // TODO Auto-generated constructor stub
        result=prgmNameList;
        context=mainActivity;
        imageId=prgmImages;
        inflater = ( LayoutInflater )context.
                getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return result.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    public class Holder
    {
        TextView tv;
        ImageView img;
    }
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Holder holder=new Holder();
        View rowView;
        rowView = inflater.inflate(R.layout.list_row, null);
        holder.tv=(TextView) rowView.findViewById(R.id.textView1);
        holder.img=(ImageView) rowView.findViewById(R.id.profile_image);
        holder.tv.setText(result[position]);
        holder.img.setImageResource(imageId[position]);
        rowView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Toast.makeText(context, "You Clicked "+result[position], Toast.LENGTH_LONG).show();
            }
        });
        return rowView;
    }

}

In `getView()`  method, we are setting custom row for the list view. Which includes our circular image and a text view.  Following is the layout for the custom row.

list_row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_gravity="center"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/image"
        app:civ_border_width="1dp"
        app:civ_border_color="#FF000000"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10sp"
        android:textSize="25dp"
        android:text="Jennifer Jones"/>

</LinearLayout>

a following the layout file for our MainActivity. It includes just the List view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context="com.kaushal28.circularimage.MainActivity">


    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list_view"/>


</LinearLayout>

Now run your application and you can see the list view containing circular image view of person’s image with their name. If you are a beginner Learn Android application development from scratch

If you really liked the article, please subscribe to our YouTube Channel for videos related to this article.Please find us on Twitter and Facebook.

Related Posts