Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

BottomSheet - Incorrect Design Behavior

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

enter image description here

Where my Bottomsheet looks like the following

enter image description here

Stright away you will notice two things,

  1. There are no rounded corners
  2. The navigation at the bottom is not blended

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?

like image 933
Ali Avatar asked May 31 '18 07:05

Ali


2 Answers

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!

like image 120
Abhi Avatar answered Nov 06 '22 07:11

Abhi


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.BottomSheetDialogextend by Theme.MaterialComponents.DayNight.BottomSheetDialog for Dark Mode

In create BotoomSheet load specific theme

    override fun getTheme(): Int = R.style.BottomSheetMenuTheme
like image 3
Webserveis Avatar answered Nov 06 '22 08:11

Webserveis