I have been trying to set the Bottomsheet
the way Google is using in their apps such as GOOGLE NEWS etc,
This is how Google's
Bottomsheet
looks like the following
Where my
Bottomsheet
looks like the following
Stright away you will notice two things,
My code for bottomsheet
is the following (i removed the controls for simplicity purposes)
MyBottomSheet.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:elevation="10dp"
android:minHeight="300dp"
app:behavior_peekHeight="120dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--controls here-->
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
And I am calling it in my code as follows
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
How can I get Rounded corners and make sure the bottom navigation does not go transparent?
To get the Google's modal BottomSheet design, implement it the following way. Start by creating a shape drawable which will be used as background for the bottom sheet:
bg_bottomsheet.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="@dimen/bottom_sheet_corner_radius"
android:topRightRadius="@dimen/bottom_sheet_corner_radius" />
<padding android:top="@dimen/bottom_sheet_top_padding" />
<solid android:color="@color/white" />
Now create a custom style for the BottomSheet widget.
style-v21.xml
<resources>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@color/white</item>
</style>
</resources>
styles.xml
<resources>
<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/bg_bottom_sheet_dialog_fragment</item>
</style>
<style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">@style/BottomSheet</item>
</style>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />
</resources>
Now, extend the BottomSheetDialogFragment
and set the new theme on it. That's it!
Now, I use this
<!-- Stuff to make the bottom sheet with round top borders -->
<style name="BottomSheetShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
<style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
<item name="shapeAppearance">@style/BottomSheetShapeAppearance</item>
<item name="behavior_peekHeight">140dp</item>
<item name="behavior_fitToContents">true</item>
<item name="behavior_halfExpandedRatio">0.5</item>
</style>
<style name="BaseBottomSheetMenu" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">@style/BottomSheetModal</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
<style name="BottomSheetMenuTheme" parent="@style/BaseBottomSheetMenu" />
You can change general theme support in Theme.MaterialComponents.DayNight.BottomSheetDialog
extend by
Theme.MaterialComponents.DayNight.BottomSheetDialog
for Dark Mode
In create BotoomSheet load specific theme
override fun getTheme(): Int = R.style.BottomSheetMenuTheme
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With