Bottom Sheet

Default

Day	Night

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

The Bottom Sheet component can be used in both XML and Kotlin/Java. In order to work correctly, it needs to be placed inside CoordinatorLayout.

Example of a Bottom Sheet in XML

                                                
                                                <androidx.coordinatorlayout.widget.CoordinatorLayout
                                                  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">
                                                
                                                  <FrameLayout
                                                    android:layout_width="match_parent"
                                                    android:layout_height="match_parent" >
                                                
                                                    <!-- Non-bottom sheet content -->
                                                
                                                  </FrameLayout>
                                                
                                                  <net.skyscanner.backpack.bottomsheet.BpkBottomSheet
                                                    android:layout_width="match_parent"
                                                    android:layout_height="match_parent"
                                                    app:behavior_peekHeight="180dp"
                                                    app:layout_behavior="net.skyscanner.backpack.bottomsheet.BpkBottomSheetBehaviour">
                                                
                                                    <!-- Bottom sheet content -->
                                                
                                                  </net.skyscanner.backpack.bottomsheet.BpkBottomSheet>
                                                </androidx.coordinatorlayout.widget.CoordinatorLayout>

Example of a Bottom Sheet in Kotlin

                                                
                                                import android.view.View
                                                import android.widget.FrameLayout
                                                import androidx.coordinatorlayout.widget.CoordinatorLayout
                                                import androidx.coordinatorlayout.widget.CoordinatorLayout.*
                                                
                                                  val root = CoordinatorLayout(context)
                                                
                                                  val content = FrameLayout(context)
                                                  content.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
                                                  root.addView(content)
                                                
                                                  val bottomSheet = BpkBottomSheet(context)
                                                  val bottomSheetParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
                                                  val bottomSheetBehaviour = BpkBottomSheetBehaviour<BpkBottomSheet>(context)
                                                  bottomSheetBehaviour.peekHeight = bottomSheet.resources.getDimensionPixelSize(R.dimen.bpkSpacingXxl)
                                                  bottomSheetParams.behavior = bottomSheetBehaviour
                                                  bottomSheet.layoutParams = bottomSheetParams
                                                  root.addView(bottomSheet)
                                                
                                                  val bottomSheetContent: View = //... init the bottom sheet content
                                                  bottomSheet.addView(bottomSheetContent)