CODEWITHSUNDEEP
androidmaterial-designandroid-support-library
Gallaron
Gallaron

Reputation: 31

Floating Action Button is positioned wrong on pre lollipop devices

I've a weird behaviour problem:

on any device or emulator with a version lower than lollipop the floating action button and other components which float over the toolbar(e.g. the popup of a Spinner) are positioned wrong. They seem to move based on the value of the app:elevation, but even app:elevation="0" doesn't position them equal to lollipop devices.

EDIT: I just wanted to explain the behavior of the FAB better. When i add an elevation tag on a pre lollipop device to the fab, its x and y coordinates increase. On a lollipop device the elevation tag has no influence on the position.

EDIT 2: After some experiments I found out that the problem is that the layout size increases on pre lollipop devices to draw the shadow. This also increases the click able area. This behaviour makes it impossible to create 2 different layouts for lollipop and pre lollipop devices, because the behaviour and size of the FAB are just wrong. On lollipop devices the layout is (as wanted) 40dp * 40dp and the FAB draws its shadow on the layout below it.

Layout:

<android.support.v4.widget.DrawerLayout
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:fitsSystemWindows="true"
android:id="@+id/id_drawer_layout">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_height="128dp"
        android:layout_width="match_parent"
        android:background="@color/primaryColor"
        android:id="@+id/id_toolbar"
        android:elevation="20dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <Spinner
            android:layout_marginStart="12dp"
            android:layout_marginTop="62dp"
            android:id="@+id/id_toolbar_spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

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

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/id_swipe_refresh_layout"
        android:layout_below="@id/id_toolbar"
        android:layout_height="match_parent"
        android:layout_width="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_below="@id/id_toolbar"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:id="@+id/id_filemanager_recycler_view"
            android:background="@android:color/white"/>

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_below="@id/id_toolbar"
        android:layout_marginTop="-20dp"
        android:layout_marginStart="16dp"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/id_floating_action_button"
        android:src="@drawable/ic_add_white_24dp"
        app:elevation="30dp"
        app:borderWidth="0dp"
        app:fabSize="mini"/>
</RelativeLayout>

<android.support.design.widget.NavigationView
    android:layout_width="288dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/white"
    android:id="@+id/id_main_navigation_view"
    app:menu="@menu/menu_drawer_main"/>

Pre Lollipop enter image description here

Lollipop enter image description here

Upvotes: 2

Views: 1893

Answers (2)

Vicky
Vicky

Reputation: 1947

I had the same problem. The solution is to put your FloatingActionButton inside android.support.design.widget.CoordinatorLayout.

This is what i'm using

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add_white_24dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>

You can modify this code to meet your needs.

Upvotes: 2

Aakash
Aakash

Reputation: 5251

Add these lines to your FloatingActionButton tag, also change the appBar in my code snippet to the id of the layout you want to attach FloatingActionButton to.

app:layout_anchor="@+id/appBar"
app:layout_anchorGravity="bottom|left|end"

Upvotes: 0

Related Questions