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

@GiddyNaya actually it wiil detached when hamberger button or back button is shown — Aminul Haque Aome, Oct 30 '19 at 06:23

score 1 · Accepted Answer · answered Oct 31 '19 at 05:55

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

        }

Arslan Yasin · Answer 2 · 2019-10-30T07:35:23.697

0

add this line in your textView

android:layout_centerHorizontal = "true"

this will solve your problem

edited Oct 30 '19 at 07:35

answered Oct 30 '19 at 05:28

Arslan Yasin

61
3

score 0 · Answer 3 · answered Oct 30 '19 at 05:29

0

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

answered Oct 30 '19 at 05:29

Kuldeep Rathee

282
2
7

Giddy Naya · Answer 4 · 2019-10-30T05:38:08.697

0

Modify your toolbar text margin to something smaller.

@+id/toolbar_text_view

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

To

 android:layout_marginEnd="5dp"

edited Oct 30 '19 at 05:38

answered Oct 30 '19 at 05:33

Giddy Naya

4,237
2
17
30

if I do so, toolbar text will not place in center when navigation back button is shown – Aminul Haque Aome Oct 30 '19 at 05:52

Steven Wiaji · Answer 5 · 2019-10-31T02:00:45.530

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)

If I use Constraint Layout, its easy to centralized one textView. But when I navigate to another fragment, number textView must be hidden in my app. Then without the number textView it does not seem in center. That's the actual problem — Aminul Haque Aome, Oct 30 '19 at 10:32
your setvisible(View.Invisible). not setvisible(View.Gone). if you set Gone, the view is gone. but if you set invisible, the view not gone and not visible. may be you can try when textview is hidden — Steven Wiaji, Oct 31 '19 at 01:53
Thanks a lot for your effort. But I also tried that. It will make other toolbar text center except the one with number text View :( — Aminul Haque Aome, Oct 31 '19 at 04:02

score 0 · Answer 6 · answered Oct 30 '19 at 06:38

0

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.

answered Oct 30 '19 at 06:38

Jahanvi Kariya

377
3
14

It also failed to fulfill my expected result :( – Aminul Haque Aome Oct 30 '19 at 10:32

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

6 Answers6