Navigation in Android Studio Jetpack Compose overlapping with other screen

Question

I'm new in Android Developing. Currently I'm using Jetpack Compose and for now I'm studying about Navigation but after I tried it Myself it didn't work correctly. the Main Issue was the navigation really go to the destination screen but it still overlapping with the start destination so the start destination text is overlapping with the destination screen text

can you guys help me what is wrong with my code?

This is MainScreen.kt

@Composable
fun MainScreen() {
    val navController:NavHostController = rememberNavController()
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center)
    {
        Text(text = "Ini Halaman Utama",
            color = Color.Blue,
            textAlign = TextAlign.Center)
    }
    SetupNavGraph(navController = navController)
    Search(navController = navController)
}

This is Main Activity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.latihannavigation.ui.theme.LatihanNavigationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LatihanNavigationTheme {
                MainScreen()
            }
        }
    }
}

This is NavGraph.kt

@Composable
fun SetupNavGraph(navController: NavHostController){
    NavHost(navController = navController,
        startDestination =Screen.Search.route){
            composable(route = Screen.Search.route) {
                MainScreen()
        }
            composable(route = Screen.Setting.route){
                Pengaturan(navController = navController)
            }
    }
}

this is Screen Sealed class

package com.example.latihannavigation

sealed class Screen(val route:String){
    object Search: Screen(route = "Screen_Home")
    object Setting: Screen(route = "Screen_Setting")
}

This is SearchBar.kt

@Composable
fun Search(navController: NavHostController){
    Box(modifier = Modifier
        .fillMaxSize()
        ){
            Icon(imageVector = Icons.Default.Settings,
                contentDescription = "Masuk Ke Menu Settings",
                tint = Color.Black,
                modifier = Modifier.clickable {
                    navController.navigate(route = Screen.Setting.route)
                })
    }
}

This is Setting.kt

@Composable
fun Pengaturan(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center)
    {
        Text(text = "Ini Adalah Halaman Pengaturan", color = Color.Red)
    }
    Icon(imageVector = Icons.Default.ArrowBack,
        contentDescription = "Kembali Ke Halaman Utama",
        tint = Color.Red,
        modifier = Modifier
            .clickable {navController.navigate(route = Screen.Search.route)})
}

}

the two screen is Setting.kt and MainScreen.kt

I tried to use navigate in jetpack compose and I'm expecting that the two-screen connected through icon button that I make.

Answer 1

I have made an example for you. Check it

package com.example.jetpackcomposeplayground

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController


@Composable
fun MainScreen() {
    val navController: NavHostController = rememberNavController()
    SetupNavGraph(navController = navController)

}

@Composable
fun SetupNavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = Screen.Search.route
    ) {
        composable(route = Screen.Search.route) {
            HomeScreen {
                navController.navigate(it)
            }
        }
        composable(route = Screen.Setting.route) {
            Pengaturan(navController = navController)
        }
    }
}

@Composable
fun HomeScreen(navigateTo: (route: String) -> Unit) {
    Column {
        Search(navigateTo = navigateTo)
        Box(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f), contentAlignment = Alignment.Center
        )
        {
            Text(
                text = "Ini Halaman Utama",
                color = Color.Blue,
                textAlign = TextAlign.Center
            )
        }
    }
}

sealed class Screen(val route: String) {
    object Search : Screen(route = "Screen_Home")
    object Setting : Screen(route = "Screen_Setting")
}

@Composable
fun Search(navigateTo: (route: String) -> Unit) {
    Box(

    ) {
        Icon(imageVector = Icons.Default.Settings,
            contentDescription = "Masuk Ke Menu Settings",
            tint = Color.Black,
            modifier = Modifier.clickable {
                navigateTo(Screen.Setting.route)
            })
    }
}

@Composable
fun Pengaturan(navController: NavHostController) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    )
    {
        Text(text = "Ini Adalah Halaman Pengaturan", color = Color.Red)
    }
    Icon(imageVector = Icons.Default.ArrowBack,
        contentDescription = "Kembali Ke Halaman Utama",
        tint = Color.Red,
        modifier = Modifier
            .clickable { navController.navigate(route = Screen.Search.route) })
}