Home » Android » Android – Overflow Menu and Back Button not showing in Collapsing Toolbar

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

Posted by: admin April 23, 2020 Leave a comment

Questions:

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>

How to&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.

Answer:

In my case this works! app:layout_collapseMode="pin" inside toolbar layout

Answer:

Try not to put this in the coordinatorLayout:

android:fitsSystemWindows="true"

It works for me. No idea why. Good luck

Answer:

The following enables the Navigation Button:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_arrow_back_white_24dp, null));
toolbar.setNavigationOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        //onBackPressed()
    }
});

To get the Overflow Menu behavior you have to declare a menu.xml file with showAsAction:never applied to your menu items like:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/action_one"
        android:title="action 1"
        android:orderInCategory="1"
        app:showAsAction="never"/>

    <item android:id="@+id/action_two"
        android:title="action 2"
        android:orderInCategory="2"
        app:showAsAction="never"/>
</menu>

And inflate it like:

toolbar.inflateMenu(R.menu.main);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_one:
                break;
            case R.id.action_two:
                break;
        }
        return true;
    }
});

Answer:

change
app:layout_collapseMode=”parallax”
to
app:layout_collapseMode=”pin”
in imageView.
hope this will work for you

Answer:

If u have not added parentActivityName tag in manifest file, then do so by adding following lines of code as

<activity android:name=".Activity.MovieData"
        android:parentActivityName=".Activity.Home">
</activity>

where “Activity” is my Package name
“MovieData” is my activity name
“Home” is my destination activity name

EDIT: If you are supporting android api level 15 and below then parentActivityName wont work.

To support lower versions, u need to add meta-data tag as

<meta-data
    android:name="PARENT_ACTIVITY"
    android:value="com.example.Activity.Home"/>

Answer:

change this..

        <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:elevation="15dp"

        android:layout_width="match_parent"
        app:logo="@drawable/action_bar_logo"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

the popupTheme makes the difference and it is what you were looking for..

this is my full 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".AddUser">
        <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">
            <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:elevation="15dp"
            android:layout_width="match_parent"
            app:logo="@drawable/action_bar_logo"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
            </android.support.design.widget.AppBarLayout>
        <include layout="@layout/content_add_user" />
</android.support.design.widget.CoordinatorLayout>

Good luck!

Answer:

Goto res/values/ and open styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Change parent=”Theme.AppCompat.Light.NoActionBar” to parent=”Theme.AppCompat.Light”

Then start debugging and remove all unnecessary code like // setSupportActionBar(toolbar); things.
Definitely work.