Optimized Started Screen UI for multilingual

.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-10-08T14:41:52.073606451Z">
+        <DropdownSelection timestamp="2024-10-08T16:26:19.935918337Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="LocalEmulator" identifier="path=/home/ubuntu/.android/avd/Small_Phone_API_27.avd" />
+              <DeviceId pluginId="PhysicalDevice" identifier="serial=1C051FDF60048Z" />
             </handle>
           </Target>
         </DropdownSelection>

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

@@ -48,11 +48,14 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.UiMode
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.vpn.fastestvpnservice.R
@@ -66,10 +69,8 @@ fun Started(navHostController: NavHostController) {
     val configuration = LocalConfiguration.current
     val screenHeight = configuration.screenHeightDp.dp
     val screenWidth = configuration.screenWidthDp.dp
-
     val firstPart = screenHeight/1.5F
     val secondPart = screenHeight - firstPart
-    Log.d("test_height", "$screenHeight $firstPart $secondPart")
 
     Column(
         modifier = Modifier
@@ -85,10 +86,14 @@ fun Started(navHostController: NavHostController) {
             context.resources.getColor(R.color.gradientblues),
             context.resources.getColor(R.color.gradientbluee)
         )
-        val gradientDrawable = GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM,
-            colors)
-
-        val colorsList = listOf(colorResource(id = R.color.gradientblues), colorResource(id = R.color.gradientbluee))
+        val gradientDrawable = GradientDrawable(
+            GradientDrawable.Orientation.TOP_BOTTOM,
+            colors
+        )
+        val colorsList = listOf(
+            colorResource(id = R.color.gradientblues),
+            colorResource(id = R.color.gradientbluee)
+        )
         val gradientDrawableList = GradientDrawable(
             GradientDrawable.Orientation.TOP_BOTTOM,
             colorsList.map { it.toArgb() }.toIntArray()
@@ -102,151 +107,179 @@ fun Started(navHostController: NavHostController) {
 //        window.statusBarColor = colorResource(id = R.color.statusbarbluetop).toArgb()
 //        window.navigationBarColor = colorResource(id = R.color.statusbarbluebottom).toArgb()
 
-
-        Box(modifier = Modifier
-            .fillMaxSize()
-            .weight(0.6f)
-            .background(Color.Transparent),
-            contentAlignment = Alignment.Center
+        ConstraintLayout(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Color.Transparent),
         ) {
-            Image(
-                painter = painterResource(id = R.drawable.map2),
-                contentDescription = "FastestVPN Map",
-                modifier = Modifier
-                    .background(Color.Transparent)
-                    .padding(vertical = 0.dp)
-                    .fillMaxSize()
-                ,
-                contentScale = ContentScale.FillBounds
-            )
-            Image(
-                painter = painterResource(id = R.drawable.lines_fvpn3x),
-                contentDescription = "FastestVPN Lines",
+            val (firstComposable, secondComposable) = createRefs()
+
+            Box(
                 modifier = Modifier
+                    .constrainAs(firstComposable) {
+                        top.linkTo(parent.top)
+                        bottom.linkTo(secondComposable.top)
+                        start.linkTo(parent.start)
+                        end.linkTo(parent.end)
+                        width = Dimension.fillToConstraints
+                        height = Dimension.fillToConstraints
+                    }
                     .background(Color.Transparent)
-                    .fillMaxSize()
-                    .padding(
-                        top = 70.dp,
-                        start = 27.dp,
-                        end = 27.dp,
-                        bottom = 80.dp
-                    ),
-                contentScale = ContentScale.FillBounds
-            )
-        }
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.map2),
+                    contentDescription = "FastestVPN Map",
+                    modifier = Modifier
+                        .background(Color.Transparent)
+                        .padding(vertical = 0.dp)
+                        .fillMaxSize()
+                    ,
+                    contentScale = ContentScale.FillBounds
+                )
+                Image(
+                    painter = painterResource(id = R.drawable.lines_fvpn3x),
+                    contentDescription = "FastestVPN Lines",
+                    modifier = Modifier
+                        .background(Color.Transparent)
+                        .fillMaxSize()
+                        .padding(
+                            top = 70.dp,
+                            start = 27.dp,
+                            end = 27.dp,
+                            bottom = 80.dp
+                        ),
+                    contentScale = ContentScale.FillBounds
+                )
+            }
 
-        Box(modifier = Modifier
-            .fillMaxSize()
-            .weight(0.4f)
-            .background(Color.Transparent)
-            .padding(vertical = 0.dp),
-        ) {
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
+            Box(
                 modifier = Modifier
-                    .fillMaxSize()
+                    .constrainAs(secondComposable) {
+                        top.linkTo(firstComposable.bottom)
+                        bottom.linkTo(parent.bottom)
+                        start.linkTo(parent.start)
+                        end.linkTo(parent.end)
+                        width = Dimension.fillToConstraints
+                        height = Dimension.preferredWrapContent
+                    }
                     .background(Color.Transparent)
-                    .padding(top = 0.dp),
-                verticalArrangement = Arrangement.Center
-                
             ) {
-                Column (
+                Column(
                     horizontalAlignment = Alignment.CenterHorizontally,
                     modifier = Modifier
-                        .padding(top = 0.dp)
                         .background(Color.Transparent)
+                        .padding(top = 0.dp),
+                    verticalArrangement = Arrangement.Center
                 ) {
-                    Text(
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
                         modifier = Modifier
-                            .padding(bottom = 15.dp),
-                        text = context.getString(R.string.secure_fast),
-                        color = colorResource(id = R.color.white),
-                        style = MaterialTheme.typography.titleLarge,
-                        lineHeight = 30.sp
-                    )
-                    Text(
-                        modifier = Modifier
-                            .padding(start = 0.dp)
-                            .alpha(0.8F),
-                        text = context.getString(R.string.started_text_1),
-                        style = MaterialTheme.typography.customTypography.labelSmall,
-                    )
-                    Text(
-                        modifier = Modifier
-                            .padding(start = 0.dp)
-                            .alpha(0.8F),
-                        text = context.getString(R.string.started_text_2),
-                        style = MaterialTheme.typography.customTypography.labelSmall,
-                    )
-                    Text(
-                        modifier = Modifier
-                            .padding(start = 0.dp)
-                            .alpha(0.8F),
-                        text = context.getString(R.string.started_text_3),
-                        style = MaterialTheme.typography.customTypography.labelSmall,
-                    )
-                }
-
-                Row (
-                    modifier = Modifier
-                        .padding(top = 10.dp)
-                        .background(Color.Transparent),
-                    horizontalArrangement = Arrangement.Center,
-                    verticalAlignment = Alignment.Bottom
-                ) {
-                    Button(
-                        onClick = {
-                            navHostController.popBackStack()
-                            navHostController.navigate(Screen.Login.route)
-                        },
-                        modifier = Modifier
-                            .padding(
-                                start = 15.dp, end = 5.dp,
-                                bottom = 15.dp, top = 15.dp
-                            )
-                            .background(colorResource(id = R.color.transparent))
-                            .weight(1F)
-                            .height(60.dp),
-
-                        shape = RoundedCornerShape(15.dp),
-                        colors = ButtonDefaults.buttonColors(
-                            contentColor = MaterialTheme.colorScheme.primaryContainer,
-                            containerColor = MaterialTheme.colorScheme.onSecondaryContainer,
-                        ),
-                    )
-                    {
-                        Text(text = context.getString(R.string.signin),
-                            style = MaterialTheme.typography.customTypography.labelMedium,
+                            .padding(top = 0.dp)
+                            .background(Color.Transparent)
+                    ) {
+                        Text(
+                            modifier = Modifier
+                                .padding(bottom = 15.dp),
+                            text = context.getString(R.string.secure_fast),
+                            color = colorResource(id = R.color.white),
+                            style = MaterialTheme.typography.titleLarge,
+                            lineHeight = 30.sp,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                        Text(
+                            modifier = Modifier
+                                .padding(start = 0.dp)
+                                .alpha(0.8F),
+                            text = context.getString(R.string.started_text_1),
+                            style = MaterialTheme.typography.customTypography.labelSmall,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                        Text(
+                            modifier = Modifier
+                                .padding(start = 0.dp)
+                                .alpha(0.8F),
+                            text = context.getString(R.string.started_text_2),
+                            style = MaterialTheme.typography.customTypography.labelSmall,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                        Text(
+                            modifier = Modifier
+                                .padding(start = 0.dp)
+                                .alpha(0.8F),
+                            text = context.getString(R.string.started_text_3),
+                            style = MaterialTheme.typography.customTypography.labelSmall,
+                            overflow = TextOverflow.Ellipsis
                         )
-                    }
 
-                    Button(
-                        onClick = {
-                            navHostController.popBackStack()
-                            navHostController.navigate(Screen.SignUp.route)
-                        },
-                        modifier = Modifier
-                            .padding(
-                                start = 5.dp, end = 15.dp,
-                                bottom = 15.dp, top = 15.dp
+                        Row(
+                            modifier = Modifier
+                                .padding(top = 10.dp)
+                                .background(Color.Transparent),
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.Bottom
+                        ) {
+                            Button(
+                                onClick = {
+                                    navHostController.popBackStack()
+                                    navHostController.navigate(Screen.Login.route)
+                                },
+                                modifier = Modifier
+                                    .padding(
+                                        start = 15.dp, end = 5.dp,
+                                        bottom = 15.dp, top = 15.dp
+                                    )
+                                    .background(colorResource(id = R.color.transparent))
+                                    .weight(1F)
+                                    .height(60.dp),
+
+                                shape = RoundedCornerShape(15.dp),
+                                colors = ButtonDefaults.buttonColors(
+                                    contentColor = MaterialTheme.colorScheme.primaryContainer,
+                                    containerColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                                ),
                             )
-                            .background(colorResource(id = R.color.transparent))
-                            .weight(1F)
-                            .height(60.dp),
+                            {
+                                Text(
+                                    text = context.getString(R.string.signin),
+                                    style = MaterialTheme.typography.customTypography.labelMedium,
+                                    lineHeight = 15.sp
+                                )
+                            }
 
-                        shape = RoundedCornerShape(15.dp),
-                        colors = ButtonDefaults.buttonColors(
-                            contentColor = colorResource(id = R.color.white),
-                            containerColor = colorResource(id = R.color.transparent),
-                        ),
-                        border = BorderStroke(2.dp,
-                            colorResource(id = R.color.white))
-                    )
-                    {
-                        Text(text = context.getString(R.string.signup),
-                            style = MaterialTheme.typography.customTypography.labelMedium,
-                            lineHeight = 15.sp
+                            Button(
+                                onClick = {
+                                    navHostController.popBackStack()
+                                    navHostController.navigate(Screen.SignUp.route)
+                                },
+                                modifier = Modifier
+                                    .padding(
+                                        start = 5.dp, end = 15.dp,
+                                        bottom = 15.dp, top = 15.dp
+                                    )
+                                    .background(colorResource(id = R.color.transparent))
+                                    .weight(1F)
+                                    .height(60.dp),
+
+                                shape = RoundedCornerShape(15.dp),
+                                colors = ButtonDefaults.buttonColors(
+                                    contentColor = colorResource(id = R.color.white),
+                                    containerColor = colorResource(id = R.color.transparent),
+                                ),
+                                border = BorderStroke(
+                                    2.dp,
+                                    colorResource(id = R.color.white)
+                                )
                             )
+                            {
+                                Text(
+                                    text = context.getString(R.string.signup),
+                                    style = MaterialTheme.typography.customTypography.labelMedium,
+                                    lineHeight = 15.sp
+                                )
+                            }
+                        }
+                        
+                        Spacer(modifier = Modifier.height(10.dp))
                     }
                 }
             }