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)
                }
            }

        }

Answer 2

add this line in your textView

android:layout_centerHorizontal = "true"

this will solve your problem

Answer 3

try removing android:layout_marginEnd="?android:attr/actionBarSize" and use alignParentLeft=true or layout_margenStart. hope it will work.

Answer 4

Modify your toolbar text margin to something smaller.

@+id/toolbar_text_view

  android:layout_marginEnd="?android:attr/actionBarSize"

To

 android:layout_marginEnd="5dp"

Answer 5

you must constraint 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.ui.zzzzActivity">
<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"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        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:textSize="@dimen/tulisan20sp"
            tools:text="Toolbar"
            android:textColor="@color/colorwhite"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <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:layout_marginTop="@dimen/dimen8dp"
            android:text="1425"
            android:textColor="@color/colorwhite"
            android:layout_marginEnd="@dimen/dimen40dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.Toolbar>

UPDATE if you want the number not visible in fragment you can set visible:invisible and text in always center:

you can set programatically:

textview.setVisible(View.INVISIBLE)

don't

textview.setVisible(View.GONE)

if you want set visible:

textview.setVisible(View.VISIBLE)

Answer 6

remove line from TextView:-

android:layout_marginEnd="?android:attr/actionBarSize"

Add this line in Relativelayout:-

android:layout_marginStart="?android:attr/actionBarSize"
android:layout_marginEnd="?android:attr/actionBarSize

hope it will work.