Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Floating Action Button in wrong position

I have Floating Action Buttons in two of my Fragment layouts and sometimes they move to the wrong position, altough I use CoordinatorLayout.

This is how it should look

This is how it somtetimes look when i open the Fragment

This is the code of my fragment:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout android:id="@+id/notes_layout"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.NotesFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/notes_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/new_note_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_add_black_48dp"
    app:layout_anchor="@id/notes_layout"
    app:layout_anchorGravity="bottom|center"
    android:onClick="openNewNote"/>

</android.support.design.widget.CoordinatorLayout>

Does anyone have an idea why the FAB sometimes move to the wrong position?

like image 935
Cimoe Avatar asked Sep 08 '16 10:09

Cimoe


People also ask

How do I change the position on my floating action button?

To change the location of the floating action button on the screen, use floatingActionButtonLocation property of Scaffold() widget.

What is true about floating action buttons?

The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app's UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer.

How do you center floating button in flutter?

Center Align FloatingActionButton in Flutter If you are using Scaffold, you may set floatingActionButtonLocation property to FloatingActionButtonLocation. centerFloat to center make the FloatingActionButton float in the center of the screen at bottom.


2 Answers

I ran into the same issue. The problem is with the combination of app:layout_anchor and com.android.support.design:24.2.0+

I was able to fix this issue by either removing the app:layout_anchor property from the fab or by reverting to an older version of the design library. 24.1.1 worked fine for me. I also had to revert my appcompat v7 library to 24.1.1.

I hope this helps.

like image 117
Vijay Avatar answered Sep 22 '22 05:09

Vijay


Try to make FAB first child of CoordinatorLayout

<android.support.design.widget.CoordinatorLayout
            android:id="@+id/main_content"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

       <android.support.design.widget.FloatingActionButton
            .../>

       <android.support.v7.widget.RecyclerView
             .../>

</android.support.design.widget.CoordinatorLayout>
like image 38
Andriy Pokynboroda Avatar answered Sep 19 '22 05:09

Andriy Pokynboroda