Click here to Skip to main content
12,074,874 members (58,323 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

43.2K views
2K downloads
44 bookmarked
Posted

Half circle listview

, 4 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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.

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.

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:

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.

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;
    datas.add(circleDrawItem);      
}

I create a thread to draw data items in circle.

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.

@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:

private double calculateScrollAngle(float px1, float py1, float px2,
        float py2) {
    double radian1 = Math.atan2(py1, px1);
    double radian2 = Math.atan2(py2, px2);
    double diff = radian2 - radian1;
    return diff;
}

History

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

huyletran
Vietnam 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.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
jayantbramhankar17-Jan-15 1:10
memberjayantbramhankar17-Jan-15 1:10 
QuestionHow make it to horizontal left to right. .. as it is showing in vertical top to bottom Pin
kiranuday432-Jul-14 19:59
memberkiranuday432-Jul-14 19:59 
QuestionImage click Pin
wish4only8-Apr-14 0:50
memberwish4only8-Apr-14 0:50 
AnswerRe: Image click Pin
huyletran9-Apr-14 22:02
memberhuyletran9-Apr-14 22:02 
GeneralRe: Image click Pin
wish4only23-Sep-14 21:32
memberwish4only23-Sep-14 21:32 
SuggestionA better way to format the math Pin
Graham Wilson4-Apr-14 7:46
memberGraham Wilson4-Apr-14 7:46 
Questionhow can i get position of each image on image click ? Pin
Member 1045472521-Dec-13 1:00
memberMember 1045472521-Dec-13 1:00 
AnswerRe: how can i get position of each image on image click ? Pin
huyletran3-Apr-14 18:52
memberhuyletran3-Apr-14 18:52 
QuestionGood Share Pin
Member 102331991-Oct-13 7:27
memberMember 102331991-Oct-13 7:27 
GeneralMy vote of 5 Pin
Brian A Stephens27-Sep-13 4:31
professionalBrian A Stephens27-Sep-13 4:31 
GeneralMy vote of 5 Pin
Renju Vinod16-Sep-13 21:38
professionalRenju Vinod16-Sep-13 21:38 
GeneralMy vote of 5 Pin
Shakeel Iqbal10-Sep-13 0:15
memberShakeel Iqbal10-Sep-13 0:15 
GeneralMy Vote 5 Pin
Dhruvin Sukhadiya7-Sep-13 8:32
memberDhruvin Sukhadiya7-Sep-13 8:32 
GeneralMy vote of 5 Pin
ThatsAlok6-Sep-13 19:40
memberThatsAlok6-Sep-13 19:40 
GeneralMy vote of 5 Pin
ridoy5-Sep-13 20:36
professionalridoy5-Sep-13 20:36 
GeneralMy vote of 5 Pin
Anurag Gandhi5-Sep-13 0:46
memberAnurag Gandhi5-Sep-13 0:46 
QuestionRespect Pin
Андрей Конюшенко4-Sep-13 1:20
memberАндрей Конюшенко4-Sep-13 1:20 
GeneralMy vote of 5 Pin
Shakeel Iqbal30-Aug-13 7:32
memberShakeel Iqbal30-Aug-13 7:32 
GeneralMy vote of 5 Pin
Volynsky Alex30-Aug-13 1:13
memberVolynsky Alex30-Aug-13 1:13 
GeneralMy vote of 5 Pin
raj ch30-Aug-13 0:39
memberraj ch30-Aug-13 0:39 
GeneralMy vote of 5 Pin
hjgode29-Aug-13 20:36
memberhjgode29-Aug-13 20:36 
GeneralMy vote of 5 Pin
Santhoshobject26-Aug-13 5:42
professionalSanthoshobject26-Aug-13 5:42 
GeneralRe: My vote of 5 Pin
Zinto8915-Jan-14 17:25
memberZinto8915-Jan-14 17:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.160208.1 | Last Updated 4 Apr 2014
Article Copyright 2013 by huyletran
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid