Update UI of server list layout on Android & TV

.idea/deploymentTargetSelector.xml

@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-08-30T10:29:54.285497104Z">
+        <DropdownSelection timestamp="2024-09-02T13:20:15.651517541Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="LocalEmulator" identifier="path=/home/ubuntu/.android/avd/Television_1080p_API_31.avd" />

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/HomeScreen.kt

@@ -773,6 +773,16 @@ fun Home(
                                 shape = RoundedCornerShape(28.dp),
                                 color = MaterialTheme.colorScheme.onBackground
                             )
+                            .pointerInput(Unit) {
+                                detectTapGestures {
+                                    toChangeServer.value = false
+                                    navHostController.navigate(
+                                        Screen.ServerList.route
+                                    )
+                                    Screen.ServerList.isTrue = true
+                                    Log.d("button_click_change", "Pressed")
+                                }
+                            }
                             .align(Alignment.CenterHorizontally),
                         contentAlignment = Alignment.CenterStart,
                     ) {
@@ -985,8 +995,10 @@ fun Home(
                                             ),
                                             interactionSource = remember { MutableInteractionSource() }
                                         ) {
-                                            val connectedServer = basePreferenceHelper.getConnectedServer()
-                                            val selectedProtocol = basePreferenceHelper.getProtocol().full_name
+                                            val connectedServer =
+                                                basePreferenceHelper.getConnectedServer()
+                                            val selectedProtocol =
+                                                basePreferenceHelper.getProtocol().full_name
 
                                             if (!isFeedbackClicked) {
                                                 isFeedbackClicked = true
@@ -1022,8 +1034,10 @@ fun Home(
                                                         ),
                                                         interactionSource = remember { MutableInteractionSource() }
                                                     ) {
-                                                        val connectedServer = basePreferenceHelper.getConnectedServer()
-                                                        val selectedProtocol = basePreferenceHelper.getProtocol().full_name
+                                                        val connectedServer =
+                                                            basePreferenceHelper.getConnectedServer()
+                                                        val selectedProtocol =
+                                                            basePreferenceHelper.getProtocol().full_name
 
                                                         if (!isFeedbackClicked) {
                                                             isFeedbackClicked = true
@@ -1524,31 +1538,18 @@ fun BoxScope.AddRowSmart(
 
 @Composable
 fun BoxScope.AddRowSelectServer(navHostController: NavHostController, isTablet: Boolean, context: Context) {
-    Row(
+    Box(
         modifier = Modifier
             .fillMaxWidth()
+            .fillMaxHeight()
             .padding(15.dp)
             .background(Color.Transparent)
-            .pointerInput(Unit) {
-                detectTapGestures {
-                    toChangeServer.value = false
-                    navHostController.navigate(
-                        Screen.ServerList.route
-                    )
-                    Screen.ServerList.isTrue = true
-                    Log.d("button_click_change", "Pressed")
-                }
-            }
-//            .clickable {
-//                Log.d("test_server_button", "ServerTab Clicked")
-//            }
-        ,
-        horizontalArrangement = Arrangement.Start,
-        verticalAlignment = Alignment.CenterVertically
+            .align(Alignment.CenterStart)
     ) {
-
         Surface(
-            modifier = Modifier.padding(start = 0.dp),
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterStart),
             color = Color.Transparent
         ) {
             Image(
@@ -1561,10 +1562,13 @@ fun BoxScope.AddRowSelectServer(navHostController: NavHostController, isTablet:
             )
         }
         Surface(
-            modifier = Modifier.padding(start = 12.dp, end = 12.dp).weight(1f),
+            modifier = Modifier
+                .padding(start = 52.dp, end = 20.dp)
+                .align(Alignment.CenterStart),
             color = Color.Transparent
         ) {
-            Text(text = context.getString(R.string.see_all_locations),
+            Text(
+                text = context.getString(R.string.see_all_locations),
                 style = MaterialTheme.typography.labelMedium.copy(
                     fontSize = if (isTablet()) 20.sp else 16.sp
                 ),
@@ -1577,11 +1581,11 @@ fun BoxScope.AddRowSelectServer(navHostController: NavHostController, isTablet:
 //                    .weight(1f)
             )
         }
-//        Spacer(modifier = Modifier.weight(1F))
         Surface(
-            modifier = Modifier.padding(start = 0.dp),
-            color = Color.Transparent
-
+            color = Color.Transparent,
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterEnd)
         ) {
             Image(
                 painter = painterResource(id = R.drawable.frontarrow3x),
@@ -1593,7 +1597,6 @@ fun BoxScope.AddRowSelectServer(navHostController: NavHostController, isTablet:
 //                    .weight(1f),
             )
         }
-
     }
 }
 

app/src/main/java/com/vpn/fastestvpnservice/screensTV/HomeScreenTV.kt

@@ -1660,56 +1660,60 @@ fun BoxScope.AddRowSmartTV(
 @Composable
 fun BoxScope.AddRowSelectServerTV(navHostController: NavHostController, isTablet: Boolean) {
     val context = LocalContext.current
-    Row(
+    Box(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = 15.dp)
-            .background(Color.Transparent),
-        horizontalArrangement = Arrangement.Start,
-        verticalAlignment = Alignment.CenterVertically
+            .fillMaxHeight()
+            .padding(5.dp)
+            .background(Color.Transparent)
+            .align(Alignment.CenterStart)
     ) {
         Surface(
-            modifier = Modifier.padding(start = 0.dp),
-            color = Color.Transparent,
+            modifier = Modifier
+                .padding(5.dp),
+            color = Color.Transparent
         ) {
             Image(
                 painter = painterResource(id = R.drawable.worldmap3x),
                 contentDescription = "World",
                 modifier = Modifier
-                    .size(30.dp)
-//                    .weight(1f)
+                    .padding(start = 0.dp)
+                    .size(40.dp)
             )
         }
         Surface(
-            modifier = Modifier.padding(start = 12.dp, end = 12.dp).weight(1F),
+            modifier = Modifier
+                .padding(start = 47.dp, end = 25.dp)
+                .align(Alignment.CenterStart),
             color = Color.Transparent
         ) {
             Text(
                 text = context.getString(R.string.see_all_locations),
                 style = MaterialTheme.typography.labelMedium.copy(
-                    fontSize = 16.sp
+                    fontSize = if (isTablet()) 20.sp else 16.sp
                 ),
                 color = MaterialTheme.colorScheme.primary,
-                lineHeight = 20.sp,
-//                color = colorResource(id = R.color.dark_blue_gray_text),
                 maxLines = 2,
+                lineHeight = 20.sp,
                 overflow = TextOverflow.Ellipsis,
                 modifier = Modifier
-//                    .weight(1f)
+                    .padding(start = 0.dp, end = 0.dp)
             )
         }
-//        Spacer(modifier = Modifier.weight(1F))
         Surface(
-            modifier = Modifier.padding(start = 0.dp, end = 0.dp),
-            color = Color.Transparent
+            color = Color.Transparent,
+            modifier = Modifier
+                .padding(5.dp)
+                .padding(end = 5.dp)
+                .align(Alignment.CenterEnd)
         ) {
             Image(
                 painter = painterResource(id = R.drawable.frontarrow3x),
                 contentDescription = "Front_Arrow",
                 colorFilter = ColorFilter.tint(colorResource(id = R.color.gray_icon)),
                 modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
                     .size(10.dp, 18.dp)
-//                    .weight(1f)
             )
         }
     }