Develop Reference

How to ensure that the Android adView is always displayed after the bottom of the last item in my Android listView?

This bounty has ended. Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 21 minutes.
Zac1 is looking for a canonical answer:
Please provide working XML layout code to fix this issue. If I resize my listView in the Android Studio Design editor such that listView is above the adView, the adView still seems to overlap the last item of the listView.
Here's the activity_results XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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"
tools:context="com.test.test.ResultsActivity">
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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:titleTextAppearance="#style/ToolbarTitle" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:tabMaxWidth="0dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<androidx.constraintlayout.widget.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.test.ResultsActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/adView"></ListView>
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center|bottom"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
And, here's the content_results.xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/abc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dip"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
<TextView
android:id="#+id/ghi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
I want to have the adView item at the bottom of the last element of the listView. Is this possible with the layouts I currently have? Because it looks like the adView in the activity_results has no relation to the list items in the content_results file?
I've also tried app:layout_constraintBottom_toTopOf attribute to position the adView below the ListView, but there seems to be no change.
Please let me know if you can catch any other basic errors in these layouts?

How about wrapping up co-ordinator view group with constraintLayout and putting adview outside of this co-ordinator viewgroup and constrain adview to bottom to the activity layout so that ad view is independent of list view's data.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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"
tools:context="com.test.test.ResultsActivity">
<androidx.coordinatorlayout.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"
app:layout_constraintBottom_toTopOf="#+id/adView"
android:layout_height="wrap_content">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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:titleTextAppearance="#style/ToolbarTitle" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:tabMaxWidth="0dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<androidx.constraintlayout.widget.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.test.ResultsActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/adView"></ListView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent" />
</ConstraintLayout>

I have two pieces of advice for you:
Avoid using ListView (unless you have a fixed amount and few items). Prefer RecyclerView which is so much more performative. Basically, if you have so many items, with RecyclerView, just a certain amount of items will have the layout rendered. With ListView, even the hundredth item will have the layout rendered (even if you can see just the first four items on your screen at a certain moment).
Take care about using several nested view groups. It impacts the performance to render the layout on the device. In general, just a root ConstraintLayout solves all the problems you can face to align the elements.
For the first layout, because the AppBarLayout needs the CoordinatorLayout to work properly, you can keep the CoordinatorLayout as root and use ConstraintLayout after the AppBarLayout. For the second layout, the same thing. Here is an example:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="10dp">
<TextView
android:id="#+id/abc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="10dp"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/def"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/abc"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ghi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/def"
android:text=""
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
</androidx.constraintlayout.widget.ConstraintLayout>
About your problem with the AdView position, try something like this:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:padding="10dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="#integer/material_motion_duration_long_2"
tools:layout_editor_absoluteX="3dp" />
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/recyclerview"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if it worked. If you need some more help, contact me.

How to center button in toolbar Android

I am new to android app development. I am trying to create a toolbar that has 3 buttons on it, left middle and center. My left are right buttons are positioned correctly but my middle button displays in the middle of the page instead of middle of the tool bar. Wondering if anyone can help with this. Thanks
Also wondering if anyone can help with the white space above the tool bar
activity_main:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:fitsSystemWindows="true"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
>
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="#+id/toolbar"
layout="#layout/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Menu" />
<Button
android:id="#+id/add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="Add New" />
<Button
android:id="#+id/home_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#141619"
android:fitsSystemWindows="true"
app:itemIconTint="#141619"
app:itemTextColor="#FFFFFF"
app:menu="#menu/activity_main_drawer" >
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
app_bar_main:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.MPL.AppBarOverlay">
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
toolbarlayout:
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#141619"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>

I have fixed issue with all of your layouts.
for your activity_main.xml copy and paste below layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:fitsSystemWindows="true"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main" />
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#141619"
android:fitsSystemWindows="true"
app:itemIconTint="#141619"
app:itemTextColor="#FFFFFF">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
change you app_bar_main to following
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#282941"
android:fitsSystemWindows="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="?attr/actionBarSize">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingEnd="16dp">
<Button
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Menu" />
<Button
android:id="#+id/add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="Add New" />
<Button
android:id="#+id/home_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
That's it, you don't have to create any other layout. Now wherever you want to have this toolbar you can include your app_bar_main.xml in the layout and you will get the toolbar. Then in your activity if you want to access toolbar and button inside toolbar, do like this:
Toolbar toolbar = findViewById(R.id.account_toolbar);
setSupportActionBar(toolbar);
Button btnEdit = toolbar.findViewById(R.id.menu_button);
let me know if you have any questions. I'll try to help you out.

I don't know if what you are trying to do is a good idea.
From a design perspective, you have only a limited space in the toolbar and you should position there only the most relevant actions to the context, all the other actions are going to be hiden in the classic "three dots" menu.
You can check what I mean here https://developer.android.com/training/appbar/actions
https://material.io/components/app-bars-top#anatomy
Even thouth, to achieve what you are trying to do, I'll do it using Constraint Layout instead of Relative Layout, makes your life easier and is up to date ;) https://developer.android.com/training/constraint-layout

First, create title_menu.xml Layout. make sure android:layout_height="wrap_content" and android:gravity="center"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Button"/>
</LinearLayout>
Second, add the following code on the onCreate method in your Activity.
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.title_menu);

How to animate an image above a listview when scrolling?

I have an image above my listview that is currently doing nothing.But I want my image to be animated when the user scrolls in the listview just like
this.
This is an example of an old library called StikkyHeader ,but it doesn't seem to work now.
Is there any other libraries for the same reason or even a way I can do it without libraries?

Try this one
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:minHeight="200dp"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="150dp"
app:expandedTitleMarginBottom="25dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:src="#drawable/magic_bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:layout_height="match_parent"/>
<TextView
android:layout_width="match_parent"
android:text="#KeepMakingMagic"
android:textSize="25dp"
android:gravity="center"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_collapseMode="parallax"
android:layout_marginBottom="50dp"
android:layout_gravity="bottom"
app:layout_collapseParallaxMultiplier="-0.1"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- You can have list view here Instead of scrollview But you need to make sure layout behaviour is same-->
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#color/colorAccent"
android:layout_height="1000dp">
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Demo :
Don't forget to play with things

Negative margin Layout to overlay parent layout

I have an activity that has a toolbar and a framelayout where I inject fragments.
This is the layout for that activity:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drwDrawerRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_main_selector"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/viewMainToolbar"
layout="#layout/view_toolbar" />
</LinearLayout>
<FrameLayout
android:id="#+id/frmDrawerContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/toolbar_height"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical" />
<include
android:id="#+id/viewDrawer"
layout="#layout/view_drawer"
bind:name="#{name}"/>
<include
android:id="#+id/viewUserDrawer"
layout="#layout/view_user_drawer"
bind:name="#{name}"/>
</android.support.v4.widget.DrawerLayout>
I have the framelayout with a margin so that the contents from the fragments do not overlay the toolbar, but I set clipChildren and clipToPadding to false as per some other posts I have seen here.
On some fragments however I have a loading view, which I would like to occupy all the screen.
This is a sample fragment:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_main"
style="#style/Layout.FullScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout_footer"
android:orientation="vertical">
<TextView
android:id="#+id/textView7"
style="#style/Text.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/login_header" />
<EditText
android:id="#+id/edtMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:elevation="1dp"
android:ems="10"
android:inputType="textMultiLine" />
<Button
android:id="#+id/btnSend"
style="#style/Button.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/support_button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_footer"
style="#style/Layout.FullScreen.Footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/footerInfo"
style="#style/Text.White.Small.Centered"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/footer_info" />
</LinearLayout>
<include
layout="#layout/view_loading"
android:visibility="invisible"
bind:loading="#{loading}" />
</RelativeLayout>
Ans this is the included loading view, which I have set with negative margin, hoping it would move up to the top of the screen:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-40dp"
android:background="#color/colorLoadingBackground"
android:clickable="true"
android:visibility="#{loading ? View.VISIBLE : View.GONE}">
</FrameLayout>
Am I missing something here?
Is this doable or do I need to change how I am doing this?
Clarification:
The first / root layout includes a toolbar and the second layout is included within the frame layout of the first. this means that the content of the second layout starts below the toolbar. However, I would like the third layout (a loading screen that is included in the second layout) to have a negative margin so that it overlays the full screen, not just starting below the toolbar.

You need to use CoordinatorLayout then you wont need negative margins. here are the sample layout u can customise according to your need
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior= "#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="My App" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!--include a full screen loading layout here and hide/show according to your need-->
<include layout="#layout/loading_layout/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

NestedScrollView Overlapping toolbar (They are inside of a Fragment Layout)

I'm trying to add CoordinatorLayoutincluding a Toolbar inside of a Fragment layout. But the problem is that the contents of the NestedScrollView Overlapping to the Toolbar, as you see in image below :
I tried to add a RelativeLayout parent and use
android:layout_below="#+id/coordinatorlayout" for the
NestedScrollView,but this make the content of NestedScrollView not
showing up.
Fragment layout Code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:background="#color/colorPrimary"
android:id="#+id/toolbar2"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#FFFFFF">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<android.support.v7.widget.CardView
android:layout_height="40dp"
android:layout_width="match_parent">
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<ImageView
android:id="#+id/search_icon"
android:layout_alignParentRight="true"
android:layout_height="24dp"
android:layout_width="24dp"
android:src="#drawable/ic_search_black_24dp" />
<EditText
android:hint="Search"
android:id="#+id/searchEditText"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:text="hello"/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>

1. Use CoordinatorLayout as root layout.
2. Add AppBarLayout and NestedScrollView inside CoordinatorLayout.
3. Put Toolbar inside AppBarLayout.
Here is the working code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:background="#color/colorPrimary"
android:id="#+id/toolbar2"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#FFFFFF">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<android.support.v7.widget.CardView
android:layout_height="40dp"
android:layout_width="match_parent">
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<ImageView
android:id="#+id/search_icon"
android:layout_alignParentRight="true"
android:layout_height="24dp"
android:layout_width="24dp"
android:src="#drawable/ic_search_black_24dp" />
<EditText
android:hint="Search"
android:id="#+id/searchEditText"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:text="hello"/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
OUTPUT:
Hope this will help~

Thanks to #tompadre
The one and only solution was that i have to change the width="match_parent" of both CoordinatorLayout and NestedScrollView to wrap_content and the add this code below to NestedScrollView :
android:layout_below="#+id/coordinatorlayout"
a really simple problem wasted my time for an hour :/