package com.example.myfragment import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material3.Button import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import com.example.myfragment.ui.theme.MyFragmentTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { val nav_controller=rememberNavController() NavHost(navController = nav_controller, startDestination = "fragment1") { composable("fragment1"){Fragment1(nav_controller)} composable("fragment2"){Fragment2(nav_controller)} composable("fragment3"){Fragment3(nav_controller)} } } } @Composable fun Fragment1(navcontroller: NavController){ Column( modifier = Modifier .fillMaxSize() , horizontalAlignment =Alignment.CenterHorizontally, verticalArrangement =Arrangement.Center ){ Text(text = "This is fragment 1") Spacer(modifier = Modifier.height(30.dp)) Button(onClick = { navcontroller.navigate("fragment2") }) { Text(text = "Go to Fragment 2") } } } @Composable fun Fragment2(navcontroller: NavController){ Column( modifier = Modifier .fillMaxSize() , horizontalAlignment =Alignment.CenterHorizontally, verticalArrangement =Arrangement.Center ) { Text(text = "This is fragment 2") Spacer(modifier = Modifier.height(30.dp)) Button(onClick = { navcontroller.navigate("fragment3") }) { Text(text = "Go to Fragment 3") } } } @Composable fun Fragment3(navcontroller: NavController){ Column( modifier = Modifier .fillMaxSize() , horizontalAlignment =Alignment.CenterHorizontally, verticalArrangement =Arrangement.Center ) { Text(text = "This is fragment 3") Spacer(modifier = Modifier.height(30.dp)) Button(onClick = { navcontroller.navigate("fragment1") }) { Text(text = "Back to Fragment 1") } } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter