Develop Reference

Title overlaps with view in custom toolbar Android

Hey guys I am trying to set title in my custom toolbar. It's not working until I explicit through xml. I don't want to put a Textview in xml in toolbar. I tried this post and trying to set by code, it is not working.
consultation.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:focusable="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:backgroundTint="#FFC04A"
android:fitsSystemWindows="true"
android:gravity="bottom">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.SearchView
android:id="#+id/consultationSearchView"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/consultations_search_edit_text_rounded_corner"
android:fitsSystemWindows="true"
android:theme="#style/ConsultationsSearchViewTheme"
app:layout_collapseMode="pin" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleTextColor="#android:color/white" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I tried through code
ToolbarActivity.kt
class ToolbarActivity : AppCompatActivity() {
private lateinit var binding: ToolBarLayoutBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ToolBarLayoutBinding.inflate(layoutInflater)
setContentView(binding.root)
actionBar()
setupSearchView()
}
private fun actionBar() {
setSupportActionBar(binding.toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setDisplayShowTitleEnabled(true)
supportActionBar?.title = "Toolbar"
}
private fun setupSearchView() {
var originalMargin = 0
binding.consultationSearchView.apply {
setOnQueryTextListener(object : SearchView.OnQueryTextListener {
override fun onQueryTextSubmit(query: String?) = false
override fun onQueryTextChange(newText: String?): Boolean {
if (newText != null) {
}
return true
}
})
val params =
binding.consultationSearchView.layoutParams as CollapsingToolbarLayout.LayoutParams
originalMargin = params.marginStart
setOnQueryTextFocusChangeListener { view, hasFocus ->
binding.appBar.setExpanded(!hasFocus)
isSelected = hasFocus
if (hasFocus) {
params.marginStart = originalMargin + 150 // arbitrary constant
} else {
params.marginStart = originalMargin
}
view.layoutParams = params
}
}
}
}
It look like this
Note I don't want to use xml to set text view inside toolbar. I want to do it programmatically. Inside my github project I used xml text view.
Expected output
when screen opens i want like this arrow + title
when collapse it look like this

toolbar.setNavigationOnClickListener not working with AppBarLayout

Back button is not clickable. Tried this answer but it doesn't work.
override fun onCreate(savedInstanceState: Bundle?) {
val toolbar = findViewById<Toolbar>(R.id.toolbar)
toolbar.setNavigationIcon(R.drawable.ic_navbar_cancel)
setSupportActionBar(toolbar)
supportActionBar?.setDisplayShowHomeEnabled(true)
toolbar.setNavigationOnClickListener { Log.d("Test", "Clicked!") }
}
title_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar_layout"
style="?attr/appBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#id/toolbar"
style="?attr/toolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<TextView
android:id="#+id/toolbar_title"
style="?attr/toolBarTitleStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:fontFamily="#font/intro_bold_caps"
android:paddingStart="0dp"
android:paddingEnd="6dp" />
</androidx.appcompat.widget.Toolbar>
<View
android:id="#+id/toolbar_shadow_pre_lollipop"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#id/toolbar"
android:background="#drawable/toolbar_shadow_pre_lollipop" />
</com.google.android.material.appbar.AppBarLayout>
ic_navbar_cancel.xml
<path
android:fillColor="#003b5a"
android:pathData="M18,18 L30,30 M18,30 L30,18"
android:strokeColor="#003b5a"
android:strokeWidth="3"/>

Since you are using the setSupportActionBar() method use the ActionBar API:
override fun onOptionsItemSelected(item: MenuItem): Boolean {
if (item.itemId == android.R.id.home) {
Log.d("Test", "Clicked!")
}
return super.onOptionsItemSelected(item)
}

Fragment replaced in activity does not show setDisplayHomeAsUpEnabled arrow

In my activity I have one FrameLayout that needs to be swapped out with another fragment on button press. When the second fragment is pushed, the actionbar does not show the back arrow. However, pressing the back triangle does pop the second fragment and returns to the Main Fragment.
The initial Activity with the Main fragment
You can see that the second fragment is added, but the arrow is not present to take the user back. Even though in my NewCallFragment I have the line
activity?.actionBar?.setDisplayHomeAsUpEnabled(true)
What am I doing wrong?
My Activity
private const val TAG = "DashboardActivity"
class DashboardActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_dashboard)
if (savedInstanceState == null) {
supportFragmentManager.commit { add<MainFragment>(R.id.fragment_container, null, intent.extras) }
}
}
override fun onSaveInstanceState(outState: Bundle) {
super.onSaveInstanceState(outState)
outState.putCharSequence(TAG, title)
}
override fun onSupportNavigateUp(): Boolean {
if (supportFragmentManager.popBackStackImmediate()) {
return true
}
return super.onSupportNavigateUp()
}
class MainFragment : Fragment(R.layout.fragment_dashboard_main) {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
view.findViewById<Button>(R.id.btnNewCall).setOnClickListener {
onShowNewCall()
}
}
private fun onShowNewCall() {
activity?.supportFragmentManager?.commit {
replace<NewCallFragment>(R.id.fragment_container, null, null)
addToBackStack(null)
}
}
}
class NewCallFragment : Fragment(R.layout.fragment_new_call) {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
activity?.actionBar?.setDisplayHomeAsUpEnabled(true)
activity?.title = "My Second Fragment"
}
}
}
Activity Layout
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/dashboard_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" android:padding="#dimen/parent_padding"
tools:context=".activitiesx.DashboardActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Main Fragment Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnNewCall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:paddingTop="10sp"
android:paddingBottom="10sp"
android:text="#string/new_call"
app:icon="#drawable/ic_add" />
</RelativeLayout>
New Call Fragment Layout
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add new call"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to handle the back event in nested NavHostFragments?

I did take a look on the official website Nested Graph and searched related issues but have no luck on it.
When the nest graph and dynamic feature module comes up, I tried to combine "dynamic feature module", "Nested NavHostFragments" and "Nested Graph" into a separate module. But when I tried to handle the back button event, I have no idea on it.
I have the NavHostFragments in the "app" module and when the user navigation the account item on the bottom navigation view. It will prompt up a bottomsheetdialog, which contains a nested NavHostFragment and also its navigation graph. And those fragments are inside "account" module.
When I tried to navigation back by pressing back button in the account page, it does not get back the stacks inside the nested NavHostFragment. This setPrimaryNavigationFragment() function seems providing some clue for this issue but i have no luck on it.
That's the current behavior
MainActivity.kt (In "app" module)
class MainActivity : AppCompatActivity() {
private lateinit var toolbar: Toolbar
private lateinit var appBarConfiguration: AppBarConfiguration
private val navController: NavController by lazy {
findNavController(R.id.nav_host_fragment)
}
private val listener =
NavController.OnDestinationChangedListener { controller, destination, arguments ->
model.triggerDestination(destinationId = destination.id)
}
private val model: MainActivityViewModel by viewModels()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
val navView: BottomNavigationView = findViewById(R.id.nav_view)
appBarConfiguration = AppBarConfiguration(
setOf(
R.id.navigation_explore
)
)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
model.notificationPageSelect.observe(this, EventObserver {
when (it) {
R.id.navigation_explore -> updateAppBarBg(R.drawable.explore_appbar_bg_gradient)
R.id.navigation_notifications -> updateAppBarBg(R.drawable.notification_appbar_bg_gradient)
}
})
}
private fun updateAppBarBg(appBg: Int) {
toolbar.setBackgroundResource(appBg)
}
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.overflow_menu, menu)
return super.onCreateOptionsMenu(menu)
}
override fun onSupportNavigateUp(): Boolean {
return navController.navigateUp(appBarConfiguration)
}
override fun onResume() {
super.onResume()
navController.addOnDestinationChangedListener(listener)
}
override fun onPause() {
super.onPause()
navController.removeOnDestinationChangedListener(listener)
}
}
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"
android:id="#+id/container"
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="50dp"
android:background="#drawable/explore_appbar_bg_gradient"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.dynamicfeatures.fragment.DynamicNavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:labelVisibilityMode="labeled"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:menu="#menu/bottom_nav_menu"
app:layout_anchorGravity="bottom|right|end"
android:layout_gravity="bottom|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
AccountListDialogFragment.kt (in "account" module)
class AccountListDialogFragment : BottomSheetDialogFragment() {
private lateinit var viewModel: SettingsViewModel
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? = inflater.inflate(R.layout.fragment_account, container, false)
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
viewModel = ViewModelProvider(this).get(SettingsViewModel::class.java)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
setupFullExpand()
}
}
fragment_account.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: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:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/account" />
</androidx.constraintlayout.widget.ConstraintLayout>

TabLayout in fragment show empty white bar

Currently my application have a MainActivity with the toolbar and a framelayout used to display fragment.
Now I have a fragment with tablayout and viewpager. But the tablayout in this fragment shows an empty whitebar instead of the tab content. I am still able to swipe left and right to change viewpager content which is my other fragment but unable to view the tablayout.
So this is my fragment with tablayout and viewpager:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:fillViewport="true"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
class UploadPreviewFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.fragment_upload_preview, container, false)
val viewPager = view.findViewById<ViewPager>(R.id.view_pager)
val tabLayout = view.findViewById<TabLayout>(R.id.tab_layout)
val fragmentManager = UploadPagerAdapter(childFragmentManager)
viewPager.adapter = fragmentManager
tabLayout.setupWithViewPager(view_pager)
return view
}
}
My adapter calss:
class UploadPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
override fun getItem(position: Int): Fragment {
return when (position) {
0 -> {
UploadPdfFragment()
}
else -> {
UploadImagesFragment()
}
}
}
override fun getCount(): Int {
return 2
}
override fun getPageTitle(position: Int): CharSequence? {
return when (position) {
0 -> {
"Upload PDF"
}
else -> {
"Upload Images"
}
}
}
}
And Screenshot for the tablayout:
https://i.stack.imgur.com/9mFWU.png
EDIT
I have found the solution to my problem from https://developer.android.com/reference/android/support/design/widget/TabLayout. The problem cause by this is because the xml file, the tablayout should place inside the viewpager.
<LinearLayout
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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:background="#color/colorPrimary"
android:fillViewport="true"/>
</androidx.viewpager.widget.ViewPager>
</LinearLayout>

change ParentFragmentManager to childFargmentManager in Adapter definition