Title overlaps with view in custom toolbar Android

Question

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

Bastien

I couldn't see where do you set the toolBar title programmatically.. you just change its visibility when the SearchView changes its focus – Salsify

@Salsify in above code, there is a function actionBar() inside that I used supportActionBar?.title = "Toolbar". – Bastien

Got it.. Do you mean when you collapse the Toolbar the title overlaps with the the view? – Salsify

@Salsify the text is not setting in toolbar. When screen load it look like the above image. I didn't try to collapse because I got the issue this one first. – Bastien

Do you need something like this – Salsify

I added my expected output in question. please have a look. – Bastien

I think it's similar to the gif? the gif just doesnt have the parent arrow right? – Salsify

Yeah I think so – Bastien

The problem is that both the arrow and the title are part of the toolBar, and in this way AFAIK you can not having the searchView side by side to the arrow without that overlap. – Salsify

When I tried the gif; the arrow gone for some reason. – Salsify

So I need to use textview inside my toolbar in my xml. – Bastien

Probably yes as a last resort. .. wait also if someone can have some answer – Salsify

Ok no problem then. Do you use motion layout for animation? – Bastien

Still didn't dig much with motion layout. but this animation is from the coordinatorlayout itself – Salsify

Are you student or working professional ? – Bastien

You should be student all the time even become a professional .. probably professional in some aspect; but in others still learning ... never stop learning even when you are professional – Salsify

I have another idea for you but it could be painful; is to not using the default parent arrow. and use a customized one .. This should make exactly the behave you want... but you'd make you customize some stuff in the code. – Salsify

Yeah true your above line. – Bastien

The above makes more code. My supervisor will not allow that. – Bastien

@Salsify when you time can you see this issue – Bastien