BottomSheetDialog with EditText (Remove background under keyboard)

Question

I have a BottomSheetDialog that functions as a comment section. At the bottom of it, there is an EditText view that enables users to add a new comment.

The issue arises when the keyboard appears—during the slide-up animation, the background from the activity layout (pink color) is visible, which can be distracting, especially with vibrant colors.

I am seeking a solution to hide this background from appearing when the keyboard slides up, similar to the behavior seen in apps like Instagram, YouTube, and Facebook.

Video of the problem (Animation has been slowed down): https://youtube.com/shorts/_eY3EBJDh-c

What I want to achieve: https://youtube.com/shorts/B732ERIajpE

1. Main screen

2. Opened comment section

3. Pressing on the EditText (Visible problem. I want to hide that pink background from appearing when the keyboard slides up)

4. Opened keyboard

MainActivity.kt

  private fun init() {
        binding.buttonComments.setOnClickListener {
            openComments()
        }
    }

    private fun openComments() {
        BottomSheetCommentSection().show(supportFragmentManager, null)
    }

BottomSheetCommentSection.kt

class BottomSheetCommentSection : BottomSheetDialogFragment() {

    lateinit var bottomSheetLayoutBinding: BottomSheetLayoutBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        bottomSheetLayoutBinding = BottomSheetLayoutBinding.inflate(inflater)
        return bottomSheetLayoutBinding.root
    }

    override fun getTheme(): Int {
        return R.style.ModalBottomSheetDialog
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
        bottomSheetDialog.setOnShowListener {
            val containerLayout = dialog?.findViewById(
                com.google.android.material.R.id.container
            ) as? FrameLayout

            // Add EditText for new comments
            val layoutEdittextNewCommentBinding = LayoutEdittextNewCommentBinding.inflate(
                LayoutInflater.from(requireContext())
            )

            val layoutParams = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.WRAP_CONTENT,
                Gravity.BOTTOM
            )

            containerLayout?.addView(
                layoutEdittextNewCommentBinding.root,
                layoutParams
            )

            layoutEdittextNewCommentBinding.root.viewTreeObserver.addOnGlobalLayoutListener(object :
                ViewTreeObserver.OnGlobalLayoutListener {
                override fun onGlobalLayout() {
                    layoutEdittextNewCommentBinding.root.viewTreeObserver.removeOnGlobalLayoutListener(
                        this
                    )
                    bottomSheetLayoutBinding.root.setPadding(
                        0,
                        0,
                        0,
                        layoutEdittextNewCommentBinding.root.measuredHeight
                    )
                }
            })
        }

        return bottomSheetDialog
    }
}

bottom_sheet_layout.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/viewTop"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#FF0000" />

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/viewTop"
            android:background="#000000" />
    </RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

layout_edittext_new_comment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#212121"
        android:hint="Enter comment ..."
        android:padding="16dp"
        android:textColor="@color/white"
        android:textColorHint="#909090"
        android:textSize="20sp" />
</LinearLayout>

themes.xml

<resources>
    <!-- Base application theme. -->
    <style name="Theme.CommentSection" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" >?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="ModalBottomSheet" parent="Widget.Material3.BottomSheet.Modal">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="shapeAppearance">@null</item>
    </style>

    <style name="ModalBottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/ModalBottomSheet</item>
        <item name="colorSurface">#000000</item>
        <item name="android:windowSoftInputMode">adjustResize</item>
    </style>
</resources>

I would appreciate any help.

Answer 1

the same problem exists in all applications that use BottomSheetDialog for commenting(eg. Instagram, YouTube).I test it in slow mode.I think the right way to solve this problem is to set same colore in the activity background and BottomSheet.

Answer 2

Try to add the below code on BottomSheetCommentSection.kt class inside onCreateDialog funcation:

  val window = dialog!!.window
  window!!.setBackgroundDrawableResource(R.color.any_color_opacity_70)

Don't forget to put the any_color_opacity_70 on the colors file this can be any color do you want.

**Edit>>

Or try to add this code below insde the event bottomSheetDialog.setOnShowListener after getting the containerLayout object:

 if (containerLayout != null) {
     BottomSheetBehavior.from(containerLayout).state =
     BottomSheetBehavior.STATE_EXPANDED
   }

Answer 3

As per my understanding you need the full opaque background in place of semi-transparent black. So for opaque background you have to put the property of background in BottomSheetDialog theme. (i.e. ModalBottomSheet)

<style name="ModalBottomSheet" parent="Widget.Material3.BottomSheet.Modal">
     <item name="backgroundTint">@android:color/transparent</item>
     <item name="shapeAppearance">@null</item>
     <item name="android:background">@color/color_u_want</item>
    </style>

And on Codebase Add this style in onCreate() of BottomSheetDialog

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setStyle(BottomSheetDialogFragment.STYLE_NORMAL, R.style.ModalBottomSheetDialog)

}

Hope this will work well. I am using this and working smoothly.