Custom Listview With Rounded Circle Images

Introduction 

   In couple of previous blog i was explained about custom listview with images,that all images positioned in normal rectangular shape,now i am going to explain custom list view with rounded circle images

demo

Using the code

activity_main.xml:

<RelativeLayout 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"

tools:context=".MainActivity" >

<ListView

android:id="@+id/android:list"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true" >

</ListView>

</RelativeLayout>

list_item.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="8dp">

<TextView

android:id="@+id/title"

android:textColor="#000"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_margin="10dp"

android:layout_height="wrap_content"/>

<ImageView

android:id="@+id/imageview"

android:layout_width="50dp"

android:layout_height="50dp"

android:src="@drawable/ic_launcher"

android:layout_marginRight="10dp"

android:contentDescription="@string/app_name"/>

</LinearLayout>

MainActivity.java:

package com.example.list;

import java.util.ArrayList;

import java.util.Arrays;

import android.os.Bundle;

import android.app.Activity;

import android.app.ListActivity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Path;

import android.graphics.Rect;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends ListActivity 
{

 private String[] listview_names =  {"India","Bangladesh", "China","Indonesia" };

 static Context mcontext;

 private static int[] listview_images = 
 {
 R.drawable.india,R.drawable.bangladesh,R.drawable.china,
 R.drawable.indonesia};

 private ListView lv;

 private static ArrayList<String> array_sort;

 private static ArrayList<Integer> image_sort;

 @Override

 protected void onCreate(Bundle savedInstanceState) 
 {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

  lv = (ListView) findViewById(android.R.id.list);

  array_sort=new ArrayList<String> (Arrays.asList(listview_names));

  image_sort=new ArrayList<Integer>();

  for (int index = 0; index < listview_images.length; index++)

  {

   image_sort.add(listview_images[index]);

  }

  setListAdapter(new bsAdapter(this));

  lv.setOnItemClickListener(new OnItemClickListener() {

  public void onItemClick(AdapterView<?> arg0,

  View arg1, int position, long arg3)

  {

   Toast.makeText(getApplicationContext(), array_sort.get(position),

   Toast.LENGTH_SHORT).show();

  }

 });

}

public static class bsAdapter extends BaseAdapter

{

 Activity cntx;

 public bsAdapter(Activity context)

 {

 // TODO Auto-generated constructor stub

 this.cntx=context;

}

public int getCount()

{

 // TODO Auto-generated method stub

 return array_sort.size();

}

public Object getItem(int position)

{

 // TODO Auto-generated method stub

 return array_sort.get(position);

}

public long getItemId(int position)

{

 // TODO Auto-generated method stub

 return array_sort.size();

}

public View getView(final int position, View convertView, ViewGroup parent)

{

 View row=null;

 LayoutInflater inflater=cntx.getLayoutInflater();

 row=inflater.inflate(R.layout.list_item, null);

 TextView tv = (TextView) row.findViewById(R.id.title);

 ImageView im = (ImageView) row.findViewById(R.id.imageview);

 tv.setText(array_sort.get(position));

 im.setImageBitmap(getRoundedShape(decodeFile(cntx, listview_images[pos ition]),200));

 return row;

}

public static Bitmap decodeFile(Context context,int resId) {

try {

// decode image size

mcontext=context;

BitmapFactory.Options o = new BitmapFactory.Options();

o.inJustDecodeBounds = true;

BitmapFactory.decodeResource(mcontext.getResources(), resId, o);

// Find the correct scale value. It should be the power of 2.

final int REQUIRED_SIZE = 200;

int width_tmp = o.outWidth, height_tmp = o.outHeight;

int scale = 1;

while (true)
{

 if (width_tmp / 2 < REQUIRED_SIZE

 || height_tmp / 2 < REQUIRED_SIZE)

 break;

 width_tmp /= 2;

 height_tmp /= 2;

 scale++;

}

// decode with inSampleSize

BitmapFactory.Options o2 = new BitmapFactory.Options();

o2.inSampleSize = scale;

return BitmapFactory.decodeResource(mcontext.getResources(), resId, o2);

} catch (Exception e) {

}

return null;

}

}

public static Bitmap getRoundedShape(Bitmap scaleBitmapImage,int width) {

 // TODO Auto-generated method stub

 int targetWidth = width;

 int targetHeight = width;

 Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,

 targetHeight,Bitmap.Config.ARGB_8888);

 Canvas canvas = new Canvas(targetBitmap);

 Path path = new Path();

 path.addCircle(((float) targetWidth - 1) / 2,

 ((float) targetHeight - 1) / 2,

 (Math.min(((float) targetWidth),

 ((float) targetHeight)) / 2),

 Path.Direction.CCW);

 canvas.clipPath(path);

 Bitmap sourceBitmap = scaleBitmapImage;

 canvas.drawBitmap(sourceBitmap,

 new Rect(0, 0, sourceBitmap.getWidth(),

 sourceBitmap.getHeight()),

 new Rect(0, 0, targetWidth,

 targetHeight), null);

 return targetBitmap;

 }

}

                                                            

Download full source code