gowong / material-sheet-fab

Android library that provides the floating action button to sheet transition from Google's Material Design.
MIT License
1.58k stars 255 forks source link

Expansion animation and card final position isn't following layout specification #27

Closed shall-code closed 7 years ago

shall-code commented 8 years ago

Playing with the CardView layout_width parameter as well as the card's layout_gravity and the layout_gravity of the FAB gives unexpected results. For example, set the FAB position to bottom (center) and the card to center. The FAB click animation then expands off to either the LEFT (if the card layout_width="250dp") or the RIGHT (if the card layout_width="300dp"). With the card layout_width="match_parent" its final position is mostly off screen further to the right. The expected behavior here should be animating neither left nor right, which can be understood that the magnitude of the x translation is too large, and the material sheet animation is not properly abiding by the layout specification. The y translation magnitude likely also needs review.

Layout file:

<?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">

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

        <include
            android:id="@+id/my_toolbar"
            layout="@layout/toolbar" />

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

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/my_swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray90"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

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

    <!-- FAB implementation which transforms into a sheet of material -->
    <space.shall.messenger.model.MyFab
        android:id="@+id/my_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="@dimen/my_fab_margin"
        android:src="@drawable/my_icon" />

    <!-- Overlay that dims the screen when FAB is pressed -->
    <com.gordonwong.materialsheetfab.DimOverlayFrameLayout
        android:id="@+id/dim_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Circular reveal container for the sheet -->
    <io.codetail.widget.RevealLinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical">

        <!-- Sheet that contains your items -->
        <android.support.v7.widget.CardView
            android:id="@+id/fab_sheet"
            android:layout_width="250dp"
            android:layout_height="300dp"
            android:layout_gravity="center" >
            <!-- TODO: Put your sheet items here -->
        </android.support.v7.widget.CardView>

    </io.codetail.widget.RevealLinearLayout>

</android.support.design.widget.CoordinatorLayout>
nackko commented 8 years ago

I can confirm I observed some out of screen unexpected animations while playing around.

m16u31D commented 8 years ago

@sbhall3 , did you solve this?

gowong commented 7 years ago

This is currently the expected behavior. The sheet must expand either to the left or the right, whichever side has more space. Expanding the sheet directly upwards hasn't been implemented because it isn't a use case in the material design guidelines.