Created connection feedback UI for a server, user can thumbs up or down, and toggling the state between enabled and disabled state with background color, etc..

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

@@ -4,9 +4,9 @@ import android.app.Activity
 import android.content.Context
 import android.content.Intent
 import android.content.res.Configuration
-import android.icu.text.DecimalFormat
 import android.os.Handler
 import android.util.Log
+import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
@@ -28,11 +28,12 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.ThumbDown
+import androidx.compose.material.icons.outlined.ThumbUp
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -45,10 +46,13 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -760,6 +764,8 @@ fun Home(
                     }
                 }
                 else {
+                    var isFeedbackClicked by remember { mutableStateOf(false) }
+
                     Box(
                         modifier = Modifier
                             .fillMaxWidth()
@@ -901,10 +907,68 @@ fun Home(
 
                     Box(
                         modifier = Modifier
-                            .padding(top = 10.dp)
-
+                            .padding(16.dp)
+                            .fillMaxWidth()
+                            .height(70.dp)
+                            .background(
+                                if (isFeedbackClicked) colorResource(id = R.color.yellow_feedback)
+                                else colorResource(id = R.color.blue_feedback),
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .border(
+                                width = 1.dp,
+                                color = Color.Transparent,
+                                shape = RoundedCornerShape(12.dp)
+                            )
                     ) {
+                        Row(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .padding(16.dp),
+                            horizontalArrangement = Arrangement.SpaceBetween,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Text(
+                                text = "How's your connection?",
+                                style = MaterialTheme.typography.customTypography.titleSmall.copy(
+                                    color = Color.White
+                                )
+                            )
 
+                            Row(
+                                modifier = Modifier
+                                    .background(Color.Transparent),
+                                horizontalArrangement = Arrangement.Center,
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Image(
+                                    imageVector = Icons.Outlined.ThumbUp,
+                                    contentDescription = "Thumb Up",
+                                    modifier = Modifier
+                                        .padding(end = 25.dp)
+                                        .size(24.dp)
+                                        .pointerInput(Unit) {
+                                            detectTapGestures {
+                                                if (!isFeedbackClicked) isFeedbackClicked = !isFeedbackClicked
+                                            }
+                                        },
+                                    colorFilter = ColorFilter.tint(colorResource(id = R.color.white))
+                                )
+                                Image(
+                                    imageVector = Icons.Outlined.ThumbDown,
+                                    contentDescription = "Thumb Down",
+                                    modifier = Modifier
+                                        .padding(end = 10.dp)
+                                        .size(24.dp)
+                                        .pointerInput(Unit) {
+                                            detectTapGestures {
+                                                if (!isFeedbackClicked) isFeedbackClicked = !isFeedbackClicked
+                                            }
+                                        },
+                                    colorFilter = ColorFilter.tint(colorResource(id = R.color.white))
+                                )
+                            }
+                        }
                     }
                 }
             }

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

@@ -818,7 +818,8 @@ fun SelectLanguage(
                     .size(24.dp)
                     .weight(1f),
                 colorFilter = ColorFilter.tint(
-                    MaterialTheme.colorScheme.primary)                )
+                    MaterialTheme.colorScheme.primary)
+            )
         }
 
         Surface(

app/src/main/res/values/colors.xml

@@ -43,11 +43,10 @@
     <color name="split_background">#E9EAEC</color>
     <color name="split_background_dark">#36485e80</color>
     <color name="webview_background">#ECF2FC</color>
+    <color name="blue_feedback">#3865E7</color>
+    <color name="yellow_feedback">#F7B628</color>
 
         <color name="app_color">#000028</color>
-
-
-
         <color name="White">#FFFFFF</color>
         <color name="Ivory">#FFFFF0</color>
         <color name="LightYellow">#FFFFE0</color>