set bottom nav bar at center

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

@@ -4,9 +4,7 @@ import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.compose.foundation.background
 import androidx.compose.foundation.focusable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -55,14 +53,18 @@ val screens = listOf(
     BottomBarScreen.Account
 )
 val focusRequesterNav1 = FocusRequester()
+val focusRequesterSettings1 = FocusRequester()
+
 var focusRequestersList = List(screens.size) { FocusRequester() }
 var selectedItemIndex: MutableState<Int> = mutableIntStateOf(0)
 @Composable
 fun BottomBarMainScreenTV(navHostController: NavHostController, activity: ComponentActivity) {
     val navController1 = rememberNavController()
     var isBottomBarVisible by remember { mutableStateOf(true) }
+    var focusRequesterSettings = remember { FocusRequester() }
 
 LaunchedEffect(key1 = Unit) {
+//    focusRequesterNav1.requestFocus()
     focusRequestersList[selectedItemIndex.value].requestFocus()
 }
 
@@ -75,7 +77,7 @@ LaunchedEffect(key1 = Unit) {
         modifier = Modifier.fillMaxSize(),
         bottomBar = {
             if (isBottomBarVisible) {
-                BottomBarTV(navController1, screens)
+                BottomBarTV(navController1, screens, focusRequesterSettings)
             }
         },
         content = { padding ->
@@ -98,17 +100,18 @@ LaunchedEffect(key1 = Unit) {
 }
 
 @Composable
-fun BottomBarTV(navHostController: NavHostController, screens: List<BottomBarScreen>) {
+fun BottomBarTV(navHostController: NavHostController, screens: List<BottomBarScreen>, focusRequesterSettings: FocusRequester) {
 
     val context = LocalContext.current
     val navBackStackEntry = navHostController.currentBackStackEntryAsState()
     var currentDestination = navBackStackEntry.value?.destination
     Log.d("currentRoute -> BB ", currentDestination.toString())
 
-    Column(
-        modifier = Modifier,
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(colorResource(id = R.color.background_color_gray)),
+        contentAlignment = Alignment.Center
     ) {
         BottomNavigation (
 //        backgroundColor = MaterialTheme.colorScheme.onBackground,
@@ -117,8 +120,8 @@ fun BottomBarTV(navHostController: NavHostController, screens: List<BottomBarScr
 //        contentColor = Color.Gray,
             modifier = Modifier
                 .height(if (StaticMethods.isTV(context)) 60.dp else if (isTablet()) 150.dp else 110.dp)
-                .fillMaxWidth(fraction = 1f)
-//                .background(Color.LightGray)
+                .fillMaxWidth(fraction = 0.5f)
+                .background(Color.LightGray)
 
         ) {
             screens.forEachIndexed { index, screen ->
@@ -126,7 +129,8 @@ fun BottomBarTV(navHostController: NavHostController, screens: List<BottomBarScr
                     screen = screen,
                     currentDestination = currentDestination,
                     navHostController = navHostController,
-                    index
+                    index,
+                    focusRequesterSettings
                 )
             }
         }
@@ -138,7 +142,8 @@ fun RowScope.AddItemTV(
     screen: BottomBarScreen,
     currentDestination: NavDestination?,
     navHostController: NavHostController,
-    index: Int
+    index: Int,
+    focusRequesterSettings: FocusRequester
 ) {
     var isClicked by remember { mutableStateOf(false) }
     var isFocused by remember { mutableStateOf(false) }
@@ -207,6 +212,7 @@ fun RowScope.AddItemTV(
 //            }
             .onFocusChanged {
                 isFocused = it.isFocused
+//                if (it.isFocused) isClicked = it.isFocused
 
                 Log.d(
                     "test_bottom_navbar",
@@ -248,23 +254,41 @@ fun RowScope.AddItemTV(
 //                else {
 //                    isFocused = it.isFocused
 //                }
-//                isClicked = it.isFocused
             }
             .focusable()
-            .background(if (isFocused) Color.LightGray else Color.White)
-        ,
-        selected = currentDestination?.hierarchy?.any{
-                    it.route == screen.route
+            .background(if (isFocused) Color.LightGray else colorResource(id = R.color.background_color_gray)),
+        selected = currentDestination?.hierarchy?.any {
+            it.route == screen.route
         } == true,
         onClick = {
             isClicked = true
-            Log.d("test_bottom_navbar", "onCLick = ${screen.route
-            }")
+            selectedItemIndex.value = index
+//            when (selectedItemIndex.value) {
+//                0 -> {
+//                    focusRequesterHome1.requestFocus()
+//                }
+//                1 -> {
+//                    focusRequesterSettings.requestFocus()
+//                }
+//                3 -> {
+//                    focusRequesterHelp1.requestFocus()
+//                }
+//                4 -> {
+//                    focusRequesterAccount1.requestFocus()
+//                }
+//            }
+            Log.d(
+                "test_bottom_navbar", "onCLick = ${
+                    screen.route
+                }"
+            )
             /* First time currentDestination is different when on BottomBar Item */
         },
         icon = {
-            val iconWidth = if (StaticMethods.isTV(context)) 55.dp else if (isTablet()) 50.dp else 45.dp
-            val iconHeight = if (StaticMethods.isTV(context)) 55.dp else if (isTablet()) 44.dp else 39.dp
+            val iconWidth =
+                if (StaticMethods.isTV(context)) 55.dp else if (isTablet()) 50.dp else 45.dp
+            val iconHeight =
+                if (StaticMethods.isTV(context)) 55.dp else if (isTablet()) 44.dp else 39.dp
             if (currentDestination?.route == screen.route) {
                 Icon(
                     painter = painterResource(id = screen.icon),
@@ -275,8 +299,7 @@ fun RowScope.AddItemTV(
                         .size(iconWidth, iconHeight)
                         .padding(top = 9.dp, bottom = if (isTablet()) 6.dp else 4.dp)
                 )
-            }
-            else {
+            } else {
                 Icon(
                     painter = painterResource(id = screen.icon),
                     contentDescription = "Navigation Icon",
@@ -285,7 +308,8 @@ fun RowScope.AddItemTV(
                     modifier = Modifier
                         .size(iconWidth, iconHeight)
                         .padding(top = 9.dp, bottom = if (isTablet()) 6.dp else 4.dp)
-                        .alpha(0.5F))
+                        .alpha(0.5F)
+                )
             }
 
         },