Android - Overflow Menu and Back Button not showing in Collapsing Toolbar

Rick picture Rick · Jun 13, 2015 · Viewed 32k times · Source

I'm trying to implement features from the new Design Support Library to create a parallax scrolling toolbar which looks similar to the new material design WhatsApp profile pages. However, I can't get the overflow menu and back button to show in the top corners.

I have tried using the following methods to display the back button, but none of them works.

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setDisplayShowHomeEnabled(true);

And overwriting the onCreateOptionsMenu method for the overflow menu also didn't work.

Does anyone know how to add these toolbar icons to a CollapsingToolbar from the Design Support Library? Below is my layout xml for the activity. Thanks!

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/primary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/headerbg"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

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

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    android:layout_marginBottom="?attr/actionBarSize"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v4.widget.NestedScrollView>

Answer

Maciej Sikora picture Maciej Sikora · Dec 29, 2016

I had the same issue, none from existing answers have helped me, surprising fix of my problem was in question description.


Solution for AppCompat Activity

So working collapsing toolbar with back button needs those few lines in controller onCreate method:

//change id to Your id
toolbar = (Toolbar) findViewById(R.id.toolbar); 
setSupportActionBar(toolbar);

//this line shows back button
getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

Manifest of this activity ( notice parentActivityName attribute ):

<activity
  android:name=".SomeActivity"
  android:parentActivityName=".MainActivity"
  android:theme="@style/AppTheme.NoActionBar"/>

Template part:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="@color/colorPrimary"
        android:fitsSystemWindows="true"
        app:expandedTitleGravity="center_horizontal"
        >

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

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

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

Alternative solution ( also AppCompat Activity )

Controller onCreate method:

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

toolbar.setNavigationIcon(android.support.v7.appcompat.R.drawable.abc_ic_ab_back_material);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            onBackPressed();
        }
});

This approach uses the same manifest and template presented in first solution.