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!

Answer 1

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>

Second option is Creating a Rotating Dialer

Third option is Android-3D-Carousel.