CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack-navigation
geek
geek

Reputation: 31

How to navigate in jetpack compose to another screen without this problem?

I have a problem with navigating to another screen in Jetpack compose. I have everything set up, everything double-checked, and still, when I push the button it should bring to another screen. I get a few debug info in logcat, which indicates that something did go wrong with the navigation and nothing will happen. When I tried to figure out the problem I found out that the function that should represent the second screen is successfully called and when I use the function Log.d("Second screen") it will be printed in the log cat successfully. Still, none of the content will appear and none of the previous content will disappear. I tried to google it and also asked chat gpt, but I didn't find anything, and chat gpt only told me that it should work fine and I should check everything once again. In the end, I created a new project and put my code in there thinking that it might be some project setting, which is causing the problem, but nothing changed.

Here is my Main_activity. There is set up everything to navigation and the button that should initiate it:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ToDoApp2Theme {
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = Screens.HomeScreen.route) {
                    composable(route = Screens.HomeScreen.route){ Greeting(navController) }
                    composable(route = Screens.AddScreen.route){ Add_screen(navController) }
                }
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting(navController)
                }
            }
        }
    }
}

@Composable
fun Greeting(navController: NavController, modifier: Modifier = Modifier) {
    Box(modifier = Modifier
        .width(15.dp)
        .height(20.dp)
        .padding(vertical = 100.dp, horizontal = 100.dp)){
        Button(onClick = {
            navController.navigate(Screens.AddScreen.route)
        }) {
            Text(text = "+")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ToDoApp2Theme {
        val navController = rememberNavController()
        Greeting(navController = navController)
    }
}

Screens:

package com.example.todoapp2

sealed class Screens(val route: String){
    object HomeScreen : Screens("Greeting")
    object AddScreen : Screens("AddScreen")
}

AddScreen:

package com.example.todoapp2

import android.util.Log
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.navigation.NavController

@Composable
fun Add_screen(navController: NavController) {
    Text(text = "this is my add screen")
}

I have implemented the navigation at the newest version: 2.7.4. I have no errors in the app. The debug in the logcat which I think should be related to this is: nav gesture mode swipeFromBottom ignore true downX 63 downY 1591 mScreenHeight 1600 mScreenWidth 720 The values for downX and downY are changing each time. It is written every time I push the button. I am new to jetpack compose and I am out of options that could solve this. Please anybody know how to solve this?

Upvotes: 3

Views: 5755

Answers (1)

ianhanniballake
ianhanniballake

Reputation: 200080

A NavHost is what displays the screens of your app. By adding another Surface with a solid color, you've effectively hidden the actual NavHost entirely with another copy of your Greeting screen - one that also hides any changes in the NavHost.

So just remove the other Surface entirely and you'll only see your NavHost and the screens it swaps between when you call navigate.

Upvotes: 5

Related Questions