15,843,623 members
Articles / Mobile Apps / Android

Half circle listview

Rate me:
4 Apr 2014CPOL2 min read 82.1K   2.7K   46   25
Listview item will be displayed and scrolled in a circle.

Introduction

It is easy and normal to make a list view scroll up and down vertically, like below:

But how do we create a list view like that can be scrolled in a segment of a circle, like that:

How to do?

Of course, we must customize the view to create a list like that. I decided to use SurfaceView to create this list view. After analysis, the problems will contain:

• How to draw image in a circle?
• How to scroll list view in a segment of a circle?

How to draw image in a circle?

Suppose that there is a circle that has the center point (centerX, centerY) and radius r. And point P has angle alpha. It will be specified by the formula below:

• P(x) = centerX + cos(alpha) *r.
• P(y) = centerY - sin(alpha) * r.

Based on it, we can easily draw an item in a circle.

How to scroll list view in a segment of a circle?

The problem is when the user is scrolling, how do we update the angle of each item? Exactly, we must specify the scroll angle at scrolling time, then add to the current angle of each item of the list view. To resolve this requirement, I decided to use GestureDetector to control this event. And in this class, I focused on the function below to specify the scroll angle.

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)

Based on e2, distanceX, and distanceY, the scroll angle will be specified as in the picture below:

Based on this picture, we give the formula below

=> scroll angle = β - α

Using the code

I will create a list of players as a sample, with player images prepared in a resource folder. You can refer to the source code I uploaded.

Java
int[] playerDrawableResourceIds = new int[] { R.drawable.ronaldo,
R.drawable.zindance, R.drawable.congvinh, R.drawable.huynhduc,
R.drawable.gerrard, R.drawable.nagatomo, R.drawable.messi,
R.drawable.minhphuong, R.drawable.neymar, R.drawable.ronaldo_beo,
R.drawable.ronaldinho, R.drawable.xavi };

How to draw an image in a circle?

At first, create the item class CircleDrawItem of the list view.

Java
public class CircleDrawItem {
public Bitmap mIconBitmap;
public double mAngle;
}
• mIconBitmap: the bitmap of each item of the list view.
• mAngle: the angle in radian of item. This angle will be updated when scrolling.

Because the circle will be displayed in the left of the screen, the center will have x coordinate as negative number. Besides that, the y coordinate will be in the center of the screen.

Java
mCenterX = (int) (-Global.dp * 200);
mCenterY = (int) (Global.dh / 2.0f);
mRadius = (int) (450 * Global.dp);
mStartAngleInRadian = Math.PI / 4; 

With the value of Global is calculated:

Java
Global.dw = getResources().getDisplayMetrics().widthPixels;
Global.dh = getResources().getDisplayMetrics().heightPixels;
Global.dp = Global.density / 1.5f; 

The circle will keep an array list of CircleDrawItems, with the first item having angle PI/4, and the distance between two items PI/10. The angle of the first item and the distance between two items can be changed based on your requirements.

Java
for (int i = 0; i < playerDrawableResourceIds.length; i++) {
CircleDrawItem circleDrawItem = new CircleDrawItem();
circleDrawItem.mIconBitmap = decodeSampledBitmapFromResource(
getResources(), playerDrawableResourceIds[i], 50, 50);
circleDrawItem.mAngle = mStartAngleInRadian - i * Math.PI / 10;
}

I create a thread to draw data items in circle.

C#
protected void draw() {
Canvas canvas = getHolder().lockCanvas();
if (canvas == null) {
return;
}
canvas.save();
canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setAntiAlias(true);

for (int i = 0; i < datas.size(); i++) {
canvas.save();
CircleDrawItem item = datas.get(i);
double x = mCenterX + Math.cos(item.mAngle) * mRadius;
double y = mCenterY - Math.sin(item.mAngle) * mRadius;
canvas.drawBitmap(item.mIconBitmap,
(int) x - item.mIconBitmap.getWidth() / 2, (int) y
- item.mIconBitmap.getHeight() / 2, paint);
canvas.restore();
}
canvas.restore();
getHolder().unlockCanvasAndPost(canvas);
} 

How to scroll list view in segment of a circle?

Implement a OnGestureListener and override the onScroll() method.

Java
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
float tpx = e2.getX();
float tpy = e2.getY();
float disx = (int) distanceX;
float disy = (int) distanceY;
double scrollAngle = calculateScrollAngle(tpx, tpy, tpx + disx, tpy
+ disy);
for (int i = 0; i < datas.size(); i++) {
datas.get(i).mAngle += scrollAngle;
}
return true;
}  

And the way to calculate the scroll angle will be:

Java
private double calculateScrollAngle(float px1, float py1, float px2,
float py2) {
return diff;
}

History

• 2013-08-24: Add source code with scroll event.

Written By
Vietnam
I'm Java developer.
I started Java web coding from 2007 to 2010. After that, I began to develop Android from 2010 to now.
In my thinking, sharing and connecting is the best way to develop.
I would like to study more via yours comments and would like to have relationship with more developers in the world.

 First Prev Next
 how to change scrolling distane??? Member 128278762-Nov-16 1:12 Member 12827876 2-Nov-16 1:12
 click image to transfer to another activity Member 1232809716-Feb-16 21:20 Member 12328097 16-Feb-16 21:20
 My vote of 5 jayantbramhankar17-Jan-15 1:10 jayantbramhankar 17-Jan-15 1:10
 How make it to horizontal left to right. .. as it is showing in vertical top to bottom kiranuday432-Jul-14 19:59 kiranuday43 2-Jul-14 19:59
 Image click wish4only8-Apr-14 0:50 wish4only 8-Apr-14 0:50
 Re: Image click huyletran9-Apr-14 22:02 huyletran 9-Apr-14 22:02
 Re: Image click wish4only23-Sep-14 21:32 wish4only 23-Sep-14 21:32
 A better way to format the math Graham Wilson4-Apr-14 7:46 Graham Wilson 4-Apr-14 7:46
 how can i get position of each image on image click ? Member 1045472521-Dec-13 1:00 Member 10454725 21-Dec-13 1:00
 Re: how can i get position of each image on image click ? huyletran3-Apr-14 18:52 huyletran 3-Apr-14 18:52
 Good Share Member 102331991-Oct-13 7:27 Member 10233199 1-Oct-13 7:27
 My vote of 5 Brian A Stephens27-Sep-13 4:31 Brian A Stephens 27-Sep-13 4:31
 nice
 My vote of 5 Renju Vinod16-Sep-13 21:38 Renju Vinod 16-Sep-13 21:38
 My vote of 5 Shakeel Iqbal10-Sep-13 0:15 Shakeel Iqbal 10-Sep-13 0:15
 My vote of 5 ThatsAlok6-Sep-13 19:40 ThatsAlok 6-Sep-13 19:40
 My vote of 5 ridoy5-Sep-13 20:36 ridoy 5-Sep-13 20:36
 My vote of 5 Anurag Gandhi5-Sep-13 0:46 Anurag Gandhi 5-Sep-13 0:46
 Respect Андрей Конюшенко4-Sep-13 1:20 Андрей Конюшенко 4-Sep-13 1:20
 My vote of 5 Shakeel Iqbal30-Aug-13 7:32 Shakeel Iqbal 30-Aug-13 7:32
 My vote of 5 Volynsky Alex30-Aug-13 1:13 Volynsky Alex 30-Aug-13 1:13
 My vote of 5 raj ch30-Aug-13 0:39 raj ch 30-Aug-13 0:39
 My vote of 5 hjgode29-Aug-13 20:36 hjgode 29-Aug-13 20:36
 My vote of 5 Santhoshpettacode26-Aug-13 5:42 Santhoshpettacode 26-Aug-13 5:42
 Re: My vote of 5 Zin To15-Jan-14 17:25 Zin To 15-Jan-14 17:25
 Last Visit: 31-Dec-99 19:00     Last Update: 21-Feb-24 5:20 Refresh 1