worked on Tablet UI

.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-05-09T11:31:04.509803911Z">
+        <DropdownSelection timestamp="2024-05-10T09:58:03.892802568Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="PhysicalDevice" identifier="serial=1C051FDF60048Z" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=/home/ubuntu/.android/avd/Pixel_C_API_34.avd" />
             </handle>
           </Target>
         </DropdownSelection>

app/src/main/java/com/vpn/fastestvpnservice/screens/BottomBarMainScreen.kt

@@ -35,6 +35,7 @@ import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hierarchy
 import androidx.navigation.NavGraph.Companion.findStartDestination
@@ -46,6 +47,7 @@ import com.vpn.fastestvpnservice.navigation.BottomBarNavGraph
 import com.vpn.fastestvpnservice.navigation.navigationAnimation
 import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
 import com.vpn.fastestvpnservice.ui.theme.customTypography2
+import com.vpn.fastestvpnservice.utils.isTablet
 
 @Composable
 fun BottomBarMainScreen(navController: NavHostController, activity: ComponentActivity) {
@@ -139,14 +141,19 @@ fun RowScope.AddItem(
     BottomNavigationItem(
         label = {
             if (currentDestination?.route == screen.route) {
-                Text(text = screen.title,
-                    style = MaterialTheme.typography.customTypography2.bodyLarge,
+                Text(
+                    text = screen.title,
+                    style = MaterialTheme.typography.customTypography2.bodyLarge.copy(
+                        fontSize = if (isTablet()) 15.sp else 11.sp
+                    ),
                     color = MaterialTheme.colorScheme.tertiary,
-                    )
+                )
             }
             else {
                 Text(text = screen.title,
-                    style = MaterialTheme.typography.customTypography2.bodyLarge,
+                    style = MaterialTheme.typography.customTypography2.bodyLarge.copy(
+                        fontSize = if (isTablet()) 15.sp else 11.sp
+                    ),
                     color = MaterialTheme.colorScheme.onTertiary,
                     modifier = Modifier.alpha(0.5F)
                 )
@@ -163,14 +170,16 @@ fun RowScope.AddItem(
 
         },
         icon = {
+            val iconWidth = if (isTablet()) 50.dp else 45.dp
+            val iconHeight = if (isTablet()) 44.dp else 39.dp
             if (currentDestination?.route == screen.route) {
                 Icon(
                     painter = painterResource(id = screen.icon),
                     contentDescription = "Navigation Icon",
                     tint = MaterialTheme.colorScheme.tertiary,
                     modifier = Modifier
-                        .size(45.dp, 39.dp)
-                        .padding(top = 9.dp, bottom = 4.dp)
+                        .size(iconWidth, iconHeight)
+                        .padding(top = 9.dp, bottom = if (isTablet()) 6.dp else 4.dp)
 
                 )
             }
@@ -180,8 +189,8 @@ fun RowScope.AddItem(
                     contentDescription = "Navigation Icon",
                     tint = MaterialTheme.colorScheme.onTertiary,
                     modifier = Modifier
-                        .size(45.dp, 39.dp)
-                        .padding(top = 9.dp, bottom = 4.dp)
+                        .size(iconWidth, iconHeight)
+                        .padding(top = 9.dp, bottom = if (isTablet()) 6.dp else 4.dp)
                         .alpha(0.5F))
             }
 

app/src/main/java/com/vpn/fastestvpnservice/screens/ServerListScreen.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 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.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.pager.HorizontalPager
@@ -87,6 +88,7 @@ import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
 import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettings
 import com.vpn.fastestvpnservice.sealedClass.Screen
 import com.vpn.fastestvpnservice.ui.theme.customTypography2
+import com.vpn.fastestvpnservice.utils.isTablet
 import com.vpn.fastestvpnservice.viewmodels.SearchListViewModel
 import com.vpn.fastestvpnservice.viewmodels.ServerListViewModel
 import com.vpn.fastestvpnservice.viewmodels.SplashViewModel
@@ -119,6 +121,7 @@ fun ServerList(
             modifier = Modifier
                 .padding(horizontal = 16.dp)
                 .padding(top = 100.dp)
+                .background(Color.Transparent)
         ) {
             ShowSearchBar(serverListViewModel, basePreferenceHelper, navHostController)
 
@@ -151,11 +154,12 @@ fun ServerList(
                     selectedTabIndex = selectedIndex,
                     containerColor = MaterialTheme.colorScheme.onBackground,
                     modifier = Modifier
-                        .fillMaxWidth()
+                        .fillMaxWidth(if (isTablet()) 0.5f else 1f)
                         .padding(top = 16.dp)
                         .background(Color.Transparent)
                         .clip(RoundedCornerShape(28.dp))
                         .height(68.dp)
+                        .align(Alignment.CenterHorizontally)
 //                        .shadow(
 //                            elevation = AppBarDefaults.TopAppBarElevation,
 //                            shape = MaterialTheme.shapes.small,
@@ -818,6 +822,7 @@ fun ColumnScope.ShowSearchBar(
     val searchListViewModel: SearchListViewModel = viewModel{
         SearchListViewModel(context, serverListViewModel, splashViewModel)
     }
+    val scope = rememberCoroutineScope()
 
 //    var searchText by remember { mutableStateOf("") }
 //    var isActive by remember { mutableStateOf(false) }
@@ -828,7 +833,6 @@ fun ColumnScope.ShowSearchBar(
     var isFilter by remember { mutableStateOf(false) }
     val sheetState = rememberModalBottomSheetState()
     var selectedFilterList by remember { mutableStateOf(basePreferenceHelper.getFilterList()) }
-    val scope = rememberCoroutineScope()
 
     SearchBar(
         query = searchText!!,

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

@@ -52,6 +52,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
@@ -293,22 +294,27 @@ fun ColumnScope.AddTextAccount(text: String, size: TextUnit, color: Color) {
 
 @Composable
 fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
+    val configuration = LocalConfiguration.current
+    val isTablet = configuration.screenWidthDp > 840
     Row(
         modifier = Modifier
             .fillMaxWidth()
             .padding(top = 16.dp)
             .background(Color.Transparent)
-            .height(18.dp),
+            .height(if (isTablet) 20.dp else 18.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
     ) {
         Surface(
-            modifier = Modifier.padding(start = 0.dp),
+            modifier = Modifier.padding(start = 0.dp)
+                .align(Alignment.CenterVertically),
             color = Color.Transparent
         ) {
             Text(text = title,
                 color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.bodyLarge,
+                style = MaterialTheme.typography.bodyLarge.copy(
+                    fontSize = if (isTablet) 15.sp else 14.sp
+                ),
                 maxLines = 1,
                 modifier = Modifier
                     .padding(start = 10.dp, end = 0.dp)
@@ -322,11 +328,12 @@ fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
                 .padding(start = 0.dp)
                 .align(Alignment.CenterVertically),
             color = Color.Transparent
-
         ) {
             Text(text = subTitle,
                 color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.bodySmall,
+                style = MaterialTheme.typography.bodySmall.copy(
+                    fontSize = if (isTablet) 16.sp else 14.sp
+                ),
                 maxLines = 1,
                 modifier = Modifier
                     .padding(start = 0.dp, end = 0.dp)

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

@@ -91,6 +91,7 @@ import com.vpn.fastestvpnservice.sealedClass.Screen
 import com.vpn.fastestvpnservice.ui.theme.customTypography
 import com.vpn.fastestvpnservice.utils.Utils
 import com.vpn.fastestvpnservice.utils.VPNConnectionsUtil
+import com.vpn.fastestvpnservice.utils.isTablet
 import com.vpn.fastestvpnservice.viewmodels.HomeViewModel
 import com.vpn.fastestvpnservice.viewmodels.ServerListViewModel
 import com.vpn.fastestvpnservice.widgets.SimpleAppWidget
@@ -256,6 +257,8 @@ fun Home(
     var isConnect: Int? = homeViewModel.isConnect.observeAsState().value
     isConnect = basePreferenceHelper.getConnectState()
     var server: Server = Server()
+    val configuration = LocalConfiguration.current
+//    val isTablet = configuration.screenWidthDp > 840
 
     OnLifecycleEvent{owner, event ->
         when(event) {
@@ -339,10 +342,7 @@ fun Home(
         homeViewModel._mutableLiveDataValidate.value = null
     }
 
-    val configuration = LocalConfiguration.current
-    val expanded = configuration.screenWidthDp > 840
-
-    Log.d("test_istablet", "Is Tablet ? $expanded , width = ${configuration.screenWidthDp}, height = ${configuration.screenHeightDp}")
+//    Log.d("test_istablet", "Is Tablet ? $isTablet , width = ${configuration.screenWidthDp}, height = ${configuration.screenHeightDp}")
 
     Column(
         modifier = Modifier
@@ -412,7 +412,7 @@ fun Home(
 //                            .offset(y = -(118).dp)
                         .background(Color.Transparent),
                     horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.SpaceEvenly
+                    verticalArrangement = if (isTablet()) Arrangement.Bottom else Arrangement.SpaceEvenly
                 ) {
                     val serverObj = basePreferenceHelper.getConnectedServer()
                     val serverDis = basePreferenceHelper.getIpinfo()
@@ -423,7 +423,9 @@ fun Home(
                         text = "IP ${ipInfo ?: ""}",
                         size = 18.sp,
                         color = MaterialTheme.colorScheme.primary,
-                        style = MaterialTheme.typography.customTypography.headlineLarge
+                        style = MaterialTheme.typography.customTypography.headlineLarge.copy(
+                            fontSize = if (isTablet()) 24.sp else 18.sp
+                        )
                     )
                     Row(
                     ) {
@@ -435,11 +437,11 @@ fun Home(
                                     contentDescription = "Country",
                                     modifier = Modifier
                                         .padding(end = 6.dp)
-                                        .size(20.dp)
+                                        .size(if (isTablet()) 26.dp else 20.dp)
                                         .clip(CircleShape)
                                         .paint(
                                             painter = painterResource(id = image),
-                                            contentScale = ContentScale.FillHeight
+                                            contentScale = ContentScale.FillBounds
                                         )
                                 )
                             }
@@ -447,6 +449,7 @@ fun Home(
                                 text = "${serverObj?.server_name ?: ""}, ${serverObj?.country ?: ""}",
                                 size = 16.sp,
                                 color = MaterialTheme.colorScheme.primary,
+                                isTablet()
                             )
                         } else {
                             val image = Utils.getDrawable(context, serverDis?.countryCode)
@@ -457,18 +460,19 @@ fun Home(
                                     contentDescription = "Server",
                                     modifier = Modifier
                                         .padding(end = 6.dp)
-                                        .size(20.dp)
+                                        .size(if (isTablet()) 26.dp else 20.dp)
                                         .clip(CircleShape)
                                         .paint(
                                             painter = painterResource(id = image),
-                                            contentScale = ContentScale.FillHeight
+                                            contentScale = ContentScale.FillBounds
                                         )
                                 )
                             }
                             AddText(
                                 text = "${serverDis?.city ?: ""}, ${serverDis?.country ?: ""}",
                                 size = 16.sp,
-                                color = MaterialTheme.colorScheme.primary
+                                color = MaterialTheme.colorScheme.primary,
+                                isTablet()
                             )
                         }
                     }
@@ -477,7 +481,9 @@ fun Home(
                             text = "Connected",
                             size = 18.sp,
                             color = MaterialTheme.colorScheme.surfaceContainerHigh,
-                            style = MaterialTheme.typography.customTypography.displaySmall
+                            style = MaterialTheme.typography.customTypography.displaySmall.copy(
+                                fontSize = if (isTablet()) 24.sp else 18.sp
+                            )
                         )
                     }
                     else if (isConnect == App.DISCONNECTED) {
@@ -485,7 +491,9 @@ fun Home(
                             text = "Disconnected",
                             size = 18.sp,
                             color = MaterialTheme.colorScheme.surfaceTint,
-                            style = MaterialTheme.typography.customTypography.displaySmall
+                            style = MaterialTheme.typography.customTypography.displaySmall.copy(
+                                fontSize = if (isTablet()) 24.sp else 18.sp
+                            )
                         )
                     }
                     else if (isConnect == App.CONNECTING) {
@@ -493,7 +501,9 @@ fun Home(
                             text = "Connecting...",
                             size = 18.sp,
                             color = MaterialTheme.colorScheme.surfaceTint,
-                            style = MaterialTheme.typography.customTypography.displaySmall
+                            style = MaterialTheme.typography.customTypography.displaySmall.copy(
+                                fontSize = if (isTablet()) 24.sp else 18.sp
+                            )
                         )
                     }
                 }
@@ -604,7 +614,7 @@ fun Home(
 
                 Box(
                     modifier = Modifier
-                        .fillMaxWidth()
+                        .fillMaxWidth(fraction = if (isTablet()) 0.5f else 1f)
                         .padding(horizontal = 20.dp)
                         .padding(vertical = 5.dp)
                         .height(120.dp)
@@ -615,9 +625,11 @@ fun Home(
                         .background(
                             shape = RoundedCornerShape(28.dp),
                             color = MaterialTheme.colorScheme.onBackground
-                        ),
+                        )
+                        .align(Alignment.CenterHorizontally)
+                        ,
                 ) {
-                    AddRowSmart(navHostController, basePreferenceHelper, context)
+                    AddRowSmart(navHostController, basePreferenceHelper, context, isTablet())
                     var smartServer = basePreferenceHelper.getSmartServerObject()
                     val recommended = basePreferenceHelper.getRecommendedServerObject()
                     val selectedSmartList = basePreferenceHelper.getSmartList()
@@ -695,7 +707,9 @@ fun Home(
                     ) {
                         Text(
                             text = "Smart Connect",
-                            style = MaterialTheme.typography.customTypography.labelLarge,
+                            style = MaterialTheme.typography.customTypography.labelLarge.copy(
+                                fontSize = if (isTablet()) 21.sp else 18.sp
+                            ),
                             modifier = Modifier.background(Color.Transparent)
                         )
                     }
@@ -708,7 +722,7 @@ fun Home(
 
                 Box(
                     modifier = Modifier
-                        .fillMaxWidth()
+                        .fillMaxWidth(fraction = if (isTablet()) 0.5f else 1f)
                         .padding(horizontal = 20.dp, vertical = 5.dp)
                         .padding(top = 0.dp)
                         .height(70.dp)
@@ -719,10 +733,11 @@ fun Home(
                         .background(
                             shape = RoundedCornerShape(28.dp),
                             color = MaterialTheme.colorScheme.onBackground
-                        ),
+                        )
+                        .align(Alignment.CenterHorizontally),
                     contentAlignment = Alignment.CenterStart,
                 ) {
-                    AddRowSelectServer(navHostController)
+                    AddRowSelectServer(navHostController, isTablet())
                 }
             }
         }
@@ -1058,7 +1073,8 @@ fun ColumnScope.ColumnText(
 fun BoxScope.AddRowSmart(
     navHostController: NavHostController,
     basePreferenceHelper: BasePreferenceHelper,
-    context: Context
+    context: Context,
+    isTablet: Boolean
 ) {
     val smart = basePreferenceHelper.getSmartServerObject()
     val recommended = basePreferenceHelper.getRecommendedServerObject()
@@ -1147,13 +1163,17 @@ fun BoxScope.AddRowSmart(
                 text = selectedSmartList,
                 color = MaterialTheme.colorScheme.surfaceContainerLow,
                 size = 12.sp,
-                style = MaterialTheme.typography.customTypography.headlineSmall
+                style = MaterialTheme.typography.customTypography.headlineSmall.copy(
+                    fontSize = if (isTablet()) 16.sp else 12.sp
+                )
             )
             ColumnText(
                 text = "${selectedServer?.server_name}",
                 color = MaterialTheme.colorScheme.primary,
                 size = 16.sp,
-                style = MaterialTheme.typography.labelMedium
+                style = MaterialTheme.typography.labelMedium.copy(
+                    fontSize = if (isTablet()) 20.sp else 16.sp
+                )
             )
         }
         Spacer(modifier = Modifier.weight(1F))
@@ -1164,7 +1184,8 @@ fun BoxScope.AddRowSmart(
             ClickableText(
                 text = AnnotatedString("Change"),
                 style = MaterialTheme.typography.customTypography.headlineMedium.copy(
-                    MaterialTheme.colorScheme.surfaceContainerLow
+                    MaterialTheme.colorScheme.surfaceContainerLow,
+                    fontSize = if (isTablet()) 20.sp else 14.sp
                 ),
                 onClick = {
                     toChangeServer.value = true
@@ -1180,7 +1201,7 @@ fun BoxScope.AddRowSmart(
 }
 
 @Composable
-fun BoxScope.AddRowSelectServer(navHostController: NavHostController) {
+fun BoxScope.AddRowSelectServer(navHostController: NavHostController, isTablet: Boolean) {
     Row(
         modifier = Modifier
             .fillMaxWidth()
@@ -1222,7 +1243,9 @@ fun BoxScope.AddRowSelectServer(navHostController: NavHostController) {
             color = Color.Transparent
         ) {
             Text(text = "See All Locations",
-                style = MaterialTheme.typography.labelMedium,
+                style = MaterialTheme.typography.labelMedium.copy(
+                    fontSize = if (isTablet()) 20.sp else 16.sp
+                ),
                 color = MaterialTheme.colorScheme.primary,
                 maxLines = 2,
                 modifier = Modifier
@@ -1260,16 +1283,20 @@ fun ColumnScope.AddText(
     Text(
         text = text,
         style = style,
-        color = color
+        color = color,
+        modifier = Modifier.padding(bottom = if (isTablet()) 15.dp else 0.dp)
     )
 }
 
 @Composable
-fun RowScope.AddText(text: String, size: TextUnit, color: Color) {
+fun RowScope.AddText(text: String, size: TextUnit, color: Color, isTablet: Boolean) {
     Text(
         text = text,
-        style = MaterialTheme.typography.labelMedium,
-        color = color
+        style = MaterialTheme.typography.labelMedium.copy(
+            fontSize = if (isTablet()) 22.sp else 16.sp
+        ),
+        color = color,
+        modifier = Modifier.padding(bottom = if (isTablet()) 15.dp else 0.dp)
     )
 }
 

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

@@ -89,6 +89,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.colorResource
@@ -416,6 +417,8 @@ fun ColumnScope.AddRowSettingsColumn(
     val serverListViewModel: ServerListViewModel = viewModel{
         ServerListViewModel(context)
     }
+    val configuration = LocalConfiguration.current
+    val isTablet = configuration.screenWidthDp > 840
 
     Log.d("availableProtocols", availableProtocols.toString())
 
@@ -467,7 +470,9 @@ fun ColumnScope.AddRowSettingsColumn(
                 )
                 Spacer(modifier = Modifier.height(2.dp))
                 Text(text = selectedProtocol,
-                    style = MaterialTheme.typography.headlineSmall,
+                    style = MaterialTheme.typography.headlineSmall.copy(
+                        fontSize = if (isTablet) 14.sp else 12.sp
+                    ),
                     color = MaterialTheme.colorScheme.primary,
                     maxLines = 1,
                     modifier = Modifier

app/src/main/java/com/vpn/fastestvpnservice/utils/DeviceConfiguration.kt

@@ -0,0 +1,11 @@
+package com.vpn.fastestvpnservice.utils
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalConfiguration
+
+@Composable
+fun isTablet(): Boolean {
+    val configuration = LocalConfiguration.current
+    val isTablet = configuration.screenWidthDp > 840
+    return isTablet
+}