Custom Toolbar side textView which is in the end of Toolbar title got detached when back button or hamberger Button is enable

Question

<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.ActionBar">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center">

                <TextView
                    android:id="@+id/toolbar_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="?android:attr/actionBarSize"
                    android:fontFamily="@font/inter_semi_bold"
                    android:textColor="@color/layout_main_text_color"
                    android:textSize="@dimen/_20ssp"
                    tools:text="Toolbar" />

                <TextView
                    android:id="@+id/total_job_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toEndOf="@+id/toolbar_text_view"
                    android:background="@drawable/rectangle_blue_gradient_with_thirty_radius"
                    android:paddingLeft="@dimen/_7sdp"
                    android:paddingTop="@dimen/_1sdp"
                    android:paddingRight="@dimen/_7sdp"
                    android:paddingBottom="@dimen/_1sdp"
                    android:text="1425"
                    android:textColor="@color/white"
                    android:textSize="@dimen/_7ssp" />

            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>

In this project, I use Navigation Component. I want to show the number in blue border beside the "Job Board". I took a look at this solution. Toolbar title not in center when Back Button is enable .That solution abled to solve the problem of centering the toolbar text to center but not the Number. I want this type of output

Answer 1

Finally I solved the problem. The main culprit was contentinsetstart which take 72 dp as padding in the beginning of Toolbar which size is 72 dp. so what I did, I just gave a negative 72 margin in toolbarTextView. And everything is running as expected :)

<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.ActionBar">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center">

                <TextView
                    android:id="@+id/toolbar_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="-72dp"
                    android:fontFamily="@font/inter_semi_bold"
                    android:textColor="@color/layout_main_text_color"
                    android:textSize="@dimen/_20ssp"
                    tools:text="Toolbar" />

                <TextView
                    android:id="@+id/total_job_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toEndOf="@+id/toolbar_text_view"
                    android:background="@drawable/rectangle_blue_gradient_with_thirty_radius"
                    android:paddingLeft="@dimen/_7sdp"
                    android:paddingTop="@dimen/_1sdp"
                    android:paddingRight="@dimen/_7sdp"
                    android:paddingBottom="@dimen/_1sdp"
                    android:text="1425"
                    android:textColor="@color/white"
                    android:textSize="@dimen/_7ssp"
                    android:visibility="invisible" />

            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>

and destinationChangeListener looks exactly like

navController.addOnDestinationChangedListener { _, destination, _ ->
            if (destination.id != R.id.tutorHomeFragment) {
                total_job_text_view.visibilityGone()
            }

            with(toolbar_text_view) {
                when(destination.id) {
                    R.id.tutorHomeFragment -> text = getString(R.string.job_board)
                    R.id.tutorProfileFragment -> text = getString(R.string.profile)
                    R.id.tutorStatusFragment -> text = getString(R.string.status)
                    R.id.tutorSettingFragment -> text = getString(R.string.settings)
                    R.id.tutorMessageFragment -> text = getString(R.string.message)
                    R.id.confirmationLetterFragment -> text = getString(R.string.confirmation_letter)
                    R.id.paymentFragment -> text = getString(R.string.payment)
                }
            }

        }