BottomNaviagtionCompose Naviagtion

BottomNaviagtionCompose.kt

implementation "androidx.navigation:navigation-compose:2.5.2" 


import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.qamar.composewithhilt.ui.bottomnavigation.BottomNavItem
import com.qamar.composewithhilt.ui.theme.ComposeWithHiltTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeWithHiltTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = colorResource(id = R.color.gray)
                ) {

                    BottomNavigationComponent()
                }
            }
        }
    }
}

val bottomNavigationItems = listOf(
    BottomNavItem.Home,
    BottomNavItem.Bookmarks,
    BottomNavItem.Notification,
)

@Composable
fun BottomNavigationComponent() {
    val navController = rememberNavController()
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = colorResource(id = R.color.gray)
    ) {
        NavHost(navController, startDestination = BottomNavItem.Home.route) {
            composable( BottomNavItem.Home.route) { Home() }
            composable(BottomNavItem.Bookmarks.route) { Bookmarks() }
            composable(BottomNavItem.Notification.route) { Notification() }
        }
        Row(
            modifier = Modifier
                .height(43.dp)
                .fillMaxWidth()
                .padding(vertical = 29.dp, horizontal = 27.dp),
            verticalAlignment = Alignment.Bottom,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            val navBackStackEntry by navController.currentBackStackEntryAsState()
            val currentDestination = navBackStackEntry?.destination
            bottomNavigationItems.forEach {
                BottomNavigationItem(
                    bottomItem = it,
                    selectedItem =  bottomNavigationItems.find { it.route ==  currentDestination?.route },
                    onClick = {
                        navController.navigate(it.route) {
                            // Pop up to the start destination of the graph to
                            // avoid building up a large stack of destinations
                            // on the back stack as users select items
                            popUpTo(navController.graph.findStartDestination().id) {
                                saveState = true
                            }
                            // Avoid multiple copies of the same destination when
                            // reselecting the same item
                            launchSingleTop = true
                            // Restore state when reselecting a previously selected item
                            restoreState = true
                        }
                    }
                )
            }
        }


    }
}

@Composable
fun Notification() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.gray))
            .wrapContentSize(Alignment.Center)
    ) {
        Text(
            text = "Notification",
            fontWeight = FontWeight.Bold,
            color = Color.White,
            modifier = Modifier.align(Alignment.CenterHorizontally),
            textAlign = TextAlign.Center,
            fontSize = 20.sp
        )
    }
}

@Composable
fun Bookmarks() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.gray))
            .wrapContentSize(Alignment.Center)
    ) {
        Text(
            text = "Bookmarks",
            fontWeight = FontWeight.Bold,
            color = Color.White,
            modifier = Modifier.align(Alignment.CenterHorizontally),
            textAlign = TextAlign.Center,
            fontSize = 20.sp
        )
    }
}

@Composable
fun Home() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.gray))
            .wrapContentSize(Alignment.Center)
    ) {
        Text(
            text = "Home",
            fontWeight = FontWeight.Bold,
            color = Color.White,
            modifier = Modifier.align(Alignment.CenterHorizontally),
            textAlign = TextAlign.Center,
            fontSize = 20.sp
        )
    }
}

@Composable
fun BottomNavigationItem(
    bottomItem: BottomNavItem,
    selectedItem: BottomNavItem?,
    onClick: (BottomNavItem) -> Unit
) {
    val isSelected = bottomItem == selectedItem
    Row(
        modifier = Modifier
            .height(43.dp)
            .background(
                color = if (isSelected) Color.White else Color.Transparent,
                shape = RoundedCornerShape(22.dp)
            )
            .padding(horizontal = 21.dp, vertical = 12.dp)
            .clickable { onClick(bottomItem) },
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center,
    ) {
        Icon(
            painter = painterResource(bottomItem.icon), contentDescription = "",
            tint = if (isSelected) colorResource(id = R.color.selected) else colorResource(id = R.color.unselected),
            modifier = Modifier
                .width(20.dp)
                .height(20.dp)
        )
        AnimatedVisibility(isSelected) {
            Text(
                text = bottomItem.title,
                modifier = Modifier.padding(start = 16.dp),
                maxLines = 1,
            )
        }

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeWithHiltTheme {
        BottomNavigationComponent()
    }
}

BottomNavItem.kt

sealed class BottomNavItem(var title: String, var icon: Int, val route: String) {
    object Home : BottomNavItem("Home", R.drawable.home_icon, "home")
    object Bookmarks : BottomNavItem("Bookmarks", R.drawable.home_icon, "bookmarks")
    object Notification : BottomNavItem("Notification", R.drawable.home_icon, "notification")
}