Alex Ionescu Alex Ionescu - 2 months ago 24
Android Question

CollapsingToolbarLayout and TabLayout results in title overlapping

I'm using the CollapsingToolbarLayout and I'm trying to make the title of the activity fall nicely into its Toolbar while not overlapping with the TabLayout.

I've been searching for a couple of hours and most of the answers suggested a custom height for the Toolbar, but this results in the Title going into the lower part of the toolbar (android:gravity="bottom"). Tried changing its gravity with no luck.

Is there any way of doing this?

This is what I am getting right now:
1

My XML layout is as following:

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="@bool/isFitSystemWindows">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/awesomeviewpager_appbar"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:layout_behavior="com.iac.awesomeviewpager.FlingBehavior"
app:theme="@style/ThemeOverlay.AppCompat.Light" >

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/header_height"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:expandedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

<com.flaviofaria.kenburnsview.KenBurnsView
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/raton"
android:fitsSystemWindows="@bool/isFitSystemWindows"
android:scaleType="centerCrop"
android:src="@drawable/raton"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:tabBackground="@android:color/transparent"
app:tabIndicatorColor="@android:color/white"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>


Thank you!

dbm dbm
Answer

I have recently found myself in a similar situation as you. Unfortunately I couldn't find a nice and clean solution for this. I did, however, find a dirty XML, mish-mash solution.

One key moment was realizing that the CollapsingToolbarLayout will inherit it's terminal collapsed height from the first Toolbar within, or the one defined by the app:toolbarId attribute.

Once one gets past this hurdle, it's only a matter of time and patience on how to play the margins and paddings to align the final result.

The key components in the below solution are:

  • The @dimen/height dimension
  • The @dimen/height_double dimension
  • The app:collapsedTitleGravity="top" attribute

The actual values of @dimen/height and @dimen/height_double are not as interesting as the relation between them; one being twice as big as the other. I think I have used 56dp and 112dp respectively in my tests.

I have also added semi-transparent background color attributes to the Toolbar and the TabLayout which will highlight (during runtime) what exactly is going on.

Hope you find this helpful.


my_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--
            This one is interesting, especially the
            "collapsedTitleGravity" and "expandedTitleMarginBottom"
            attributes
        -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:collapsedTitleGravity="top"
            app:expandedTitleMarginBottom="@dimen/height"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/pancake"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <!--
                This one is extra interesting, given the relation
                between its own height and the TabLayout height.
                The layout margins and paddings are dependant on
                text size etc.
            -->
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="@dimen/height_double"
                android:layout_gravity="top"
                android:layout_marginBottom="14dp"
                android:layout_marginTop="-14dp"
                android:background="#33ff0000"
                android:paddingTop="12dp"
                app:layout_collapseMode="pin" />

            <!--
                And this one too, given how its "layout_height"
                attribute relates to the Toolbar.
            -->
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="@dimen/height"
                android:layout_gravity="bottom"
                android:background="#3300ff00"
                app:tabGravity="fill"
                app:tabMode="fixed" />

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

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

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
Comments