Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use Bottom Sheet in android ?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.40k
    Comment on it

    A Bottom Sheet is a layout that slides up from the bottom side of the screen. This layout slides up on user triggered action. There are two options to implement this functionality, the first one  creates main container view with a BottomSheetBehavior in your layout file and second creates a  fragment which extends BottomSheetDialogFragment.

     

    To use, either you have to import Design Support Library with minimum version 23.2 in app.gradle file. Using following steps you can implement this functionalities in you project.

    Step-1- Create an XML file main_layout.xml which has a button on that click will slides up Bottom Sheet.

    <?xml version="1.0" encoding="utf-8"?>
    <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">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:paddingTop="24dp">
    
                <Button
                    android:id="@+id/button_1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Button 1"
                    android:padding="16dp"
                    android:layout_margin="8dp"
                    android:textColor="@android:color/white"
                    android:background="@android:color/holo_green_dark"/>
    
                
            </LinearLayout>
    
        </ScrollView>
    
        <android.support.v4.widget.NestedScrollView
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:clipToPadding="true"
            android:background="@android:color/holo_orange_light"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
            >
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/msg_string"
                android:padding="16dp"
                android:textSize="16sp"/>
    
        </android.support.v4.widget.NestedScrollView>
    
    </android.support.design.widget.CoordinatorLayout>

     

     

    Step-2- Show Bottom Sheet on button triggered action. Put snippet code of line inside onCreate() method.

    private BottomSheetBehavior mBottomSheetBehavior;
    
    View bottomSheet = findViewById(R.id.bottom_sheet );
    Button button1 = (Button) findViewById(R.id.button_1);
    button1.setOnClickListener(this);
    
     mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
    
    // put this below line of code
    
    @Override
    public void onClick(View v) {
    
    mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED)
    }
    
    

     

    Using a Bottom Sheet Fragment :- As we have mentioned above that we can also display Bottom sheet fragment. To do this, first you need to create a class which extends BottomSheetDialogFragment.
     

    public class BottomSheetFragment extends BottomSheetDialogFragment {
    
        private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {
    
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                    dismiss();
                }
    
            }
    
            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            }
        };
    
        @Override
        public void setupDialog(Dialog dialog, int style) {
            super.setupDialog(dialog, style);
            View contentView = View.inflate(getContext(), R.layout.fragment_bottom_sheet, null);
            dialog.setContentView(contentView);
    
            CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
            CoordinatorLayout.Behavior behavior = params.getBehavior();
    
            if( behavior != null && behavior instanceof BottomSheetBehavior ) {
                ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
            }
        }
    }

     

    Finally, We call show() on an instance of your fragment to display it in bottom sheet.

    BottomSheetDialogFragment bottomSheetDialogFragment = new BottomSheetFragment(); bottomSheetDialogFragment.show(getSupportFragmentManager(), bottomSheetDialogFragment.getTag());

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: