Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extra space between Collapsing Toolbar Title and Home/Up button

I'm trying to use Collapsing Toolbar with Home/Up button. After toolbar collapses, there is an extra space between arrow and title text, which I'd like to get rid of. I attached two images, with and without layoutboundaries, to illustrate my point.

I searched StackOverflow and everywhere and tried android:contentInsetStart="0dp" in vain.

enter image description here

enter image description here

Here is my layout XML file.

<android.support.design.widget.CoordinatorLayout
    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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="?colorPrimary"
        app:elevation="4dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/colorPrimary"
            app:collapsedTitleTextAppearance=
                "@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance=
                "@style/TextAppearance.ExpandedTitle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Toolbar Title">


            <ImageView
                android:id="@+id/collapsing_toolbar_background"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="88dp"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop"
                android:src="@drawable/glider"
                app:layout_collapseMode="parallax"
                />

            <View
                android:id="@+id/toolbar_title_scrim"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_alignBottom="@+id/collapsing_toolbar_background"
                android:layout_gravity="bottom"
                android:background="@android:color/holo_green_light"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="test text"
                android:textColor="@android:color/white"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:contentInsetStart="0dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:scrollbarStyle="outsideOverlay"/>
    </android.support.v4.widget.SwipeRefreshLayout>

</android.support.design.widget.CoordinatorLayout>
like image 332
Libelle Avatar asked Jul 04 '16 00:07

Libelle


1 Answers

It turned out that this is part of a new Material Design Specification introduced in version 24 of Design library.

https://material.google.com/patterns/navigation.html

However, it is possible to remove the extra space by adding the following property to Toolbar widget.

app:contentInsetStartWithNavigation="0dp"
like image 93
Libelle Avatar answered Nov 03 '22 23:11

Libelle