refactor: appearance improvement of DropDownMenu

Author: pangratt12345

you-have-mail-android/app/src/main/java/dev/lbeernaert/youhavemail/screens/Settings.kt

@@ -1,15 +1,14 @@
 package dev.lbeernaert.youhavemail.screens
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material.Divider
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
@@ -18,7 +17,6 @@ import androidx.compose.material.ExposedDropdownMenuDefaults
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
-import androidx.compose.material.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -28,12 +26,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.toSize
 import dev.lbeernaert.youhavemail.R
 import dev.lbeernaert.youhavemail.app.State
 import dev.lbeernaert.youhavemail.components.ActionButton
@@ -65,6 +64,8 @@ fun Settings(
                 listOf(30UL, 60UL, 120UL, 180UL, 300UL, 600UL, 900UL, 1200UL, 1800UL, 3600UL)
             var expanded by remember { mutableStateOf(false) }
             var selectedIndex by remember { mutableIntStateOf(0) }
+            // textFieldSize is used to assign to DropDownMenu the same width as TextField
+            var textFieldSize by remember { mutableStateOf(Size.Zero)}
 
             val onPollIntervalModified: () -> Unit = {
                 runTask(updatingPollIntervalLabel) {
@@ -87,9 +88,11 @@ fun Settings(
             TextField(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .clickable { expanded = !expanded },
+                    .clickable { expanded = !expanded }
+                    .onGloballyPositioned { coordinates ->
+                        textFieldSize = coordinates.size.toSize()
+                    },
                 value = secondsToText(pollIntervalValue),
-                textStyle = TextStyle(color = Color.Black),
                 readOnly = true,
                 enabled = false,
                 singleLine = true,
@@ -99,7 +102,7 @@ fun Settings(
                         expanded = expanded,
                         onIconClick = { expanded = !expanded })
                 },
-                colors = TextFieldDefaults.textFieldColors(backgroundColor = colorResource(id = R.color.gray_dropdownmenu)),
+                colors = ExposedDropdownMenuDefaults.textFieldColors(),
             )
 
             Spacer(modifier = Modifier.padding(5.dp))
@@ -117,27 +120,22 @@ fun Settings(
 
             Box(
                 modifier = Modifier
-                    .padding(20.dp)
                     .fillMaxSize()
                     .wrapContentSize(Alignment.TopStart)
             ) {
                 DropdownMenu(
                     expanded = expanded,
                     onDismissRequest = { expanded = false },
                     modifier = Modifier
-                        .background(colorResource(id = R.color.gray_dropdownmenu))
-                        .wrapContentWidth()
+                        .width(with(LocalDensity.current) { textFieldSize.width.toDp() })
                 ) {
                     timeIntervals.forEachIndexed { index, seconds ->
                         DropdownMenuItem(onClick = {
                             expanded = false
                             selectedIndex = index
                             onPollIntervalModified()
                         }) {
-                            Text(
-                                text = secondsToText(seconds),
-                                color = Color.Black
-                            )
+                            Text(text = secondsToText(seconds))
                         }
                     }
                 }

you-have-mail-android/app/src/main/res/values/colors.xml

@@ -7,5 +7,4 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
-    <color name="gray_dropdownmenu">#FFDDDDDD</color>
 </resources>