Prevent the button from hiding when scrolling toolbar

Question

I am building an application and i want in an Activity to have the CollapsingToolbarLayout . Everything works fine except the fact that when i scroll to the very top half of the button goes underneath the toolbar like this:

what i want to achieve is this:

my layout is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_game_info"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

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

            <ImageView
                android:id="@+id/imageDescTropos"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="fitXY"
                android:contentDescription="Nothing"
                android:src="@drawable/download"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                app:titleEnabled="false"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                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:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_marginTop="25dp"
            android:layout_height="match_parent">


            <TextView
                android:id="@+id/game_full_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="13.5dp"
                android:layout_marginLeft="16dp"
                android:scrollbars="vertical"
                android:text="Game Name"
                android:fadeScrollbars="true"
                android:fontFamily="sans-serif-black"
                android:textColor="@color/black"
                android:textSize="18sp"
                tools:targetApi="jelly_bean" />

            <TextView
                android:id="@+id/my_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Category"
                android:layout_marginLeft="16dp"/>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="9dp"
                android:background="@color/game_info_jackpot_background">

                <TextView
                    android:text="Text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:layout_marginTop="9.5dp"
                    android:layout_marginBottom="9dp"
                    android:layout_marginLeft="16dp"
                    android:id="@+id/textView" />
            </LinearLayout>

            <TextView
                android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis luctus elementum. Maecenas ultricies volutpat mollis. Pellentesque lacinia euismod libero. Integer ullamcorper nulla suscipit eros maximus, at sollicitudin ante faucibus. Nulla semper purus ac dignissim porttitor. Sed in nisl posuere, fermentum arcu id, ultricies nibh. Morbi a pulvinar arcu, nec varius massa. Mauris ut sagittis magna. Etiam feugiat ut neque ac congue. Maecenas quis felis eget elit placerat venenatis ut ut nisl. Sed condimentum libero condimentum bibendum imperdiet. Sed non libero a odio faucibus consectetur. Nunc dignissim nisl ut nibh lacinia, a commodo tellus venenatis. Aenean diam diam, volutpat at aliquet id, tempor ut odio. Nunc sit amet egestas lectus, in consequat magna."
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:fontFamily="sans-serif-light"
                android:layout_marginRight="16dp"
                android:layout_marginTop="13.5dp"
                android:id="@+id/textView2" />
        </LinearLayout>

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

    <Button
        android:id="@+id/toolbar_Button_Play"
        android:text="@string/play_now"
        android:layout_width="300dp"
        android:background="@color/blue"
        android:textColor="@color/white"
        app:layout_anchor="@id/appBar_layout"
        app:layout_anchorGravity="bottom|center"
        android:layout_height="wrap_content" />

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

How can i achieve the button not to hide?

UPDATE

I have noticed that if i replace the Button with a android.support.design.widget.FloatingActionButton it just hides by itself. So the problem is with the widget. Anyone have any idea how to prevent this from happening?

Answer 1

This should work, it said that because noone declared the ID, now Button declared the id appBar_layout, and the barLayout only uses it. I also added elevation.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_game_info"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/toolbar_Button_Play"
        android:text="@string/play_now"
        android:layout_width="300dp"
        android:background="@color/blue"
        android:textColor="@color/white"
        app:layout_anchor="@+id/appBar_layout"
        app:layout_anchorGravity="bottom|center"
        android:elevation="10dp"
        android:layout_height="wrap_content" />

    <android.support.design.widget.AppBarLayout
        android:id="@id/appBar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

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

            <ImageView
                android:id="@+id/imageDescTropos"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="fitXY"
                android:contentDescription="Nothing"
                android:src="@drawable/download"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                app:titleEnabled="false"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                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:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_marginTop="25dp"
            android:layout_height="match_parent">


            <TextView
                android:id="@+id/game_full_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="13.5dp"
                android:layout_marginLeft="16dp"
                android:scrollbars="vertical"
                android:text="Game Name"
                android:fadeScrollbars="true"
                android:fontFamily="sans-serif-black"
                android:textColor="@color/black"
                android:textSize="18sp"
                tools:targetApi="jelly_bean" />

            <TextView
                android:id="@+id/my_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Category"
                android:layout_marginLeft="16dp"/>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="9dp"
                android:background="@color/game_info_jackpot_background">

                <TextView
                    android:text="Text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:layout_marginTop="9.5dp"
                    android:layout_marginBottom="9dp"
                    android:layout_marginLeft="16dp"
                    android:id="@+id/textView" />
            </LinearLayout>

            <TextView
                android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis luctus elementum. Maecenas ultricies volutpat mollis. Pellentesque lacinia euismod libero. Integer ullamcorper nulla suscipit eros maximus, at sollicitudin ante faucibus. Nulla semper purus ac dignissim porttitor. Sed in nisl posuere, fermentum arcu id, ultricies nibh. Morbi a pulvinar arcu, nec varius massa. Mauris ut sagittis magna. Etiam feugiat ut neque ac congue. Maecenas quis felis eget elit placerat venenatis ut ut nisl. Sed condimentum libero condimentum bibendum imperdiet. Sed non libero a odio faucibus consectetur. Nunc dignissim nisl ut nibh lacinia, a commodo tellus venenatis. Aenean diam diam, volutpat at aliquet id, tempor ut odio. Nunc sit amet egestas lectus, in consequat magna."
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:fontFamily="sans-serif-light"
                android:layout_marginRight="16dp"
                android:layout_marginTop="13.5dp"
                android:id="@+id/textView2" />
        </LinearLayout>

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



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