Spherical animation with text to use tag cloud in Android app [News Republic]
I want to create a spherical animation in an android app similar to this in Republic News .
I have tried creating a sphere so far, but can anyone guide me on how to get started developing animations like this in android.
Do I only need to use opengl or can we achieve this with another alternative.
Also, when the text is clicked, it opens related news on another screen.
EDIT
I finally found some solution for this which is available in this package.
But the animation isn't smooth enough.
Let me know if anyone can help me with smoothing animations?
source to share
You don't need OpenGL. You can do this using a simple view and a Canvas. I wrote some code for you. You can just copy it to your project, add it to xml and run:
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class TagCloudView extends View {
String[] tags = new String[]{"Lemon","Orange","Strawberry","Plum","Pear","Pineapple","Blackberry","Watermelon"};
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private float scroll = 0;
private float prevY;
public TagCloudView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
float r = getHeight() / 3;
paint.setColor(Color.BLACK);
paint.setTextAlign(Paint.Align.CENTER);
for (int i = 0; i < tags.length; i++) {
float t = i + scroll / getHeight();
float y = (float) (r * Math.cos(Math.PI * 2 * t / tags.length)); // parametric circle equation
float z = (float) (r * Math.sin(Math.PI * 2 * t / tags.length));
paint.setTextSize((r + z) / r/2 * 40 + 20); // magic values, change to something better
paint.setAlpha((int) ((r + z) / r/2 * 127 + 128));
canvas.drawText(tags[i], getWidth() / 2, getHeight() / 2 + y, paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() != MotionEvent.ACTION_DOWN)
scroll -= event.getY() - prevY; // only one plane
prevY = event.getY();
invalidate();
return true;
}
}
To achieve the result you described, you need to add smooth scrolling with a Scroller, change the circle equation to a sphere equation, adjust the parameters, and add some getters / setters. Using parametric equations, you can also find user-touched text. This view looks like this:
source to share