Back button changes toolbar layout

Question

This is my Custom Toolbar Layout:

<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/white"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:layout_height="?attr/actionBarSize"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:contentInsetStartWithNavigation="0dp"
    app:contentInsetStart="0dp"
        app:layout_collapseMode="pin">


    <ImageView
        android:layout_width="217dp"
        android:layout_gravity="center"
        android:layout_centerInParent="true"
        android:layout_height="match_parent"
        android:src="@drawable/toll_photo" />


</android.support.v7.widget.Toolbar>

When I add the back button it changes the toolbar layout it moves it to the left!Help would be appreciated!

I include the toolbar on every activity I need it like this <include layout="@layout/toolbar_layout"/> and on each activity I simply <include layout="@layout/toolbar_layout"/>

toolbar= findViewById(R.id.toolbar);
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.back));
setSupportActionBar(toolbar);

Update this is my style.xml

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/white</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

</style>

By back button you probably think of Up button? https://developer.android.com/design/patterns/navigation.html — Gotiasits, Apr 20 '18 at 16:07
@Gotiasits `toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.back));` — ora, Apr 20 '18 at 16:09
`R.drawable.back` is just the arbitrary name of the graphics, it doesn't say anything about its functionality... — Gotiasits, Apr 20 '18 at 16:12
@Gotiasits you have no idea why it changes my layout why are you commenting? — ora, Apr 20 '18 at 16:13
I'm trying to get additional info, since your question is not clear enough. — Gotiasits, Apr 20 '18 at 16:15
@Gotiasits you criticised me twice you didn't request anything — ora, Apr 20 '18 at 16:24
How exactly is that `Toolbar` incorporated into your layout? Also, which part are you talking about when you say "moves it to the left"? — Mike M., Apr 20 '18 at 16:30
Which part moves to the left? Are you saying that your back button isn't where you expect it to be? — Mike M., Apr 20 '18 at 16:41
the image is supposed to be centered,and it is in my main activity where there is no back button,when I add it in other fragments it moves to the left @MikeM. — ora, Apr 20 '18 at 16:44
Oh, you mean the image is shifted to the _right_? It's the default title, which you can't see, because it's the same white color as you've set as the `Toolbar`'s background. Call `getSupportActionBar().setDisplayShowTitleEnabled(false);` after the `setSupportActionBar()` call. — Mike M., Apr 20 '18 at 16:55
@MikeM. I am having struggle with this question ,do you mind giving an opinion?https://stackoverflow.com/q/49958847/9635446 — ora, Apr 21 '18 at 18:50

score 0 · Accepted Answer · answered Apr 20 '18 at 16:48

I’ve had the same problem, and despite using the various insets and navigation insets, the result was still not perfect.

I solved it in a hacky way, but it works fine and it allowed me to move onto more interesting projects.

My Requirements:

Toolbar Dynamic title (I have to update its text because it reads x of z where x and z are numbers.
Close button on the right ( X )
Back Button on some screens.

With those requirements I set up my layout to something like this:

<?xml version="1.0" encoding="utf-8"?>
<merge 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=".MyActivity"
    tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="?android:actionBarSize"
        android:elevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/toolbar_title"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="@string/app_name"
        android:textColor="@color/colorPrimary"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="@id/toolbar"
        app:layout_constraintEnd_toEndOf="@id/toolbar"
        app:layout_constraintStart_toStartOf="@id/toolbar"
        app:layout_constraintTop_toTopOf="@id/toolbar" />

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />
</merge>

So, for:

Now I have a toolbar_title textview that I can touch and won’t move regardless of what I do with the toolbar, but will be on top of it, centered.
The X is added via a toolbar menu (as usual)
The back button, when shown, doesn’t alter the Toolbar, since the text view is flatten on the hierarchy and not controlled by it.

Without back button:

With back button:

Notice text stays where I want.

p.s.: I’ve tried to use content inside the toolbar (like you have) and I have been unable to avoid at least a few pixels of wiggle when I add/remove icons. LAME.

does the merge do this trick so for my layout it would be smth like ` ` — ora, Apr 20 '18 at 16:53
Oh sorry, it depends. I have a merge because I am inflating that layout into another (a matter for another post) but you can replace all the merge with a `ConstraintLayout` (which I have on latest stable version 1.1.0) — Martin Marconcini, Apr 20 '18 at 16:56
I understand you point ,you are saying that a constraint layout can do the fix? — ora, Apr 20 '18 at 16:57
What I am saying is that ConstraintLayout, when used that way, gives you a flat hierarchy that allows you to pin a textview exactly centered on your toolbar. It will not move, will correctly grow/shrink horizontally to accommodate for new text and will follow your toolbar around (which, incidentally never moves, so nothing to worry). The only thing to keep in mind is that the text is constrained to the edges of the toolbar (start/end) so there is no natural protection from the text to overlap. There are simple solutions to that if it’s a problem (not for me, since my txt is short). — Martin Marconcini, Apr 20 '18 at 17:00
A simple solution, is, if icons on the start/end of the text are known, you can add a margin or padding to the textview so it always smaller than the toolbar (since icon sizes are known). — Martin Marconcini, Apr 20 '18 at 17:01
If you replace _my_ TextView with your imageView, you can make it work. — Martin Marconcini, Apr 20 '18 at 17:02
true,i worked with just adding a `getSupportActionBar().setDisplayShowTitleEnabled(false);` — ora, Apr 20 '18 at 17:02

Back button changes toolbar layout

1 Answers1