Merge pull request #296 from synonymdev/fix/adapt-height-keyboard-2

ovitrif · web-flow · commit d5dd9f593e4b · 2025-08-13T12:59:35.000+02:00
Adapt keyboard to short screens
diff --git a/app/src/main/java/to/bitkit/ui/components/Keyboard.kt b/app/src/main/java/to/bitkit/ui/components/Keyboard.kt
@@ -4,10 +4,11 @@ import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.material3.Icon
@@ -22,15 +23,21 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Devices.NEXUS_5
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import to.bitkit.R
 import to.bitkit.ui.shared.util.clickableAlpha
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 
-private val buttonHeight = 75.dp // 75 * 4 = 300 height
+private val maxKeyboardHeight = 300.dp
+private val idealButtonHeight = 75.dp
+private val minButtonHeight = 50.dp
+private const val KEYBOARD_ROWS_NUMBER = 4
+private const val KEYBOARD_COLUMNS_NUMBER = 3
 val keyButtonHaptic = HapticFeedbackType.VirtualKey
 
 @Composable
@@ -39,30 +46,51 @@ fun Keyboard(
     onClickBackspace: () -> Unit,
     modifier: Modifier = Modifier,
     isDecimal: Boolean = true,
+    availableHeight: Dp? = null,
 ) {
-    LazyVerticalGrid(
-        columns = GridCells.Fixed(3),
-        userScrollEnabled = false,
-        modifier = modifier,
-    ) {
-        item { KeyTextButton(text = "1", onClick = onClick) }
-        item { KeyTextButton(text = "2", onClick = onClick) }
-        item { KeyTextButton(text = "3", onClick = onClick) }
-        item { KeyTextButton(text = "4", onClick = onClick) }
-        item { KeyTextButton(text = "5", onClick = onClick) }
-        item { KeyTextButton(text = "6", onClick = onClick) }
-        item { KeyTextButton(text = "7", onClick = onClick) }
-        item { KeyTextButton(text = "8", onClick = onClick) }
-        item { KeyTextButton(text = "9", onClick = onClick) }
-        item { KeyTextButton(text = if (isDecimal) "." else "000", onClick = onClick) }
-        item { KeyTextButton(text = "0", onClick = onClick) }
-        item {
-            KeyIconButton(
-                icon = R.drawable.ic_backspace,
-                contentDescription = stringResource(R.string.common__delete),
-                onClick = onClickBackspace,
-                modifier = Modifier.testTag("KeyboardButton_backspace"),
-            )
+    BoxWithConstraints(modifier = modifier) {
+        val constraintsHeight = this.maxHeight
+        val effectiveHeight = availableHeight ?: constraintsHeight
+        val idealTotalHeight = idealButtonHeight * KEYBOARD_ROWS_NUMBER
+
+        val maxAllowedHeight = minOf(maxKeyboardHeight, effectiveHeight)
+
+        val buttonHeight = when {
+            // If we have plenty of space, use ideal height
+            maxAllowedHeight >= idealTotalHeight -> idealButtonHeight
+            // If space is limited, calculate proportional height but ensure minimum
+            maxAllowedHeight >= (minButtonHeight * KEYBOARD_ROWS_NUMBER) -> maxAllowedHeight / KEYBOARD_ROWS_NUMBER
+            // If extremely limited, use absolute minimum
+            else -> minButtonHeight
+        }
+
+        val totalKeyboardHeight = buttonHeight * KEYBOARD_ROWS_NUMBER
+
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(KEYBOARD_COLUMNS_NUMBER),
+            userScrollEnabled = false,
+            modifier = Modifier.height(totalKeyboardHeight),
+        ) {
+            item { KeyTextButton(text = "1", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "2", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "3", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "4", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "5", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "6", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "7", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "8", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "9", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = if (isDecimal) "." else "000", onClick = onClick, buttonHeight = buttonHeight) }
+            item { KeyTextButton(text = "0", onClick = onClick, buttonHeight = buttonHeight) }
+            item {
+                KeyIconButton(
+                    icon = R.drawable.ic_backspace,
+                    contentDescription = stringResource(R.string.common__delete),
+                    onClick = onClickBackspace,
+                    buttonHeight = buttonHeight,
+                    modifier = Modifier.testTag("KeyboardButton_backspace"),
+                )
+            }
         }
     }
 }
@@ -72,10 +100,12 @@ fun KeyIconButton(
     @DrawableRes icon: Int,
     contentDescription: String?,
     onClick: () -> Unit,
+    buttonHeight: Dp = idealButtonHeight,
     modifier: Modifier = Modifier,
 ) {
     KeyButtonBox(
         onClick = onClick,
+        buttonHeight = buttonHeight,
         modifier = modifier,
     ) {
         Icon(
@@ -89,15 +119,21 @@ fun KeyIconButton(
 fun KeyTextButton(
     text: String,
     onClick: (String) -> Unit,
+    buttonHeight: Dp = idealButtonHeight,
     modifier: Modifier = Modifier,
 ) {
     KeyButtonBox(
         onClick = { onClick(text) },
+        buttonHeight = buttonHeight,
         modifier = modifier.testTag("KeyboardButton_$text"),
     ) {
         Text(
             text = text,
-            fontSize = 24.sp,
+            fontSize = when {
+                buttonHeight < 60.dp -> 20.sp
+                buttonHeight < 70.dp -> 22.sp
+                else -> 24.sp
+            },
             textAlign = TextAlign.Center,
             color = Colors.White,
         )
@@ -107,6 +143,7 @@ fun KeyTextButton(
 @Composable
 private fun KeyButtonBox(
     onClick: () -> Unit,
+    buttonHeight: Dp,
     modifier: Modifier = Modifier,
     content: @Composable (BoxScope.() -> Unit),
 ) {
@@ -115,8 +152,8 @@ private fun KeyButtonBox(
         content = content,
         contentAlignment = Alignment.Center,
         modifier = modifier
-            .heightIn(buttonHeight)
-            .fillMaxSize()
+            .height(buttonHeight)
+            .fillMaxWidth()
             .clickableAlpha(0.2f) {
                 haptic.performHapticFeedback(keyButtonHaptic)
                 onClick()
@@ -167,3 +204,17 @@ private fun Preview3() {
         }
     }
 }
+
+@Preview(showBackground = true, device = NEXUS_5)
+@Composable
+private fun PreviewShortScreen() {
+    AppThemeSurface {
+        Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
+            Keyboard(
+                onClick = {},
+                onClickBackspace = {},
+                modifier = Modifier.fillMaxWidth(),
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/to/bitkit/ui/screens/wallets/receive/EditInvoiceScreen.kt b/app/src/main/java/to/bitkit/ui/screens/wallets/receive/EditInvoiceScreen.kt
@@ -8,7 +8,7 @@ import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -37,6 +38,7 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Devices.PIXEL_5
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -176,12 +178,14 @@ fun EditInvoiceContent(
     onInputChanged: (String) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Box(
+    BoxWithConstraints(
         modifier = modifier
             .fillMaxSize()
             .gradientBackground()
             .navigationBarsPadding()
     ) {
+        val maxHeight = this.maxHeight
+
         AnimatedVisibility(
             visible = !numericKeyboardVisible && !isSoftKeyboardVisible,
             enter = fadeIn(),
@@ -252,7 +256,7 @@ fun EditInvoiceContent(
                             UnitButton(modifier = Modifier.height(28.dp))
                         }
 
-                        HorizontalDivider(modifier = Modifier.padding(vertical = 24.dp))
+                        HorizontalDivider(modifier = Modifier.padding(top = 24.dp))
 
                         Keyboard(
                             onClick = { number ->
@@ -262,12 +266,17 @@ fun EditInvoiceContent(
                                 onInputChanged(if (input.length > 1) input.dropLast(1) else "0")
                             },
                             isDecimal = primaryDisplay == PrimaryDisplay.FIAT,
+                            availableHeight = maxHeight,
                             modifier = Modifier
                                 .fillMaxWidth()
                                 .testTag("amount_keyboard"),
                         )
 
-                        Spacer(modifier = Modifier.height(41.dp))
+                        Spacer(
+                            modifier = Modifier
+                                .weight(1f)
+                                .sizeIn(minHeight = 16.dp, maxHeight = 41.dp)
+                        )
 
                         PrimaryButton(
                             text = stringResource(R.string.common__continue),
@@ -444,3 +453,30 @@ private fun Preview3() {
         }
     }
 }
+
+@Preview(showSystemUi = true, device = PIXEL_5)
+@Composable
+private fun Preview4() {
+    AppThemeSurface {
+        BottomSheetPreview {
+            EditInvoiceContent(
+                input = "123",
+                noteText = "Note text",
+                primaryDisplay = PrimaryDisplay.BITCOIN,
+                displayUnit = BitcoinDisplayUnit.MODERN,
+                onBack = {},
+                onTextChanged = {},
+                numericKeyboardVisible = true,
+                onClickBalance = {},
+                onInputChanged = {},
+                onContinueGeneral = {},
+                onContinueKeyboard = {},
+                tags = listOf("Team", "Dinner", "Home"),
+                onClickAddTag = {},
+                onClickTag = {},
+                isSoftKeyboardVisible = false,
+                modifier = Modifier.sheetHeight(),
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/to/bitkit/ui/screens/wallets/send/SendAmountScreen.kt b/app/src/main/java/to/bitkit/ui/screens/wallets/send/SendAmountScreen.kt
