Make the bottom sheet scrollable to support landscape viewing

wordpress-mobile · Jun 13, 2024 · 595a4c1 · 595a4c1
1 parent 028cb1e
commit 595a4c1
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/...ess/src/main/java/org/wordpress/android/ui/voicetocontent/VoiceToContentDialogFragment.kt b/...ess/src/main/java/org/wordpress/android/ui/voicetocontent/VoiceToContentDialogFragment.kt
@@ -1,5 +1,7 @@
 package org.wordpress.android.ui.voicetocontent
 
+import android.annotation.SuppressLint
+import android.app.Dialog
 import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
@@ -16,7 +18,10 @@ import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.R
 import org.wordpress.android.util.audio.IAudioRecorder.Companion.REQUIRED_RECORDING_PERMISSIONS
 import android.provider.Settings
+import android.widget.FrameLayout
 import androidx.compose.material.ExperimentalMaterialApi
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
 import org.wordpress.android.ui.ActivityNavigator
 import javax.inject.Inject
 
@@ -46,6 +51,25 @@ class VoiceToContentDialogFragment : BottomSheetDialogFragment() {
         viewModel.start()
     }
 
+    @SuppressLint("ClickableViewAccessibility")
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
+        dialog.setOnShowListener {
+            val bottomSheet: FrameLayout = dialog.findViewById(
+                com.google.android.material.R.id.design_bottom_sheet
+            ) ?: return@setOnShowListener
+
+            val behavior = BottomSheetBehavior.from(bottomSheet)
+            behavior.isDraggable = true
+            behavior.skipCollapsed = true
+            behavior.state = BottomSheetBehavior.STATE_EXPANDED
+
+            // Disable touch interception by the bottom sheet to allow nested scrolling
+            bottomSheet.setOnTouchListener { _, _ -> false }
+        }
+        return dialog
+    }
+
     private fun observeViewModel() {
         viewModel.requestPermission.observe(viewLifecycleOwner) {
             requestAllPermissionsForRecording()

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/voicetocontent/VoiceToContentScreen.kt b/WordPress/src/main/java/org/wordpress/android/ui/voicetocontent/VoiceToContentScreen.kt
@@ -16,6 +16,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Icon
@@ -34,7 +36,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
@@ -57,15 +61,27 @@ fun VoiceToContentScreen(
     val amplitudes by viewModel.amplitudes.observeAsState(initial = listOf())
     val configuration = LocalConfiguration.current
     val screenHeight = configuration.screenHeightDp.dp
-    val bottomSheetHeight = screenHeight * 0.6f  // Set to 60% of screen height - but how can it be dynamic?
+    // Adjust the bottom sheet height based on orientation
+    val bottomSheetHeight = if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+        screenHeight // Full height in landscape
+    } else {
+        screenHeight * 0.6f // 60% height in portrait
+    }
 
     Surface(
         modifier = Modifier
             .fillMaxWidth()
             .height(bottomSheetHeight),
         color = MaterialTheme.colors.surface
     ) {
-        VoiceToContentView(state, amplitudes)
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .nestedScroll(rememberNestedScrollInteropConnection()) // Enable nested scrolling for the bottom sheet
+                .verticalScroll(rememberScrollState()) // Enable vertical scrolling for the bottom sheet
+        ) {
+            VoiceToContentView(state, amplitudes)
+        }
     }
 }
 
@@ -75,6 +91,7 @@ fun VoiceToContentView(state: VoiceToContentUiState, amplitudes: List<Float>) {
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier
             .fillMaxWidth()
+         //   .verticalScroll(rememberScrollState()) // Enable vertical scrolling
             .padding(16.dp)
             .background(MaterialTheme.colors.surface) // Use theme-aware background color
     ) {