3

I want to create spherical animation in my android app similar to this in News Republic app.

I have tried to create a sphere so far but can anyone guide me how to proceed to develop animations like this in android.

Do we have to use opengl only or we can achieve it with other alternative option.

Also, when the text is clicked it opens the related news in a different screen.

enter image description here

enter image description here

enter image description here

EDIT

I finally found some solution for this, which is available under this package.

But, the animation is not smooth enough.

Let me know if anyone can help me in the smoothing of the animations?

Amrut Bidri
  • 6,276
  • 6
  • 38
  • 80
  • Not able to Watch Video. Please Check it out. – Rajan Bhavsar May 27 '15 at 11:02
  • 1
    Have you seen this blog post: https://sites.google.com/site/tagindemo/TagCloud which would lead you to this SDK project: https://code.launchpad.net/tagin which uses Bazaar source control and then this project which looks like what the blog author was trying http://bazaar.launchpad.net/~saranasr83/tagin/TagCloud/files – Morrison Chang Jun 24 '15 at 15:17
  • @MorrisonChang thanks a lot , it was very much helpful. link 1 https://sites.google.com/site/tagindemo/TagCloud , link 2 https://code.launchpad.net/tagin , link 3 http://bazaar.launchpad.net/~saranasr83/tagin/TagCloud/files – Amrut Bidri Jun 26 '15 at 07:10

1 Answers1

6

You don't need OpenGL. You can do that using a simple view and Canvas. I wrote a bit of code for you. You can just copy it to your project, add 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 have to add smooth scrolling using Scroller, change the circle equation to the sphere equation, tweak parameters and add some getters/setters. Using parametric equations you can also find the text touched by the user. This View looks like this:

enter image description here

Zielony
  • 16,239
  • 6
  • 34
  • 39
  • It worked only for 2nd Image in question (but without animation). I also need to find a solution for other two as well. see if you can help. BTW thanks a lot for your effort. Another thing is that instead of View i would use ViewGroup with TextViews in it. – Amrut Bidri Jun 25 '15 at 05:25