Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 

like image 213
Rick Avatar asked Jun 13 '15 16:06

Rick


1 Answers

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.

like image 140
Maciej Sikora Avatar answered Sep 19 '22 19:09

Maciej Sikora