CODEWITHSUNDEEP
javaandroidfloating-action-buttonandroid-framelayout
danielschultz
danielschultz

Reputation: 1

How to get two floating action buttons to not overlap over each other?

I am trying to get two floating action buttons to be right next to each other, but everything I have tried has not worked. I believe this is because I am in FrameLayout, but I still cannot figure out how to fix this issue.

This is what I have now:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/saveFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_save_24dp"
        />
    <View
        android:id="@+id/dummy"
        android:layout_width="1dp"
        android:layout_height="16dp"
        app:layout_anchor="@id/saveFloatingActionButton"
        app:layout_anchorGravity="top|right|end" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/aboutFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_save_24dp"
        app:layout_anchor="@id/dummy"
        app:layout_anchorGravity="top|right|end"/>

</FrameLayout>

I am hoping to have two floating action buttons one on top of another, like so

Expected Result

Upvotes: 0

Views: 1491

Answers (2)

Chithlal K
Chithlal K

Reputation: 30

Create a LinearLayout put the two FABs inside Linear Layout and make the Frame layout as the root of LinearLayout.

  <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_gravity="bottom|end"
            android:orientation="vertical">
            <android.support.design.widget.FloatingActionButton
                android:layout_width="50dp"
                android:layout_height="50dp" 
                android:src="@drawable/ic_add_button"
                />
            <android.support.design.widget.FloatingActionButton
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_add_button"
                />
        </LinearLayout>
    </FrameLayout>

Upvotes: 1

DigitalNinja
DigitalNinja

Reputation: 1098

Try putting each floating button in its own FrameLayout.

From the Android documentation:

FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

I also put the frame layouts inside of a RelativeLayout, however I'm not sure if it's necessary depending on what else you're doing with this layout.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom|right|end">

    <FrameLayout
        android:id="@+id/FAB_frame_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="@dimen/fab_margin"
            app:elevation="8dp"
            app:fabSize="normal"
            app:rippleColor="your_color"/>

        <TextView
            android:id="@+id/fab_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:elevation="16dp"
            android:text="your_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#fff"/>
    </FrameLayout>

    <FrameLayout
        android:id="@+id/FAB_frame_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FAB_frame_1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="@dimen/fab_margin"
            app:elevation="9dp"
            app:fabSize="normal"
            app:rippleColor="your_color"/>

        <TextView
            android:id="@+id/fab_text_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:elevation="17dp"
            android:text="your_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#fff"/>
    </FrameLayout>
</RelativeLayout>

Upvotes: 0

Related Questions