Search code examples
androidgoogle-mapsgoogleio

Sliding BottomSheet like google map


Currently i am using bottom sheet from this lib, I want to implement image animation like this google map while sliding of bottomsheet, i want to slide imageview along with it as per the image shown, I have already use this link for help but not getting. I have been trying so much hours on it but cant find any solution, Any help can be appreciated. Thanks in advance..


Solution

  • In past Google was not providing support of BottomSheet in its Design Library, But recently in its update API 23.2, google has revealed API for BottomSheet.

    Check this link

    Update

    Your Layout

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
    
        <android.support.design.widget.AppBarLayout>
    
            <android.support.design.widget.CollapsingToolbarLayout>
    
                <ImageView/>
    
                <android.support.v7.widget.Toolbar/>
    
            </android.support.design.widget.CollapsingToolbarLayout>
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <LinearLayout>
    
                //.....
    
            </LinearLayout>
    
    
        </android.support.v4.widget.NestedScrollView>
    
        <FrameLayout
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:behavior_hideable="true"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
    
            //your bottom sheet layout
    
            </LinearLayout>
        </FrameLayout>
    
    
        <android.support.design.widget.FloatingActionButton/>
    
    </android.support.design.widget.CoordinatorLayout>
    

    Your Java File

    CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
    // The View with the BottomSheetBehavior
    View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
    final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            // React to state change
            Log.e("onStateChanged", "onStateChanged:" + newState);
            if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                    fab.setVisibility(View.GONE);
                } else {
                    fab.setVisibility(View.VISIBLE);
                }
        }
    
        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events
            Log.e("onSlide", "onSlide");
        }
    });
    
    behavior.setPeekHeight(100);