Arranging buttons in a circle (Android) with lines connecting them

Question

I am attempting to create a Fragment for an Android application where I have either Buttons or ImageButtons programatically arranged in a circle, with lines drawn from them to the center of the View. However, I have become stumped as to how to do this.

From my understanding, I can create a custom View in which I can override the onDraw() to draw the lines, but I cannot put the Buttons in this way. I can overlay the custom View with a FrameLayout or the like, but I do not know what type of layout to use so that the buttons can be arranged in a circle (and that this will work for various screen sizes).

Furthermore, I have to ensure that both the drawn lines and the buttons will be able to be animated together (that is, for instance, the buttons and connecting lines can move off-screen at the same rate as if they were one entity).

I have seen this post, and it is actually very similar to what I would like to do! : Dynamically arrange Buttons around a Circle . However, I do not quite have a satisfactory understanding of the answer, particularly how a Button can be created in an onDraw() with onClick still functioning.

Any suggestions would really be appreciated!

can you put rough design how do you want to put buttons around circle? — Chintan Rathod, Aug 08 '13 at 05:41
Have you checked out http://stackoverflow.com/questions/9368863/dynamically-arrange-buttons-around-a-circle for a starters? — Johnny Broberg, Aug 08 '13 at 05:53
@JohnnyBroberg, he has already mentioned this link in his question.. :/ — Chintan Rathod, Aug 08 '13 at 05:59
@ChintanRathod In the link I have shown, the provided imgur link gives an idea of what I would like to do. I'll put it here again: http://i.stack.imgur.com/NYQeR.jpg — cshadowstar, Aug 08 '13 at 15:52

Chintan Rathod · Accepted Answer · 2013-08-09T05:57:13.330

2

I think CircleLayout created by dmitry-zaitsev may help you to create what you want.

It has very simple implementation like below.

<ru.biovamp.widget.CircleLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/white"
  app:angleOffset="90.0">

  <!-- Add here any views you want -->

</ru.biovamp.widget.CircleLayout>

enter image description here

Second option is Creating a Rotating Dialer

Third option is Android-3D-Carousel.

enter image description here

edited Aug 09 '13 at 05:57

answered Aug 09 '13 at 05:46

Chintan Rathod

25,864
13
83
93

2

Fantastic, I had actually just recently found dmitry-zaitsev's CircleLayout, but your answer is much more thorough than what I found. Thank you!!! – cshadowstar Aug 10 '13 at 03:31

Arranging buttons in a circle (Android) with lines connecting them

1 Answers1