Android layout overlap buttons on top of eachother (same center)

Question

So the initial layout consists of a large circular "parent" button and multiple circular "child" buttons that are centered behind the parent button. So all the child buttons share the same center as the parent button. The reason for this layout is so during runtime, I can move the child buttons in and out of the parent button using translateX and translateY.

diagram

However, I'm stuck on the initial layout. How can I center the child buttons to the center of the parent button without hardcoding any child attributes?

score 0 · Answer 1 · answered Aug 07 '14 at 00:18

0

Make the views the same size and add padding to the children so they get reduced. If the views are all in the same position the layout will look as you wish. Anyways, you can always change the properties in code.

answered Aug 07 '14 at 00:18

Junior Buckeridge

2,075
2
21
27

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

Use android:gravity="center" on all views after putting them all inside a FrameLayout (possibly nesting the FrameLayout inside another layout). You can then offset each Button's position in its parent by changing the layout_margin* values. Or you could translate the parent FrameLayout that holds all the Buttons however you wish.

To make the button circular, change your button's android:background value to point to a custom selector.

edited May 23 '17 at 12:11

Community

1
1

answered Aug 07 '14 at 03:19

Brian Attwell

9,239
2
31
26

i know how to use a relative layout to place buttons side by side, but how do i set button A's center to match button B's center, without hardcoding it? – woojoo666 Aug 07 '14 at 06:44
Is every button going to translate at the same speed during the animation? If so, you could use android:gravity="center" on all views after putting them all inside a FrameLayout (possibly nesting the FrameLayout inside another layout). You can then offset each Button's position in its parent by changing the layout_margin* values. Or you could translate the parent FrameLayout that holds all the Buttons however you wish. – Brian Attwell Aug 08 '14 at 05:18
I'll finalize my answer once I hear whether this solves your problem. – Brian Attwell Aug 08 '14 at 05:19
I actually solved it yesterday, never had the time to post the answer though. yea that was the general gist of it, the problem was I didn't know how much the child elements would slide up and down, thus I couldn't determine the width of the parent framelayout. the trick is to give a set width and turn clipping off so the child elements can move outside and still be visible – woojoo666 Aug 08 '14 at 17:53

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

I solved this myself using a container RelativeLayout as an anchor, with the parent button and all child buttons given android:layout_centerInParent. Then, to solve the issue of the child buttons disappearing when leaving the container, I gave the container android:clipChildren(false) and also set clipChildren to false on all of its ancestors as well.

Note that the container has to be bigger than all of its child elements, or all the child elements will be clipped to the same dimensions, even when they move outside of the container! To solve this, I gave the container a width and height of wrap_content.

Thus, all my child buttons were centered in the parent button no matter where I positioned the parent, and the child buttons were free to move around as well.

EDIT

A major flaw in this is that buttons can't recieve touch events if they are outside of their parent. To fix this, you can either use event coordinates or make the parent container big enough to always encompass the child elements (maybe twice the screen width/height?)

screenshot

Here is the code:

res/layout/listfragment.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RelativeLayout
        android:onClick="onButterflyMenuClicked"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="20sp"
        android:layout_marginRight="15sp"
        android:clipChildren="false" >

        <Button
            android:id="@+id/btn_north_1"
            style="@style/PeekabooButton"
            android:text="1st"
            android:translationY="-65sp" />

        <Button
            android:id="@+id/btn_north_2"
            style="@style/PeekabooButton"
            android:text="2nd"
            android:translationY="-115sp" />

        <Button
            android:id="@+id/kingbutton"
            android:layout_width="65sp"
            android:layout_height="65sp"
            android:layout_centerInParent="true"
            android:gravity="center_vertical|center_horizontal"
            android:textSize="16sp"
            android:text="KING" />

    </RelativeLayout>

</FrameLayout>

res/values/styles.xml

<style name="PeekabooButton">
    <item name="android:layout_width">45sp</item>
    <item name="android:layout_height">45sp</item>
    <item name="android:layout_centerInParent">true</item>
    <item name="android:textSize">10sp</item>
</style>

Android layout overlap buttons on top of eachother (same center)

3 Answers3