Menu item on bottom of CollapsingToolbarLayout when expanded

I've been searching for a while as shown on the following images but unfortunately I was not able to find anything similar

edit menu item is moving to bottom of CollapsingToolbarLayout when it is expanded

I tried a long combination of atributes for menu item but without success

This is my attempt

My screen 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=".ui.activities.AmbassadorActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/photo"
                android:scaleType="centerCrop"
                android:transitionName="@string/ambassador_photo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:contentDescription="@string/ambassador_photo" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

    <include layout="@layout/content_ambassador" />

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

My menu xml

<menu 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"
    tools:context=".ui.activities.AmbassadorActivity">
    <item
        android:id="@+id/action_save"
        android:title="@string/save"
        android:icon="@drawable/ic_save_white_24dp"
        android:orderInCategory="300"
        app:showAsAction="always" />

    <item android:id="@+id/action_skills"
        android:title="@string/skills"
        app:showAsAction="ifRoom"
        android:orderInCategory="200"
        android:icon="@drawable/ic_local_activity_white_24dp"/>

    <item android:id="@+id/action_edit_name"
        android:title="@string/edit_name"
        app:showAsAction="ifRoom"
        android:orderInCategory="100"
        android:icon="@drawable/ic_edit_white_24dp"/>
</menu>

How to implement this menu item behavior like WhatsApp group?

Thanks for any suggestion!

from Menu item on bottom of CollapsingToolbarLayout when expanded