Develop Reference

Android multi-fragment navigation

I have two different layout for portrait:
<?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"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
and landscape orientation:
<?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"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/container_channel"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/container_messages"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/container_messages"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/container_channel"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I have androidx.navigation:navigation-fragment-ktx:2.4.1 and my app perfectly change fragment in portrait orientation.
I would like to click on the button in the first fragment and change the state in the second
I got something like this:
if (resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
supportFragmentManager.beginTransaction()
.replace(R.id.container_channel, ChannelsFragment())
.replace(R.id.container_messages, MessagesFragment())
.commit()
} else {
val navHostFragment =
supportFragmentManager.findFragmentById(R.id.container) as NavHostFragment
navController = navHostFragment.navController
}
Is it possible to make different navigation using this library for different orientations?
Is it possible to manage navigation from first fragment in second one using navigation lib?

FAB doesn't hide fully in Fragment with collapsing medium app bar

Within my acitivity_main.xml I have a BottomNavigationView and a collapsing top app bar and a fragment. Inside the fragment, there is a recyclerview and a FAB. My collapsing medium app bar seems to work, but the FAB doesn't hide fully. Hiding seems to work, but it shows a bit behind the bottom navigation bar. What am I doing wrong?
I've added a screenshot link below to show what it looks like. You can see there that when hovering over the fragment it shows its bottom border slightly above the bottom of the screen. Not sure why. It seems that if the fragment would expand til the bottom of the screen, the FAB would hide perfectly.
activity_main.xml
<?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"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/toolbarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbarCollapsingToolbarLayout"
style="?attr/collapsingToolbarLayoutMediumStyle"
android:layout_width="match_parent"
android:layout_height="?attr/collapsingToolbarLayoutMediumSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snapMargins"
>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbarMainActivity"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
tools:title="#string/mainActivityTitle"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:layout_margin="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:defaultNavHost="true"
app:navGraph="#navigation/bottom_navigation"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_menu"
android:layout_gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent"/
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_expenses.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clExpensesFragment"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/md_theme_light_background"
tools:context=".ui.expenses.ExpensesFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clExpensesViewFilterAndTotal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:paddingVertical="10dp"
android:elevation="0dp"
android:background="#drawable/expenses_fragment_top_linearlayout"
android:gravity="center_vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!--Contains some text views places horizontally here-->
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvParentExpenseDates"
android:layout_width="match_parent"
android:layout_height="0dp"
android:paddingHorizontal="10dp"
tools:listitem="#layout/list_item_parent_expenses_recyclerview"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="#id/clExpensesViewFilterAndTotal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:visibility="gone"
tools:visibility="visible"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btnFabAddExpense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="0.9"
android:scaleY="0.9"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/ic_fab_add"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity OnCreate()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars = true
WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightStatusBars = true
// Setting up the binding object
_binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
setSupportActionBar(binding.toolbarMainActivity)
val bottomNavigationView = binding.bottomNavigationView
val navHostFragment =supportFragmentManager.findFragmentById(R.id.fragmentContainerView) as NavHostFragment
val navController = navHostFragment.navController
val appBarConfiguration = AppBarConfiguration(setOf(
R.id.expensesFragment, R.id.statsFragment, R.id.settingsFragment
))
setupActionBarWithNavController(navController, appBarConfiguration)
bottomNavigationView.setupWithNavController(navController)
val color = SurfaceColors.SURFACE_2.getColor(this)
window.statusBarColor = color
window.navigationBarColor = color
binding.toolbarMainActivity.setBackgroundColor(color)
binding.toolbarCollapsingToolbarLayout.setBackgroundColor(color)
}```
[ScreenShot of activity_main.xml][1]
[1]: https://i.stack.imgur.com/2D3kT.jpg

Fragment not switching using FragmentContainerView

I simply want to use bottomNavigation with Navigation Component. I tried multiple ways but fragment not switching . Only BottomNavigation display's
I have a running sample that uses fragment instead of FragmentContainerView. But I don't know why it's too complex to use the latest techtiques
DashboardActivity
#AndroidEntryPoint
class DashboardActivity : PBActivity(R.layout.activity_dashboard) {
val binding: ActivityDashboardBinding by viewbind()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val appBarConfiguration: AppBarConfiguration = AppBarConfiguration.Builder(
R.id.rankingFragment, R.id.homeFragment, R.id.profileFragment
).build()
setSupportActionBar(binding.toolbar)
val navHostFragment =
supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
/*val navView = findViewById<BottomNavigationView>(R.id.bottom_nav)
NavigationUI.setupWithNavController(navView,navController)*/
///binding.navigationBb.setupWithNavController(navController)
///binding.toolbar.setupWithNavController(navController,null)
//binding.navHostFragment.s
binding.toolbar.setupWithNavController(navController,appBarConfiguration)
///binding.bottomNav.setupWithNavController(navController)
NavigationUI.setupWithNavController(binding.bottomNav, navController)
///NavigationUI.setupWithNavController(binding.bottomNav,navController)
}
}
activity_dashboard.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.appcompat.widget.Toolbar>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
app:menu="#menu/dashboard_nav_menu"
android:background="?android:attr/windowBackground"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
nav_graph.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/nav_graph"
app:startDestination="#id/homeFragment">
<fragment
android:id="#+id/homeFragment"
tools:layout="#layout/fragment_home"
android:name="uk.co.planetbeyond.game_show_app.presentation.ui.main.fragments.HomeFragment"
android:label="HomeFragment" />
<fragment
android:id="#+id/rankingFragment"
tools:layout="#layout/fragment_ranking"
android:name="uk.co.planetbeyond.game_show_app.presentation.ui.main.fragments.RankingFragment"
android:label="RankingFragment" />
<fragment
android:id="#+id/profileFragment"
tools:layout="#layout/fragment_profile"
android:name="uk.co.planetbeyond.game_show_app.presentation.ui.main.fragments.ProfileFragment"
android:label="ProfileFragment" />
</navigation>
dashboard_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/rankingFragment"
android:icon="#drawable/rankings_button_selected"
android:title="Ranking" />
<item
android:id="#+id/homeFragment"
android:icon="#drawable/home_button_selected"
android:title="#string/title_home" />
<item
android:id="#+id/profileFragment"
android:icon="#drawable/profile_icon_selected"
android:title="Profile" />
</menu>

The problem is not in the navigation components, your code looks fine regarding it; but that your main layout has a 0 size:
You need to set the root layout to match parent:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
Side note: the fragments will draw behind the toolbar as it constraints to the parent top edge; The same for the bottom part.
To fix this constraint it to the toolbar:
In the FragmentContainerView Replace:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
With:
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintBottom_toTopOf="#+id/bottom_nav"

how to keep centered icon & label BottomNavigationView in android

I am using bottom BottomNavigationView in andoid. But When is used labeled visible ,between icon & label grap is big. Besides icon is bit top. How to adjust it
Here is my image
Here is my xml:
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="#dimen/bottom_nav_height_base"
android:layout_alignParentBottom="true"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:itemIconSize="#dimen/bottom_navigation_icon_size_base"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
<fragment
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_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is my Activity:
val navController = findNavController(R.id.nav_host_fragment)
val appBarConfiguration = AppBarConfiguration(
setOf(
R.id.navigation_home,
R.id.navigation_notifications,
R.id.navigation_account,
R.id.navigation_settings
)
)
val bottomNavigationView: BottomNavigationView = findViewById(R.id.nav_view)
setupActionBarWithNavController(navController, appBarConfiguration)
bottomNavigationView.setupWithNavController(navController)
bottomNavigationView.setItemIconTintList(null);
bottomNavigationView.setOnNavigationItemSelectedListener(this)
Can you help BottomNavigationView icon & label centered ? or suggest me to customize the BottomNavigationView

Instead of:
android:layout_height="#dimen/bottom_nav_height_base"
Try:
android:layout_height="wrap_content"

Gap between Actionbar and statusbar, non translucent

I got a gap between the statusbar and actionbar and just can't get it to go away. I have played with android:fitsSystemWindows and below you see to examples of it. I am using supportActionBar by using AppCompatActivity. It is setup with Navigation components:
val navController = navController()
val appBarConfiguration = AppBarConfiguration(setOf(R.id.navigation_onboarding, R.id.projectsFragment, R.id.navigation_menu))
setupActionBarWithNavController(navController, appBarConfiguration)
The fragment shown is just plain with a Constaintlayout without any android:fitsSystemWindows attributes.
Any clue to how to get rid of this gap?
Screenshot 1: - - - - - - - - - - - - - - - - - - - - - - - Screenshot 2:
Main activity layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:fitsSystemWindows="true" <!--Screenshot 1-->
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/navigationHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:fitsSystemWindows="true" <!--Screenshot 2-->
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bottomNavigationView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
android:visibility="gone"
app:itemIconTint="#color/bottom_navigation"
app:labelVisibilityMode="unlabeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Theme:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
...
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">false</item>
</style>

We ended up solving it by adding a custom Toolbar and have translucent status bar enabled:
toolbar.adjustHeightUnderStatusBar(this)
setSupportActionBar(toolbar)
With this view layout
<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:id="#+id/container"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/grey"
android:elevation="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title=""
app:titleTextColor="#color/darkBlue"
tools:ignore="HardcodedText" />
<fragment
android:id="#+id/navigationHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bottomNavigationView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:navGraph="#navigation/navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
android:visibility="gone"
app:itemIconTint="#color/bottom_navigation"
app:labelVisibilityMode="unlabeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
adjustHeightUnderStatusBar function:
fun Toolbar.adjustHeightUnderStatusBar(activity: BaseActivity) {
val statusBarHeight = 24.px
var actionBarHeight = 48.px
val value = TypedValue()
if (activity.theme.resolveAttribute(android.R.attr.actionBarSize, value, true)) {
actionBarHeight = TypedValue.complexToDimensionPixelSize(value.data, resources.displayMetrics)
}
val layoutParams = layoutParams as ConstraintLayout.LayoutParams
layoutParams.height = actionBarHeight + statusBarHeight
this.layoutParams = layoutParams
setTopPadding(statusBarHeight)
}