Arc menu item style like in tumblr app for Android

Question

I tweaked https://github.com/daCapricorn/ArcMenu library to make it work from my purpose and that is working fine. Is there anyway I can build a menu like as in tumblr app or is it possible by tweaking the ArcMenu project or https://github.com/siyamed/android-satellite-menu ? I have doubts on the mathematical functions to be applied to create the style.

I am looking for a animation similar to tumblr app's animation.

Answer 1

try to use , Arc Menu

implement RayMenu and modify RayLayout

and modify the private static AnimationcreateExpandAnimation()` method with your specific coordinate.

Answer 2

There are many ways I do this in iOS. In iOS we have Views similar to that of Android and we can specify coordinates (frame of view) to place them in their superview.

Assumptions :

1)Assume you have a locus i.e circle with equation x^2 + y^2 = c ( Hint : All views are on this locus i.e center of all views coincide with this circle)

2) You need select a value of C depending on the curve you need and initial point which is (0,HEIGHT_OF_SCREEN) as stating point for placing views.

Algorithm :

int angularDisplacementBetweenEachView = 10; // distance between two views in radians 
// coordinates of X button in your screen
int startPositionOfViewX = 0;
int startPositionOfViewY = HEIGHT_OF_SCREEN;
// constant to decide curve
int C = 125;

-(void) main (){ // this is generally done in view controller

for(int i = 1; i< menu_items.count; i++){
    Rect position = getCoordinatesForView(menu_item.get(i),menu_item.get(i-1).rect.x,menu_item.get(i-1).rect.y);
    addView(menu_item.get(i),position.x,position.y); 
}


}

// method returns the coordinates (x,y) at which the view is required to be 
//placed.
-(Rect)getCoordinatesForView(View currentView, int prevViewX, int prevViewY){

// convert to polar cordinates
   // refer diagram

// this is also the radius of the virtual circle
   float r = sqrt(pow(x,2),pow(y,2)); 
   float theta = atan(y,x);

//r & theta are polar coordinates of previous menu item
   float theta2 = (angularDisplacementBetweenEachView + r*theta)/r;

// convert back to cartesian coordinates
   int x2 = r * cos (theta);
   int y2 = r * sin (theta);

return new rect(x2,y2);
}