Toolbar switches to right side when navigationIcon is shown

Question

This is my custom toolbar:

toolbar_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 
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:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppNavigationButtonToolbar"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:popupTheme="@style/AppNavigationButtonToolbar">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/ic_toolbar"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/dimen_28"
                android:layout_gravity="center"
                android:layout_margin="@dimen/dimen_8"
                android:src="@drawable/ic_chat_black"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/separator"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/greenLight"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.appcompat.widget.Toolbar>

where

<style name="AppNavigationButtonToolbar" parent="@style/Widget.AppCompat.Toolbar">
        <item name="android:minWidth">0dp</item>
        <item name="android:scaleType">centerInside</item>
        <item name="titleMargin">0dp</item>
        <item name="contentInsetStartWithNavigation">0dp</item>
</style>

and ToolbarCustomView

internal class ToolbarCustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : Toolbar(context, attrs, defStyleAttr) {

    init {
        inflate(context, R.layout.toolbar_custom, this)
    }

Using android components, the MainActivity.kt is:

...
<oncreate>
        setSupportActionBar(toolbar_main)
//...
 val appBarConfiguration = AppBarConfiguration(navigationController.graph)
        toolbar_main.setupWithNavController(navigationController, appBarConfiguration)

with the following layout:

<?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"
    android:orientation="vertical">

    <com....ToolbarCustomView
        android:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentInsetStartWithNavigation="0dp"
        app:contentInsetStart="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <fragment
        android:id="@+id/fragment_container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar_main"
        app:navGraph="@navigation/bottom_nav" />

    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Problem: When back button is shown by navigation graph, this is the result:

Any idea of how can to avoid that toolbar switches to the right side?

create a `custom layout` for toolbar instead ...it will be easier to handle. — Santanu Sur, Aug 01 '19 at 17:44
Maybe it's not clear but I updated the question with custom toolbar @SantanuSur — rafaelasguerra, Aug 01 '19 at 17:51
Thats a **`subclass`** of toolbar. *Create* your own toolbar instead. You can use a `imageView` for navigation icon instead. The navigationicon for toolbar takes some default space. — Santanu Sur, Aug 01 '19 at 17:53
but if I use a icon instead, I can't use directly toolbar_main.setupWithNavController right? — rafaelasguerra, Aug 01 '19 at 18:00
Exactly. If I put my own toolbar I can't manage the back button from navigation components — rafaelasguerra, Aug 01 '19 at 21:07
Firstly, you're ending up with two `Toolbar`s. Your `ToolbarCustomView` class is itself a `Toolbar`, and the second one is nested inside it, inflated from the layout XML. The root tags in that layout should be `` tags, so the children are added directly into your `ToolbarCustomView`. Even after fixing that, though, it'll still shift when the nav button shows, because that button takes precedence, and your children are laid out in the remaining space. Removing the `ConstraintLayout` will allow the `ImageView` to line up correctly, since `Toolbar` will respect its center `layout_gravity`. — Mike M., Aug 02 '19 at 01:31
That leaves just the underline, and, really, since you're already subclassing here, the easiest thing would probably be to just override `onDraw()` too, and draw that line yourself, after the `super.onDraw()` call. You could even create an XML drawable for it, which you could load in the constructor, adjust the bounds for it in `onSizeChanged()`, and `draw()` it to the `Canvas` passed into `onDraw()`. I can't test that right now, but I'm pretty sure that should line everything up properly. — Mike M., Aug 02 '19 at 01:31
thanks @MikeM. I found a solution based on what u said. I'm gonna post it — rafaelasguerra, Aug 02 '19 at 12:31

score 0 · Accepted Answer · answered Aug 02 '19 at 12:39

Solution: I create a background with the green line in the bottom and I set it on my toolbar:

internal class ToolbarCustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = R.attr.toolbarStyle
) : Toolbar(context, attrs, defStyleAttr) {

    init {
        inflate(context, R.layout.toolbar_main, this)
        setBackgroundResource(R.drawable.toolbar_background)
    }
}

toolbar_custom.xml changed to:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

         <ImageView
           android:id="@+id/ic_toolbar"
           android:layout_width="wrap_content"
           android:layout_height="@dimen/dimen_28"
           android:layout_margin="@dimen/dimen_8"
           android:src="@drawable/ic_chat_black"
           android:layout_centerHorizontal="true"/>
</merge>

And to solve the "bottom line" gap I applied the same background to the navigationIcon (back button)

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
    <...>
    <item name="toolbarNavigationButtonStyle">@style/AppTheme.NavigationButtonStyle</item>
 </style>

 <style name="AppTheme.NavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar">
    <item name="android:scaleType">centerInside</item>
    <item name="android:background">@drawable/toolbar_background</item>
 </style>

Toolbar switches to right side when navigationIcon is shown

1 Answers1