Search code examples
toolbarandroid-coordinatorlayoutandroid-constraintlayout

ConstraintLayout takes extra space around it when it is included inside Toolbar (android.support.v7.widget.Toolbar) widget


Today I'm facing an unexpected problem. When trying to use ConstraintLayout inside a Toolbar(android.support.v7.widget.Toolbar) widget , it's takeing extra space around it for nothing.And when I use it (ConstraintLayout with same xml code) inside anther layout like LeanearLayout it works fine (It does not take any space unexpectedly around it).

my_inside_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content"
    android:background="#f90511"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="81dp">


    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:background="#000"
        android:text="Button"
        android:textColor="#fff"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button5"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:background="#0b8653"
        android:text="Button"
        android:textColor="#fff"
        app:layout_constraintLeft_toRightOf="@+id/button4"
        app:layout_constraintRight_toLeftOf="@+id/button6"
        app:layout_constraintTop_toTopOf="@+id/button4" />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:background="#000"
        android:text="Button"
        android:textColor="#fff"
        app:layout_constraintLeft_toRightOf="@+id/button5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button5" />
</android.support.constraint.ConstraintLayout>

design view for the above xml below:

ConstraintLayout desing mode picture

When I include this xml inside my_toolbar.xml problems arises.

Here is my_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f5e903">

    <include
        android:id="@+id/la"
        layout="@layout/my_inside_toolbar.xml" />

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

Design view for the above xml below:

enter image description here

Note: Here Yellow color is the background for toolbar widget. And the extra yellow background shows the unexpected space.

Now my questions: Is it possible to use ConstraintLayout inside a Toolbar so that it can cover the full body of its parent (toolbar)? If possible then how to solve the problems which I am facing now?

Any answer and suggestion will be praised.


Solution

  • This is the part of new Material Design Specification introduced in version 24.0.0 of Design Support library. It is possible to remove the extra space by adding the following property to Toolbar widget.

    app:contentInsetStartWithNavigation="0dp"
    

    As mention by @kocus in comments adding app:contentInsetStart="0dp" solved his problems, I originally misinterpreted the problem.