By Vishal Basumatary in javascript — Mar 24, 2023

gorhom bottom sheet transition speed

Gorhom Bottom Sheet Transition Speed

If you are using the Gorhom Bottom Sheet library in your Android app, you might want to adjust the transition speed of the sheet as it opens or closes. The default speed might not be suitable for your app's design or user experience. Here's how you can do it.

Method 1: Using XML Attributes

You can set the transition speed of the Gorhom Bottom Sheet using XML attributes in your layout file. Add the following attributes to your BottomSheetBehavior:


 <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:id="@+id/bottom_sheet_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 
         <!-- your bottom sheet layout here -->
 
     </FrameLayout>
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

The following XML attributes control the transition speed:

app:behavior_hideable="true" - Enables the bottom sheet to be hidden by dragging it down.
app:behavior_peekHeight="100dp" - Sets the height of the bottom sheet when it is in its peek state.
app:behavior_skipCollapsed="true" - Allows the bottom sheet to skip the collapsed state.
app:behavior_state="expanded" - Sets the initial state of the bottom sheet. Can be "expanded", "collapsed", or "hidden".
app:behavior_draggable="true" - Enables dragging the bottom sheet up and down.
app:behavior_expandedOffset="120dp" - Sets the offset of the expanded state from the top of the screen.
app:behavior_peekHeight="60dp" - Sets the height of the peek state.
app:behavior_hideable="true" - Enables the bottom sheet to be hidden by dragging it down.
app:behavior_fitToContents="true" - Sets whether the bottom sheet should resize to fit its contents.
app:behavior_halfExpandedRatio="0.5" - Sets the ratio of the half-expanded state.
app:behavior_saveFlags="0" - Enables saving/restoring the state of the bottom sheet when the app is paused/resumed.
app:behavior_speed="0.5" - Sets the speed of the transition. Can be a value between 0 and 1.

The last attribute, app:behavior_speed, controls the transition speed. The default value is 0.5, which means that the transition takes half a second. You can increase or decrease this value as per your requirement. For example, if you want to make the transition faster, you can set it to 0.2:


 app:behavior_speed="0.2"

Method 2: Using Java/Kotlin Code

You can also set the transition speed programmatically in your Java/Kotlin code. Here's an example:


 BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
 bottomSheetBehavior.setPeekHeight(100);
 bottomSheetBehavior.setHideable(true);
 bottomSheetBehavior.setSkipCollapsed(true);
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
 bottomSheetBehavior.setDraggable(true);
 bottomSheetBehavior.setExpandedOffset(120);
 bottomSheetBehavior.setSpeed(0.2f);

The last line, bottomSheetBehavior.setSpeed(0.2f), sets the transition speed to 0.2, which is faster than the default speed. You can adjust this value as per your requirement.

Conclusion

Adjusting the transition speed of the Gorhom Bottom Sheet can improve the user experience of your app. You can do it using XML attributes or Java/Kotlin code. Experiment with different speeds to find the one that works best for your app.