Develop Reference

Nested scroll view on top of backdrop menu Material theme Android

I am having an issue with the display of the backdrop menu from material-ui for android together with a nested scroll view which comes on top of the backdrop when scrolling, I have been trying to use the elevation property on different elements hoping that it will work but I got no where;
this is the layout for main_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:clipChildren="false"
android:clipToPadding="false"
tools:context=".MainFragment">
<LinearLayout
style="#style/Widget.Provenance.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="#layout/backdrop_menu" />
</LinearLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="8dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_bar"
style="#style/Widget.Provenance.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="10dp"
android:paddingStart="12dp"
android:paddingLeft="12dp"
android:paddingEnd="12dp"
android:paddingRight="12dp"
app:layout_scrollFlags="scroll|enterAlways"
app:contentInsetStart="0dp"
app:navigationIcon="#drawable/menu_icon"
app:title="#string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:background="#color/colorPrimary"
android:clipToPadding="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/main_lay"
layout="#layout/main_menu_layout" />
</androidx.core.widget.NestedScrollView>
</FrameLayout>
then main_menu_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="15dp">
<TextView
android:id="#+id/titleTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="18dp"
android:gravity="center_horizontal"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#color/colorPrimaryDark"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="30sp" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonCreateUserMainMenu"
android:layout_marginTop="26dp"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_create_user_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonAddProductMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_add_product_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonTransferProductMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_transfer_product_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonShowAccountQRMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_show_account_qr_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonQRCodeScanMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_qrcode_scan_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonOne"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_one" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonTwo"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_two" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonTest"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test" />
</LinearLayout>
then backdrop_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemLogin"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_login" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemCommercial"
android:visibility="gone"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_commercial" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemOption2"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_option2" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemProducts"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_products" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemLogout"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_logout" />
</merge>
in the following picture, in red are buttons that should not be on top of the backdrop menu, when i scroll in the main menu layout i want it to go under the backdrop menu; thanks in advance

Try using CollapsingToolbarLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
style="#style/Widget.Provenance.Backdrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="#layout/backdrop_menu" />
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_bar"
style="#style/Widget.Provenance.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="10dp"
android:paddingStart="12dp"
android:paddingLeft="12dp"
android:paddingEnd="12dp"
android:paddingRight="12dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/menu_icon"
app:title="#string/app_name" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:clipToPadding="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/main_lay"
layout="#layout/main_menu_layout" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

How do I use parallax to scroll through my content?

I have some issues with parallax for android, where I currently have an image on top (with text content in the center) and a button on the top right.
Now as I scroll, I want the text and button to remain fixed on screen. As I scroll past the appbar (toolbar), the toolbar should be fixed to the top and the button should be on top right of it, fixed to it , while the rest of the content stays scrollable.
Here's my code (without parallax), any clue how i can achieve this ?
<?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:id="#+id/cl_root_view"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
android:background="#color/white"
android:contentInsetStart="5dp"
android:contentInsetLeft="5dp"
android:contentInsetEnd="5dp"
android:contentInsetRight="5dp"
app:contentInsetEnd="5dp"
app:contentInsetLeft="5dp"
app:contentInsetRight="5dp"
app:contentInsetStart="5dp"
app:titleTextAppearance="#style/Toolbar.TitleText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
style="#style/Toolbar.AltTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:drawableStart="#drawable/ic_dots"
android:gravity="center_vertical" />
<ImageButton
android:id="#+id/my_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="#+id/toolbar_title"
android:layout_marginEnd="20dp"
android:background="#drawable/ic_my_button"
android:tint="#color/black" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<TextView
android:id="#+id/roomsTitle"
style="#style/Headline2LeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_toStartOf="#+id/btnMore"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/meeting_rooms"
android:textAppearance="#style/TextAppearance.Text.Chronicle"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fontFamily="sans-serif"
android:letterSpacing="0.02"
android:lineSpacingExtra="2sp"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/all_rooms"
android:textColor="#color/reddish"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/roomViewPager"
android:layout_width="match_parent"
android:layout_height="400dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingStart="15dp"
android:paddingTop="16dp"
android:paddingEnd="15dp"
android:paddingBottom="45dp"
app:layout_constraintTop_toBottomOf="#id/roomsTitle" />
<RelativeLayout
android:id="#+id/register_a_visitor_container"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_margin="5dp"
android:layout_marginTop="35dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/roomViewPager">
<ImageView
android:id="#+id/register_visitor_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:tint="#color/reddish"
android:src="#drawable/ic_register_visitor_icon"
/>
<TextView
android:id="#+id/register_a_visitor_button"
style="#style/Body1RegLeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:letterSpacing="0.01"
android:layout_marginStart="16dp"
android:layout_toEndOf="#+id/register_visitor_icon"
android:lineSpacingExtra="8sp"
android:text="#string/register_a_visitor"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.Text.Roboto.Regular" />
<ImageView
android:id="#+id/reset_password_chevron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp"
android:tint="#color/brownish_grey"
android:background="#drawable/ic_baseline_chevron_right_24px"
/>
</RelativeLayout>
<!-- TODO work on it after MVP -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/container">
<TextView
android:id="#+id/upcoming_events"
style="#style/Headline3LeftGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="25dp"
android:text="#string/upcoming_events" />
<android.support.v7.widget.RecyclerView
android:id="#+id/event_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/upcoming_events"
android:background="#color/black"
tools:listitem="#layout/item_repo_view" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
As you can see from the above layout. I want to add an image (and add the my_button on top right of that image) that is above the toolbar and scrolls off the screen as you scroll up while my button stays in its place until the toolbar gets on top ,after which the toolbar is affixed to the top as you scroll further up, unless you scroll down and the image is visible again and the button is no more fixed.
Please let me know if this is confusing,I will try to explain it better with diagrams if possible.
Any examples will be helpful! thanks!

Please refer below code, i have made something like you.
<?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:id="#+id/view_profile_parent_layout"
android:background="#color/splash_bg_color"
tools:context=".view_profile.ViewProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_barLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/view_profile_profile_app_bar_height"
android:elevation="#dimen/view_profile_app_bar_elevation"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view_profile_imageView"
android:layout_width="#dimen/view_profile_profile_width"
android:layout_height="#dimen/view_profile_profile_height"
android:src="#drawable/ic_profile_icon"
android:layout_centerHorizontal="true"
app:civ_border_width="#dimen/view_profile_profile_border_width"
app:civ_border_color="#color/textPrimary"/>
<TextView
android:id="#+id/view_profile_profile_name_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/view_profile_profile_name_margin_top"
android:layout_below="#id/view_profile_imageView"
android:fontFamily="#font/roboto_regular"
android:text=""
android:textSize="#dimen/view_profile_profile_name_text_size"
android:gravity="center"
android:textColor="#color/white"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="#dimen/login_btn_elevation"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/back_button"
android:layout_width="#dimen/back_btn_layout_w"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<Button
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_marginStart="#dimen/default_padding"
android:clickable="false"
android:background="#drawable/ic_arrow_back_white_24dp"
android:elevation="#dimen/login_btn_elevation" />
</LinearLayout>
<TextView
android:id="#+id/nav_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginStart="#dimen/nav_outer_h_space"
android:fontFamily="#font/roboto_regular"
android:text=""
android:gravity="center"
android:textColor="#color/white"
android:textSize="#dimen/title_size" />
<Button
android:id="#+id/edit_button"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_gravity="right"
android:layout_centerInParent="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/nav_outer_h_space"
android:background="#drawable/edit_white_icon"
android:elevation="#dimen/login_btn_elevation" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Use
app:layout_scrollFlags="exitUntilCollapsed|scroll"
in collapsing layout
app:layout_collapseMode="pin"
in Toolbar

Changing from one view to another view onScroll

I am working a project. I have a a layout with a view at top and a Scrollview at the bottom of the view. Initially the layout will look like this.
After I scroll up the bottom layout. The view should smoothly change the the below view. And if I scroll down the view should come back to its previous layout.
As you can see there is a change in the position and size of the textviews. How can I achieve this ?
Here is the layout:
<?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/home_parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/AT_charcoal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="9dp"
android:background="#drawable/topographybackgroundx">
<RelativeLayout
android:id="#+id/layout_header_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
<RelativeLayout
android:id="#+id/top_ExpandedHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/image_invisalignLogo"
android:layout_width="108dp"
android:layout_height="26dp"
android:background="#drawable/invis_logo"
android:contentDescription="#null" />
<ImageButton
android:id="#+id/image_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#drawable/ic_profile_wht"
android:contentDescription="#null" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/number_RelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/layout_aligner_expanded_change"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<TextView
android:id="#+id/image_alignerNumber"
style="#style/BigNumber"
android:layout_width="wrap_content"
android:layout_height="138dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/textview_alignerTimeChange"
android:maxLength="2"
android:maxLines="1"
android:text="#string/three"
android:textSize="124sp" />
<TextView
android:id="#+id/textview_alignerChange"
style="#style/BodyWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#id/image_alignerNumber"
android:letterSpacing="0.03"
android:text="#string/days_alignerchange" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image_selfie_icon"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:civ_border_color="#FFFFFFFF"
app:civ_border_width="2dp" />
<TextView
android:id="#+id/textview_6alignerNumber"
style="#style/HeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/image_alignerNumber"
android:layout_below="#id/image_alignerNumber"
android:layout_marginTop="2dp"
android:letterSpacing="0.03"
android:text="#string/aligner_number" />
<TextView
android:id="#+id/textview_expanalignerNumber"
style="#style/HeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image_alignerNumber"
android:layout_toEndOf="#id/textview_6alignerNumber"
android:text="5" />
<TextView
android:id="#+id/textview_alignerTimeChange"
style="#style/LargeHeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:letterSpacing="0.03"
android:text="#string/aligner_change"
android:visibility="gone" />
<Button
android:id="#+id/button_change"
style="#style/TextButtonWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textview_alignerTimeChange"
android:layout_marginTop="15dp"
android:background="#color/AT_lushGreen"
android:gravity="center_vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="#string/changenow"
android:visibility="gone" />
</RelativeLayout>
<View
android:id="#+id/dividerline"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="#id/number_RelativeLayout"
android:layout_marginTop="12dp"
android:background="#color/AT_line" />
<TextView
android:id="#+id/addPhoto_TextView"
style="#style/BtnTextBlue18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dividerline"
android:layout_marginTop="10dp"
android:text="#string/add_photo" />
<TextView
android:id="#+id/goCalendar_TextView"
style="#style/BtnTextGold18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#id/dividerline"
android:layout_marginTop="7dp"
android:text="#string/go_calendar" />
</RelativeLayout>
</RelativeLayout>
<include
layout="#layout/homescreen_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_header_profile"
android:layout_marginTop="15dp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

You can use the Collapsing Toolbar Layout
Example Here and here
Edit: some piece of code
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/beach_scene"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" >
</android.support.v7.widget.Toolbar>
</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="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/sample_string"/>
</android.support.v4.widget.NestedScrollView>

Using a Collapse Tool Bar as João said, your code should be like this
and getting my answer as base from here
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#color/WHITE">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<Your Content>
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/homescreen_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_header_profile"
android:layout_marginTop="15dp" />
On <Your Content> is the place where you should put your string.
Sorry that I can't help more. Your Cody is a little messy and really hard to understand.
Maybe if you edit leaving only the important codes will help.
But maybe this library can help you.

Floating action button unintentionally floats to top of screen

The FAB seems to overlap the toolbar at the top of the screen, whereas I want it at the bottom right of the screen.
If I modify the layout_height of the app_bar_main.xml element (contains toolbar and button) to "match_parent" instead of "wrap_content", the button gets correctly placed but then the fragment which should be there gets pushed off the screen/is not placed.
Issue seems to be with the structure of the xml files but I am not sure how to fix it.
activity_main.xml
<?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:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/main_action_bar"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/main_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:itemIconTint="#FFF"
app:itemTextColor="#FFF"
app:menu="#menu/loggedout_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.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=".MainActivity">
<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:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:shape="rectangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:paddingBottom="30dip"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
app:borderWidth="0dp"
android:src="#drawable/ic_add_white_24px" />
</android.support.design.widget.CoordinatorLayout>
activity_login.xml (Layout of fragment that is placed in main_container)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".LoginFragment"
android:layout_below="#+id/main_action_bar"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Login."
android:id="#+id/login_title_text"
android:layout_alignParentTop="true"
android:textSize="40sp"
android:layout_marginBottom="70dp"
android:layout_marginTop="100dp"
android:fontFamily="sans-serif-light"
android:textColor="#color/colorAlt"
android:layout_centerHorizontal="true" />
<!-- E-mail section -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="E-mail address"
android:layout_marginLeft="50dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:ems="10"
android:id="#+id/login_emailField"
android:layout_below="#+id/login_title_text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/register_email_icon"
android:layout_alignBottom="#id/login_emailField"
android:layout_marginLeft="15dp"
android:layout_marginBottom="10dp"/>
<!-- Password section -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginTop="10dp"
android:hint="Password"
android:layout_below="#id/login_emailField"
android:id="#+id/login_passwordField"
android:layout_marginLeft="50dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="25dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/register_password_icon"
android:layout_alignBottom="#id/login_passwordField"
android:layout_marginLeft="15dp"
android:layout_marginBottom="10dp"/>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/login_login_button"
android:layout_gravity="center_vertical"
android:layout_below="#+id/login_passwordField"
android:layout_marginBottom="29dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
card_view:cardBackgroundColor="#E91E63"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="6dp">
<TextView
android:id="#+id/material_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="13dp"
android:paddingBottom="13dp"
android:layout_gravity="center_horizontal"
android:textColor="#FFF"
android:textSize="19sp"
android:fontFamily="sans-serif-medium"
android:text="Login" />
</android.support.v7.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Forgotten your username or password?"
android:layout_below="#id/login_login_button"
android:gravity="center"
android:layout_centerHorizontal="true"
android:id="#+id/login_footer_text"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Tap here"
android:textColor="#000000"
android:layout_below="#id/login_footer_text"
android:gravity="center"
android:layout_centerHorizontal="true"
android:id="#+id/loginForgottenTapText"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</ScrollView>
Thanks for any help in advance.

How to remove shadow on scroll RecyclerView

I'm trying to implement a RecyclerView with different list items. I don't know why but there is a shadow dropped by list items. This shadow appears when I scroll up and down. I want to get rid of this shadow, but found nothing that could help me. Any suggestions? Here's my XML:
<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="com.example.admin.lanet_contactwork.activities.LoginActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
--------------------------------------Update: added item layouts----------------------------
FIRST ITEM LAYOUT
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
>
<TextView
android:id="#+id/divider_txt"
android:layout_width="match_parent"
android:layout_height="48dp"
android:padding="8dp"
android:maxLines="1"
android:textSize="18sp"
android:background="#color/lightgrey"
android:textColor="#android:color/black"
android:textStyle="bold">
</TextView>
</LinearLayout>
SECOND ITEM LAYOUT
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/task"
android:layout_width="match_parent"
android:layout_height="62dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/task_type_img"
android:layout_marginRight="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#mipmap/ic_sort_grey" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/address_txt"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="72dp"
android:textSize="16sp"
android:textColor="#android:color/black"
android:layout_marginTop="12dp"
android:layout_toLeftOf="#+id/task_type_img" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10:00"
android:id="#+id/time_txt"
android:textSize="16sp"
android:textColor="#android:color/black"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/address_details_txt"
android:layout_marginLeft="72dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="12dp"
android:textColor="#android:color/black"
android:textSize="14sp"
android:layout_toLeftOf="#+id/task_type_img" />
</RelativeLayout>

Add this to your RecyclerView:
android:overScrollMode="never"
It works for me

`<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:layout_marginTop="20dp"
android:paddingTop="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="0dp"/>`
android:overScrollMode="never"
This helped me to remove shadow at the start of the recyclerView and at the end as well

add this code to your RecyclerViewor other scrollable view:
android:overScrollMode="never"