Design a circle of items Android

Question

I had to do something like this,but I have no idea where or how to start. what's the name of this design ? I mean a circle with elements ? and how to put a texteview with an angle of rotation ?

the goal is when I click in the circle the categories appears like the picture, so how I can do this animation ?

score 1 · Answer 1 · answered Apr 25 '16 at 14:50

Ok what I understand from you question ..Initially you have circle like 1abc in the figure.once you tab on the circle it should display the list of items in a circular way around the circle. ryt?

Step 1: Set the TextView's around Circle using

The fastest and most convenient way is to Rotate by Animation

use rotate animation on your regular TextView like so.

rotateAnimation.xml:

<rotate  xmlns:android="http://schemas.android.com/apk/res/android"
           android:fromDegrees="0" 
           android:toDegrees="-90"
           android:pivotX="50%"
           android:duration="0"
           android:fillAfter="true" />

for sake of demo i have given 90 degree rotation you can give angle based on your requirement Java Code:

  TextView text = (TextView)findViewById(R.id.txtview);       
  text.setText("rotated text here");

  RotateAnimation rotate= (RotateAnimation)AnimationUtils.loadAnimation(this,R.anim.rotateAnimation);
  text.setAnimation(rotate);

Do this for all your TextView's to place it proper position.

Step 2: After the design make them Invisible yourTextView.setVisibility(View.Gone);

Step 3: On touching the Circle make All the TextView's Visible

yourTextView.setVisibility(View.Visible);

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

You'll need some assets to create those ragged lines.

You can rotate TextViews with setRotation(), calculating the rotation when inflating your view. To do so, you'll first have to determine the positions you want to put the text at and then calculate the angle by looking at the difference in x and y position from the center of the circle.

Edit: After OP specified the requirements in comments on this questions:

Inflate the view with all text elements 'hidden' (android:visibility="gone" in your xml file) and calculate the final rotations and positions for everything outside of the circle that you need to animate. Set a listener on the initial circle, which starts animations on all elements to change:

their visibility to View.VISIBLE
their position to what you've calculated
their rotation to what you've calculated

For this, you'll likely want to use an AnimationSet, look at this SO question for inspiration.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 25 '16 at 14:19

AlexWalterbos

408
4
12

thank's, but I'll edit the post, I wasn't clear, the goal is to click in the circle to display the others categories like the picture, so how I can do this animation ?? – NizarETH Apr 25 '16 at 14:29
What kind of animation are you talking about? Fade in, sliding out from the center of the circle, unfolding? Do you have an animation of the design? – AlexWalterbos Apr 25 '16 at 14:38
the animation is like that : first, only the circle appears, but when I click the categories sliding out from the center of the circle, sorry for being not clear – NizarETH Apr 25 '16 at 14:41

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

Following this answer on SO you can use a rotation tag in your xml file to rotate your TextView.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 25 '16 at 14:20

sonic

1,894
1
18
22

Design a circle of items Android

3 Answers3