Circular ListView (Items on Half Circle) [closed]

Question

I'm Trying to make a Circular ListView with List Items arranged on Half Circle. it should look something like this:

There was a related post but it was closed .

I made my own Circular Custom ListView and it works fine but my Problem is that i can't arrange List Items Half Circle way as it is shown on the image. I tried several things but it was useless, I don't know how to do it.

Answer 1

So when I made the sample app to demo this I had to do 2 things.

First, was edit the onDraw(Canvas) on my custom view. This could be any view, I make it a TextView for simplicity. This allows me to push the view over based on an equation.

public class MyView extends TextView {

    private static final int MAX_INDENT = 300;
    private static final String TAG = MyView.class.getSimpleName();

    public MyView(Context context) {
        super(context);
    }

    public void onDraw(Canvas canvas){
        canvas.save();
        float indent = getIndent(getY());
        canvas.translate(indent, 0);
        super.onDraw(canvas);
        canvas.restore();
    }

    public float getIndent(float distance){
        float x_vertex = MAX_INDENT;
        DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
        float y_vertex = displayMetrics.heightPixels / 2 / displayMetrics.density;
        double a = ( 0 - x_vertex ) / ( Math.pow(( 0 - y_vertex), 2) ) ;
        float indent = (float) (a * Math.pow((distance - y_vertex), 2) + x_vertex);
        return indent;
    }
}

The second thing I had to do was to Override the ListView class, make it implement OnScrollListener and call setOnScrollListener(this);. Now I am able to scroll through the list, it follows the equation that I put in the view.

public class HalfCircleListView extends ListView implements AbsListView.OnScrollListener {
    public HalfCircleListView(Context context) {
        super(context);
        setOnScrollListener(this);
    }


    @Override
    public void onScrollStateChanged(AbsListView absListView, int i) {
        //Ignored
    }

    @Override
    public void onScroll(AbsListView absListView, int i, int i2, int i3) {
        absListView.invalidateViews();
    }
}

You can download the full source from my Gist.

Initial State Scrolled State

As you can see my math is a little off... I use a parabola vs a circle, so that will have to be changed.

Answer 2

You could increase / decrease the left margin for every view returned in your adapter's getView(). So, for example, for the first half of your views you increase the margin for every item by, say, 20 pixel (int margin = index * 20), and decrease it accordingly for the second half of views.

This needs a lot of fine-tuning to really look like a circular list, of course, but I think you get the idea.

Answer 3

I would try to use an existing radial menu widget if possible. This one claims to support a semi-circular radial menu. I'm not sure if this one does or not.