Bottom Navigation in Compose - android

I want to create BottomNavigation with two items. Screen for each item is build in Compose.
My LeadActivity layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"
tools:ignore="FragmentTagUsage" />
</FrameLayout>
NavigationGraph:
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_graph"
app:startDestination="#+id/home_fragment">
<fragment
android:id="#+id/home_fragment"
android:name="com.app.android.rate.home.ui.Home.HomeFragment"
android:label="Home" />
<fragment
android:id="#+id/profile_fragment"
android:name="com.app.android.rate.home.ui.profile.ProfileFragment"
android:label="Profile"></fragment>
</navigation>
LeadActivity:
class LeadActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
RateMeAppTheme {
ContentScreen()
}
}
}
companion object {
fun start(context: Context) =
Intent(context, LeadActivity::class.java).let(context::startActivity)
}
}
My Composable function:
#Composable
fun ContentScreen() {
val navController = rememberNavController()
val scaffoldState = rememberScaffoldState()
var currentScreen by remember { mutableStateOf(Screens.Home) }
val bottomBar: #Composable () -> Unit = {
if (currentScreen == Screens.Home) {
BottomBar(
navController = navController,
screens = screenList
)
}
}
Scaffold(
bottomBar = {
bottomBar()
},
scaffoldState = scaffoldState,
drawerContent = {},
drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
) { innerPadding ->
NavigationHost(navController = navController)
}
}
#Composable
fun BottomBar(
modifier: Modifier = Modifier,
screens: List<Screens>,
navController: NavController,
) {
BottomNavigation(modifier = modifier) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
screens.forEach { screen ->
BottomNavigationItem(
icon = { Icon(imageVector = screen.icon, contentDescription = screen.title) },
label = { Text(screen.title) },
selected = currentRoute == screen.title,
onClick = {
}
)
}
}
}
#Composable
fun NavigationHost(navController: NavController) {
val homeScreen = Screens.Home.title
NavHost(
navController = navController as NavHostController,
startDestination = homeScreen
) {
composable(homeScreen) {
navController.navigate(R.id.home_fragment)
}
composable(Screens.Profile.title) {
navController.navigate(R.id.profile_fragment)
}
}
}
Currently I get error:
Navigation action/destination com.app.android.rate:id/home_fragment cannot be found from the current destination Destination.
Should I find NavController in LeadActivity and pass it to #ContentScreen()?

You don't put navController.navigate() inside the composable function, you put a Composable view

Related

Kotlin: does not have a NavController set

I have just created new project in android studio (haven't change a single line yet, fully brand new) and by first run on emulator I'm getting following error:
java.lang.IllegalStateException: Activity com.my.app.MainActivity#138b31b does not have a NavController set on 2131230989
Code
Activity
class MainActivity : AppCompatActivity() {
private lateinit var appBarConfiguration: AppBarConfiguration
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
val fab: FloatingActionButton = findViewById(R.id.fab)
fab.setOnClickListener { view ->
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
val navView: NavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
appBarConfiguration = AppBarConfiguration(setOf(
R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow), drawerLayout)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
// Inflate the menu; this adds items to the action bar if it is present.
menuInflater.inflate(R.menu.main, menu)
return true
}
override fun onSupportNavigateUp(): Boolean {
val navController = findNavController(R.id.nav_host_fragment)
return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
}
main_content
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
PS: Error is pointed to: val navController = findNavController(R.id.nav_host_fragment)
Any idea?
I had the same issue a while back. It works everywhere except in onCreate. In onCreate I had to find it like so:
val navigationHost =
supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navigationHost.navController

Hide toolbar(inside appbar layout) in specific fragment

I am using Navigation Component. I have Toolbar inside AppBarLayout but I have to hide toolbar in a specific fragment. For this purpose I have used onDestinationChanged from Navigation component to listen route and hide but toolbar never hides.
override fun onDestinationChanged(
controller: NavController, destination: NavDestination,
arguments: Bundle?
) {
if (destination.id == R.id.helpFragment) {
Timber.e("App Bar Hide")
binding.appBarLayout.setExpanded(false, true) //This never hides toolbar
} else {
Timber.e("App Bar Show")
binding.appBarLayout.setExpanded(true, true)
}
}
Here is my layout
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:elevation="0dp">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/home" />
</com.google.android.material.appbar.AppBarLayout>
val navHostFragment: NavHostFragment =
supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController: NavController = navHostFragment.navController
val appBarConfiguration: AppBarConfiguration = AppBarConfiguration(navController.graph)
binding.toolbar.setupWithNavController(navController, appBarConfiguration)
setSupportActionBar(binding.toolbar)
navController.addOnDestinationChangedListener { _, destination, _ ->
when (destination.id) {
R.id.salesFragment -> {
supportActionBar?.hide() // to hide
} else -> {
supportActionBar?.show() // to show
}
}
}

Android navigation onNavigationItemSelected not called

I have this DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/stock_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/stock_app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_stock_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/stock_nav_header"
app:menu="#menu/stock_activity_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
and then in the activity I have the following onCreate function:
class StockMainActivity: AppCompatActivity() {
private lateinit var appBarConfiguration: AppBarConfiguration
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_stock_main)
val toolbar: Toolbar = findViewById(R.id.stock_toolbar)
setSupportActionBar(toolbar)
val drawerLayout: DrawerLayout = findViewById(R.id.stock_drawer_layout)
val navView: NavigationView = findViewById(R.id.nav_stock_view)
navView.bringToFront()
navView.setNavigationItemSelectedListener { item ->
if (item.itemId == R.id.nav_stock_home) {
finish()
}
true
}
val navController = findNavController(R.id.nav_stock_host_fragment)
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
appBarConfiguration = AppBarConfiguration(setOf(
R.id.nav_stock_home,
R.id.stock_navigation_fragment
), drawerLayout)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
}
override fun onSupportNavigateUp(): Boolean {
val navController = findNavController(R.id.nav_stock_host_fragment)
return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
}
But the navigation selected item listener is never called. It eventually navigates to the destination, but the listener is never called. I have checked similar posts, some suggesting to bring to the front the Navigation View, but to no avail. Please help ...
Ok, I have found the solution. I have put:
navView.bringToFront()
navView.setNavigationItemSelectedListener { item ->
if (item.itemId == R.id.nav_stock_home) {
finish()
}
true
}
At the end of onCreate... and it works now.

onNavigationItemSelected not calling when item is selected

I am adding footer-view in navigation drawer using following code -
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nv_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start">
<androidx.core.widget.NestedScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/nav_header_main"/>
<com.google.android.material.navigation.NavigationView
android:id="#+id/drawer_menu_body"
app:elevation="0dp"
android:layout_height="0dp"
android:layout_width="wrap_content"
android:layout_weight="1"
app:menu="#menu/activity_main_drawer">
</com.google.android.material.navigation.NavigationView>
<include layout="#layout/navigation_drawer_bottom_view"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
But now onNavigationItemSelected() is not calling also navigation drawer keeps open until we slide it manually. I am using navigation-component and nav graph.
This is my activity code -
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
val navController = findNavController(R.id.nav_host_fragment)
drawer_menu_body.setNavigationItemSelectedListener(this)
nv_top.setNavigationItemSelectedListener(this)
appBarConfiguration = AppBarConfiguration(
setOf(
R.id.nav_home,
R.id.nav_gallery,
R.id.nav_slideshow,
R.id.nav_tools,
R.id.nav_share,
R.id.nav_send
), drawer_layout)
setupActionBarWithNavController(navController, appBarConfiguration)
drawer_menu_body.setupWithNavController(navController)
nv_top.setupWithNavController(navController)
}
override fun onNavigationItemSelected(menu: MenuItem): Boolean {
Log.d("testing_navigation","testing_navigation")
drawer_layout.closeDrawer(GravityCompat.START)
return true
}
You attach setNavigationItemSelectedListener with NavigationView which will override during default configuration of setupWithNavController. So attach your listener after configuring default settings. Check below code.
nv_top.setupWithNavController(navController)
drawer_menu_body.setNavigationItemSelectedListener(this)
Update: To work with default navigation you have to handle like below:
override fun onNavigationItemSelected(menu: MenuItem): Boolean {
val handled = NavigationUI.onNavDestinationSelected(menu, navController)
if (!handled) {
// handle other navigation other than default
}
drawer_layout.closeDrawer(GravityCompat.START)
return handled
}
Dear this worked for me the item R.id.nav_logout i needed finish activity and not instance a fragment:
private lateinit var appBarConfiguration: AppBarConfiguration
var drawerLayout: DrawerLayout? = null
var navView: NavigationView? = null
var navController: NavController? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_customer_main)
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
val fab: FloatingActionButton = findViewById(R.id.fab)
fab.setOnClickListener { view ->
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
drawerLayout = findViewById(R.id.drawer_layout)
navView = findViewById(R.id.nav_view)
navController = findNavController(R.id.nav_host_fragment)
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
appBarConfiguration = AppBarConfiguration(setOf(
R.id.nav_home, R.id.nav_service_requests), drawerLayout)
setupActionBarWithNavController(navController!!, appBarConfiguration)
navView!!.setupWithNavController(navController!!)
navView!!.setNavigationItemSelectedListener(this)
}
override fun onSupportNavigateUp(): Boolean {
val navController = findNavController(R.id.nav_host_fragment)
return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
override fun onNavigationItemSelected(menuItem: MenuItem): Boolean {
menuItem.isChecked = true
drawerLayout!!.closeDrawers()
when (menuItem.itemId) {
R.id.nav_logout -> {
Prefs.putBoolean("flagLogin", false)
val intent = Intent(this#CustomerMainActivity, LoginActivity::class.java)
startActivity(intent)
finish()
return true
}
}
if( navController!!.currentDestination!!.id != menuItem.itemId)
navController!!.navigate(menuItem.itemId)
return true
}

How to make RTL appBarConfiguration androidx.navigation?

I want make RTL appBarConfiguration. and this is my code for MainActivity. is there any way that help me to do this without use custom toolbar or make some custom things?
I search and found this is android document : [navigation-ui][1]
but I look for something simple like layout direction if something like this is it available
MainActivity class:
private lateinit var drawerLayout: DrawerLayout
private lateinit var appBarConfiguration: AppBarConfiguration
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding =
DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
drawerLayout = binding.drawerLayout
val navController = this.findNavController(R.id.navHostFragment)
appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
navController.addOnDestinationChangedListener { nc: NavController, nd: NavDestination, _: Bundle? ->
if (nd.id == nc.graph.startDestination) {
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
} else {
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
}
}
NavigationUI.setupWithNavController(binding.navView, navController)
}
override fun onSupportNavigateUp(): Boolean {
val navigationController = findNavController(R.id.navHostFragment)
return navigationController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
return super.onBackPressed()
}
}
}
and here activity_main.xml:
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
</data>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
tools:openDrawer="start"
tools:context=".MainActivity">
<fragment
android:id="#+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/navigation"/>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/fragment_cart"
/>
</androidx.drawerlayout.widget.DrawerLayout>
</layout>```
[![now it's look like this:][2]][2]
I wanna hamberger menu place in right and that three icon place in left
[1]: https://developer.android.com/guide/navigation/navigation-ui#kotlin
[2]: https://i.stack.imgur.com/eOur8.png
I can fix it by adding this section in activity_main.xml and MainActivity.kt
activity_main.xml
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
</data>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
tools:openDrawer="start"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />
<fragment
android:id="#+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/navigation"/>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/fragment_cart"
/>
</androidx.drawerlayout.widget.DrawerLayout>
</layout> ```
MainActivity.kt:
``` class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
private lateinit var appBarConfiguration: AppBarConfiguration
private lateinit var toolbar: androidx.appcompat.widget.Toolbar
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding =
DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
drawerLayout = binding.drawerLayout
toolbar = binding.toolbar
setSupportActionBar(toolbar)
//supportActionBar?.setDisplayHomeAsUpEnabled(true)
//supportActionBar?.setDisplayShowHomeEnabled(true)
val navController = this.findNavController(R.id.navHostFragment)
appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
navController.addOnDestinationChangedListener { nc: NavController, nd: NavDestination, _: Bundle? ->
if (nd.id == nc.graph.startDestination) {
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
} else {
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
}
}
NavigationUI.setupWithNavController(binding.navView, navController)
}
override fun onSupportNavigateUp(): Boolean {
val navigationController = findNavController(R.id.navHostFragment)
return navigationController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
override fun onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
return super.onBackPressed()
}
}
} ```
I hope this help someone.

Categories

Resources