Search code examples
androidandroid-layoutandroid-toolbar

Back button changes toolbar layout


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>

enter image description here


Solution

  • 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:

    1. Toolbar Dynamic title (I have to update its text because it reads x of z where x and z are numbers.
    2. Close button on the right ( X )
    3. 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:

    1. 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.

    2. The X is added via a toolbar menu (as usual)

    3. 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:

    No Back Button

    With 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.