gowong/material-sheet-fab

make sheet full screen

Closed this issue · 7 comments

I want to make a full screen sheet. this is my layout file

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/eventdetail_coordinatorlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.hhtv.eventqa.activity.EventDetailActivity">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/eventdetail_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <android.support.design.widget.TabLayout
                android:id="@+id/eventdetail_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fillViewport="false"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/base_color_4"
                app:tabIndicatorHeight="@dimen/tablayout_indicator_height"
                app:tabMode="fixed" />
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/eventdetail_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    </android.support.design.widget.CoordinatorLayout>
    <com.hhtv.eventqa.customView.CustomFAB
        android:id="@+id/eventdetail_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_comment" />

    <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:orientation="vertical">

        <!-- Sheet that contains your items -->
        <android.support.v7.widget.CardView
            android:id="@+id/fab_sheet"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        </android.support.v7.widget.CardView>
    </io.codetail.widget.RevealLinearLayout>
</RelativeLayout>

and the custom FAB class is same as your sample, but this is the result:

http://i.imgur.com/Xd9toz6.gif

please tell me how did I do wrong and how to fix it
thanks

It looks like your CardView is either not centered on the screen or its width and height aren't filling the screen. I know I've had some difficulties styling CardViews in the past so maybe try googling for that.

I'm getting a similar issue. When I move the FAB to the bottom center (layout_gravity in XML) the animation and card position is off. The animation expands toward the right and positions the material to the right and partly off screen, even though I've got both the RevealLinearLayout and the CardView set to layout_gravity="center".

Does the cardview appear centered when it's not used by the library?

I can tell you that the card is showing as centered in my IDE layout rendering. I see no reason why it would evidently appear to the right.

Gordon, I'm noticing odd behavior as the CardView layout_width XML parameter is changed. Now, I've got the FAB set to layout_gravity="bottom" so the FAB is at bottom center of the screen, and the CardView has layout_gravity="center" so it is displaying in the layout rendering at the center of the screen. The expected behavior here is that the FAB on click would animate and expand UP and the CardView would display in the center of the screen. This is not what we're seeing.

With the CardView layout_width="250dp" the FAB expands to the LEFT. Changing that layout_width="300dp" and the FAB expands to the RIGHT. And when I have the layout_width="match_parent" it goes far off to the right and off screen like mentioned earlier. Seems to me something is going wrong with the material sheet animation calculations, because changing the width of the card here should not affect it appearing in the center of the screen. In every case here we would expect the animation should go UP (neither left nor right) and display the card in the center.

Can you open a new issue and include your layout with a screenshot?
It's expected that the FAB will only animate to the left or to the right. Animating only up or down hasn't been implemented.

Also, I'm not sure if this library is the best way to transition from a FAB to a new screen. It makes more sense to show a CircularReveal animation on FAB click, wait for the animation to end, and then open the activity, fragment, etc.

Hi, same problem ....any solution?