Floating action button menu dont scroll with header

Question

I am currently coding a small app, and I trying to integrate the "material design" of Google.

I use in my app to github's floating Action menu button library and I have some worries.

Unlike the single button, the menu generates a larger view. I put my menu down the fab header. But the code does not seem good.

I wish to bring up the menu fab down my header properly (I use the CollapsingToolbarLayout). And the menu follows the scroll. But i'm stuck here.

My question is how to put the menu fab between my header and my cardviews, and how to scroll the fab menu with my collapsing toolbar.

Thank you in advance.

My layout:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="@+id/drawerlayout1">

<android.support.design.widget.CoordinatorLayout
 android:id="@+id/coordinatorlayout"
 android:layout_width="fill_parent"
 android:layout_height="match_parent"
 app:expandedTitleMarginStart="70dp">

    <android.support.design.widget.AppBarLayout
     android:theme="@style/AppTheme.AppBarOverlay"
     android:layout_width="fill_parent"
     android:id="@+id/appbarlayout"
     android:layout_height="230dp">

        <android.support.design.widget.CollapsingToolbarLayout
         android:id="@+id/CollapsingToolbarLayout1"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
              android:id="@+id/image"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:scaleType="centerCrop"
              android:src="@drawable/console_font"/>

            <android.support.v7.widget.Toolbar
             android:id="@+id/toolbar"
             android:title="test"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             app:popupTheme="@style/AppTheme.PopupOverlay"
             android:clickable="true"
             app:layout_collapseMode="pin"
             android:minHeight="?attr/actionBarSize"/>

        </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:fillViewport="true"
     app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

                <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:orientation="vertical" >

                    <LinearLayout
                      android:layout_width="fill_parent"
                      android:layout_height="match_parent"
                      android:layout_gravity="top"
                      android:layout_weight=".1" >

                        <android.support.v7.widget.CardView
                         xmlns:card_view="http://schemas.android.com/apk/res-auto"
                         android:id="@+id/card_view"
                         android:layout_width="match_parent"
                         android:layout_height="match_parent"
                         android:layout_marginTop="10dp"
                         android:layout_marginBottom="10dp"
                         android:layout_marginLeft="10dp"
                         android:layout_marginRight="10dp">

                            <LinearLayout
                              android:layout_alignParentBottom="true"
                              android:id="@+id/fragmentContainer"
                              android:layout_width="fill_parent"
                              android:layout_height="wrap_content"
                              android:orientation="vertical"
                              android:layout_marginLeft="10dp">

                                <TextView 
                                  android:textColor="@android:color/holo_blue_light"
                                  android:layout_marginTop="10dp"
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:textAppearance="?android:attr/textAppearanceLarge"
                                  android:text="Console"
                                  android:id="@+id/textView5" />

                                <Spinner
                                    android:layout_marginTop="10dp"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:id="@+id/spinner"
                                    android:layout_gravity="center_horizontal" />

                                <View style="@style/Divider"/>

                                <TextView 
                                    android:textColor="@android:color/holo_blue_light"
                                    android:layout_marginTop="20dp"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textAppearance="?android:attr/textAppearanceLarge"
                                    android:text="Etat"
                                    android:id="@+id/textView2" />

                                <Spinner
                                    android:layout_marginTop="10dp"
                                    android:entries="@array/etat"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:id="@+id/spinner2" />

                                <View style="@style/Divider"/>

                                <TextView
                                    android:textColor="@android:color/holo_blue_light"
                                    android:layout_marginTop="20dp"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textAppearance="?android:attr/textAppearanceLarge"
                                    android:text="Région"
                                    android:id="@+id/textView6" />

                                <Spinner
                                    android:layout_marginTop="10dp"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:entries="@array/localisation"
                                    android:id="@+id/spinner3" />

                                <View style="@style/Divider"/>

                                <TextView
                                    android:textColor="@android:color/holo_blue_light"
                                    android:layout_marginTop="20dp"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textAppearance="?android:attr/textAppearanceLarge"
                                    android:text="Contenu"
                                    android:id="@+id/textView3" />

                                <Spinner
                                    android:layout_marginTop="10dp"
                                    android:entries="@array/contenu"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:id="@+id/spinner4"
                                    android:layout_gravity="center_horizontal" />

                            </LinearLayout>

                        </android.support.v7.widget.CardView>

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="fill_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="bottom"
                        android:layout_marginBottom="10dp"
                        android:layout_weight=".1" >

                        <android.support.v7.widget.CardView
                            xmlns:card_view="http://schemas.android.com/apk/res-auto"
                            android:id="@+id/card_view2"
                            android:layout_marginTop="10dp"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:layout_marginBottom="10dp"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content">

                            <LinearLayout
                                android:id="@+id/fragmentContainer2"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:orientation="vertical"
                                android:layout_marginLeft="10dp">

                                <EditText
                                    android:textColor="@android:color/holo_blue_light"
                                    android:layout_marginTop="20dp"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:id="@+id/editText"
                                    android:layout_marginBottom="10dp"
                                    android:hint="Ecrire un commentaire" />
                            </LinearLayout>

                        </android.support.v7.widget.CardView>

                    </LinearLayout>

                </LinearLayout>

        </LinearLayout>

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

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_down"
        android:layout_width="match_parent"
        android:layout_height="37dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="185dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:elevation="6dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        app:layout_anchor="@id/image"
        app:layout_anchorGravity="bottom|right|end"
        fab:menu_openDirection="down">

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_size="mini"
            fab:fab_label="Menu item 1" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_size="mini"
            fab:fab_label="Menu item 2" />

    </com.github.clans.fab.FloatingActionMenu>

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

My code fragment:

    public class ConsoleSql extends AppCompatActivity  {

    private JvAdapter mDbHelper;
    TextView Titre;
    Spinner spin_console;
    Spinner spin_etat;
    Spinner spin_region;
    Spinner spin_contenu;
    EditText commentaire;
    String value;
    CollapsingToolbarLayout collapsingToolbarLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.customconsole);
    Toolbar myToolbar = (Toolbar) findViewById(toolbar);
    collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.CollapsingToolbarLayout1);

    myToolbar.setTitle("Ajout console");
    setSupportActionBar(myToolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close);

    spin_console = (Spinner) findViewById(R.id.spinner);
    spin_etat = (Spinner) findViewById(R.id.spinner2);
    spin_region = (Spinner) findViewById(R.id.spinner3);
    spin_contenu = (Spinner) findViewById(R.id.spinner4);
    commentaire = (EditText) findViewById(R.id.editText);


    Bundle extras = getIntent().getExtras();
    if (extras != null) {
        value = extras.getString("constructeur");
        int arryid = this.getResources().getIdentifier(value, "array", this.getPackageName());
        collapsingToolbarLayout.setTitle("Console "+value);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, arryid, android.R.layout.simple_spinner_item);                    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spin_console.setAdapter(adapter);

        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.consolemenu, menu);

    return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_save) {
            mDbHelper = new JvAdapter(this);
            mDbHelper.open();
            //do some stuffs...
            return true;
        }

    return super.onOptionsItemSelected(item);
}

Answer 1

Change you layout_anchor to "appbarlayout" instead of "image"

<com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="6dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        app:layout_anchor="@id/appbarlayout"
        app:layout_anchorGravity="bottom|end"
        fab:menu_openDirection="down">


</com.github.clans.fab.FloatingActionMenu>