Why is BottomSheetDialog is full screen?

Question

I was following a tutorial video about how to implement BottomSheetDialog in my activity. this is what i got:

fragment_bottom_sheet_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/fragment_settings_background">

    <TextView
        style="@style/HeaderFragmentTextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/volume_sp"
        android:layout_marginTop="20dp"
        android:layout_marginStart="12dp"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toTopOf="@+id/volume_sb"
        app:layout_constraintEnd_toEndOf="@+id/volume_sb"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="@+id/volume_sb"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <SeekBar
        android:id="@+id/volume_sb"
        style="@style/SeekBarStyleColors"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        style="@style/BottomBtnFragmentTextStyle"
        android:id="@+id/cancel_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginTop="20dp"
        android:text="@string/cancel_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="@+id/volume_sb"
        app:layout_constraintTop_toBottomOf="@+id/volume_sb" />

    <TextView
        android:id="@+id/save_tv"
        style="@style/BottomBtnFragmentTextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="37sp"
        android:text="@string/save_sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/cancel_tv"
        app:layout_constraintTop_toBottomOf="@+id/volume_sb"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

settings_page.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                style="@style/SecondaryTitleSettingsTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="15dp"
                android:layout_marginBottom="14dp"
                android:text="@string/main_settings_sp" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout2"
                android:layout_width="match_parent"
                android:layout_height="72dp">

                <TextView
                    style="@style/EachSettingTextStyle"
                    android:layout_width="216dp"
                    android:layout_height="48dp"
                    android:layout_gravity="start"
                    android:layout_marginStart="30dp"
                    android:gravity="start"
                    android:text="@string/vibration_sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.515" />

                <androidx.appcompat.widget.SwitchCompat
                    android:id="@+id/vibration_switch"
                    android:layout_gravity="center"
                    android:thumb="@drawable/custom_thumb"
                    app:track="@drawable/custom_track"
                    app:showText="false"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="25dp"
                    app:switchMinWidth="40dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.511" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="72dp">

                <TextView
                    style="@style/EachSettingTextStyle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:text="@string/repeat_signal_sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    style="@style/ButtonColorStyle"
                    android:id="@+id/repeat_btn"
                    android:layout_width="30dp"
                    android:layout_height="28dp"
                    android:layout_marginEnd="25dp"
                    android:background="@drawable/ic_arrow_left"
                    android:onClick="onClick"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="72dp">

                <TextView
                    style="@style/EachSettingTextStyle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:text="@string/volume_sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    style="@style/ButtonColorStyle"
                    android:id="@+id/show_volume_btn"
                    android:layout_width="30dp"
                    android:layout_height="28dp"
                    android:layout_marginEnd="25dp"
                    android:background="@drawable/ic_arrow_left"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <View
                android:id="@+id/divider"
                android:layout_width="wrap_content"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="20dp"
                android:layout_marginStart="28dp"
                android:layout_marginEnd="28dp"
                android:background="?android:attr/listDivider" />

            <TextView
                style="@style/SecondaryTitleSettingsTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="24dp"
                android:layout_marginBottom="14dp"
                android:text="@string/additional_settings_sp" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="72dp">

                <TextView
                    style="@style/EachSettingTextStyle"
                    android:layout_width="242dp"
                    android:layout_height="43dp"
                    android:layout_gravity="start"
                    android:layout_marginStart="30dp"
                    android:gravity="start"
                    android:text="@string/puzzle_on_alarm_sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.517" />

                <androidx.appcompat.widget.SwitchCompat
                    android:id="@+id/puzzle_switch"
                    android:layout_gravity="center"
                    android:thumb="@drawable/custom_thumb"
                    app:showText="false"
                    app:track="@drawable/custom_track"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="25dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.511" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </androidx.constraintlayout.widget.ConstraintLayout>

        </LinearLayout>
    </ScrollView>




</androidx.constraintlayout.widget.ConstraintLayout>

SettingsActivity.kt:

package com.example.alarme

import android.os.Bundle
import android.view.MenuItem
import android.view.View
import android.widget.Button
import androidx.appcompat.app.ActionBar
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.fragment.app.FragmentContainerView
import com.google.android.material.bottomsheet.BottomSheetDialog

class SettingsActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.settings_page)

        val actionBar: ActionBar? = supportActionBar

        actionBar?.setHomeButtonEnabled(true);
        actionBar?.setDisplayHomeAsUpEnabled(true);

        setTitle(R.string.layout_settings_name_sp);


        val btn_click_me = findViewById(R.id.show_volume_btn) as Button
        btn_click_me.setOnClickListener {
            val view = layoutInflater.inflate(R.layout.fragment_bottom_sheet_dialog, null)
            val dialog = BottomSheetDialog(this)
            dialog.setContentView(view)
            dialog.show()
        }

    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if (item.itemId == android.R.id.home) {
            finish()
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}

And the final result is quite disappointing. It works, but doesn't look as a dialog, it has some free space, which covers everything:

Answer 1

The answer of Shay Kin did not go for me, but adding

<item name="android:backgroundTint">@android:color/transparent</item> 

istead of

<item name="android:colorBackground">@android:color/transparent</item>

worked and I don't know why

Answer 2

Create the style below in your style.xml :

<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:backgroundDimAmount">0.4</item> <!--  0 to remove the  Shadow -->
    <item name="android:colorBackground">@android:color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:windowIsFloating">true</item>
</style>

And apply the style above in your BottomSheetDialog like below :

 btn_click_me.setOnClickListener {
            val view = layoutInflater.inflate(R.layout.fragment_bottom_sheet_dialog, null)
            val dialog = BottomSheetDialog(this,R.style.BottomSheetDialog)
            dialog.setContentView(view)
            dialog.show()
        }

Also with this style you remove the color that visible on the corners.

And this how it's will look :