remove background from Bottomsheet android studio

Question

I have created bottomsheet dialog which work great when it is in portait mode but it shows white backgrund when screen in landscape mode attaching the error image

here is code that i used xml:https://github.com/windowschares/test/blob/main/bottomsheet.xml java code:

 final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
    bottomSheetDialog.setContentView(R.layout.layout_bottomsheet);
    LinearLayout sheetView =findViewById(R.id.bottom_sheet_id);
    SwitchCompat disable_pip = bottomSheetDialog.findViewById(R.id.disable_pip);
    SwitchCompat Enable_fullscreen = bottomSheetDialog.findViewById(R.id.Enable_fullscreen);
    ImageView external_player = bottomSheetDialog.findViewById(R.id.external_player);
    bottomSheetDialog.show();

Answer 1

The LinearLayout with id bottom_sheet_id is set to a fixed size which is why it's not taking up the whole width of its parent. Set it to match_parent to fix this.

Answer 2

May it help you to achieve your output- Please change xml images/colors/text/icons as per your requirement XML File--

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout 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="wrap_content"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <LinearLayout
        android:id="@+id/bottom_sheet_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#000000"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:padding="15dp"
            android:text="Settings"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            app:drawableLeftCompat="@mipmap/ic_launcher_round" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginBottom="5dp"
            android:background="@color/white" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">

            <TextView
                android:id="@+id/pip_disable_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="30dp"
                android:text="Disable Pip"
                android:textColor="@color/white"
                android:textSize="15dp"
                android:textStyle="bold" />

            <androidx.appcompat.widget.SwitchCompat
                android:id="@+id/disable_pip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="160dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/fullscreen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">

            <TextView
                android:id="@+id/full_screen_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="30dp"
                android:text="Enable Fullscreen"
                android:textColor="@color/white"
                android:textSize="15dp"
                android:textStyle="bold" />

            <androidx.appcompat.widget.SwitchCompat
                android:id="@+id/Enable_fullscreen"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="120dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/play_mx"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:orientation="horizontal"
            android:padding="5dp">

            <TextView
                android:id="@+id/Play_via_MX"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="30dp"
                android:text="Play with Mxplayer"
                android:textColor="@color/white"
                android:textSize="15dp"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/external_player"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="120dp"
                android:src="@mipmap/ic_launcher" />
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

And style.xml/theme.xml

Add this line in your parent theme

<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>

and add this custom style in your style.xml/theme.xml file

<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/CustomBottomSheet</item>
    </style>

    <style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
        <item name="behavior_peekHeight">512dp</item>
        <item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
    </style>

    <style name="CustomShapeAppearanceBottomSheetDialog" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopRight">16dp</item>
        <item name="cornerSizeTopLeft">16dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
    </style>

Answer 3

thanks for your wonderful help and thankyou for taking time in checking my code. i came to conclusion that, its not possible to achieve that effect shown in hotstar (i.stack.imgur.com/kUaOa.png) so i have plan to convert them to horizontal and add three more items to fill the gap