Develop Reference

Xamarin Android FrameLayout and Content Overlapping on Navigation Bar And on Menu

Screenshot 1
Screenshot 2
The above screen shots is preview for application previewing on android. As you see the FrameLayout and content of FrameLayout is overlapping on NavigationBar and on Menu. How should I make the content visible within frame. Also I want the content should placed behind the NavigationBar.
Below is the code of Main.axml file:
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<include layout="#layout/toolbar" />
<FrameLayout android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav_menu"
/>
</android.support.v4.widget.DrawerLayout>

How should I make the content visible within frame. Also I want the content should placed behind the NavigationBar.
Put your FrameLayout and toolbar in a LinearLayout like this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/ll">
<include layout="#layout/toolbar" />
<FrameLayout android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
/>
</LinearLayout>
EDIT :
no content is visible on menu item click
In your toolbar.axml, your CoordinatorLayout's layout_height property is match_parent, so no content is visible.
Modify your toolbar.axml code like 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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="#2196F3" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Then your project will works fine.

main Layout Overlaps with Navigation Drawer

i am new with navigation drawer. I want to Create layout for my mainactivity, but why overlap so my main layout not visible, may you help me. Thanks for answer
This is my activity_main.xml 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: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"
android:background="#drawable/splashscreen">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jaakkk"
android:textColor="#ffffff" />
</FrameLayout>
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
How can I do to change that?

So, your problem is drawer layout overlapping the linear layout below. Use
u can add this line in
<android.support.design.widget.NavigationView
android:layout_below="#id/drawer_layout"/>

Navigation Drawer Fragment cut off at top

I'm using the Navigation Drawer Template on android and I'm also using fragments. Whenever there is a fragment, the action cuts off the fragment's top. I haven't changed the default code other than adding in the fragment. How do you get the fragment to load below the action bar?
picture of the problem:
*update
Now it looks like this
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:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
fragment xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.slidemenu.TestFragment"
android:orientation="horizontal">
<!-- TODO: Update blank fragment layout -->
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#android:drawable/ic_menu_compass"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TESTTEST"
android:textSize="50sp"/>
</LinearLayout>
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="com.example.android.slidemenu.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

The FrameLayout needs to be below the Toolbar, and inside the CoordinatorLayout. Try to restructure like so.
Include the "main contents" in the DrawerLayout. Then add the FrameLayout after the AppBarLayout (or include other views if Fragments aren't needed).
The secret line that "pushes" down the FrameLayout is this line
app:layout_behavior="#string/appbar_scrolling_view_behavior"
drawer layout 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:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/nav_content"/>
<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:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
nav_content.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="com.example.android.slidemenu.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Put the FrameLayout inside the CoordinatorLayout, after the AppBarLayout.
EDIT: Try removing the android:fitsSystemWindows=true.

Setting android:fitsSystemWindows to false instead of removing it did the trick for me. Thx amitairos for the hint ;).

<include> FrameLayout and App/Action Bar Colliding

I have weird problem of colliding
My 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:fitsSystemWindows="true">
<include
layout="#layout/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="250dp"
android:background="#DDDDDD"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
My content.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=".main.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Adding android:layout_marginTop="?attr/actionBarSize" this to all fragment layouts solves the problem but why? I think it is because of include technique that is used in main layout but since toolbar is always there and framelayout is another widget, but it starts calculationg from top of app bar.

Because you are using a CoordinatorLayout as parent of your Fragment layout.
You haven't any explicit behavior defined there so it will use his default behavior, that's why the Fragment layout is "under" your AppBarLayout.
A simple way to solve this is to add the layout_behavior attribute to fragment_container:
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">

Navigation Drawer Below Toolbar

I am trying to get the navigation drawer to open below the toolbar.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<include layout="#layout/toolbar"
android:id="#+id/toolbar"/>
<FrameLayout
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color"/>
</RelativeLayout>
<ListView
android:id="#+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_marginTop="56dp"
android:layout_gravity="start">
</ListView>
</android.support.v4.widget.DrawerLayout>
How do I reformat the xml so that the navigation bar opens below the toolbar?

You should move DrawerLayout as top parent and move Toolbar out of DrawerLayout content container.
In short this looks like:
RelativeLayout
----Toolbar
----DrawerLayout
---ContentView
---DrawerList
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/top_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color" />
<ListView
android:id="#+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_gravity="start"
android:layout_marginTop="56dp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
However, Material Design guidelines state that Navigation Drawer should be above the Toolbar.

You should simply add
android:layout_marginTop="#dimen/abc_action_bar_default_height_material"
to your layout which you are using as drawer.
This will automatically adjust the navigation drawer below the toolbar and also supports different screen sizes.

You can add layout_marginTop like this,
<android.support.design.widget.NavigationView
android:layout_marginTop="#dimen/abc_action_bar_default_height_material"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
but drawer will appear as a the top layer to tool bar.
Here is another Choppy way to add it below to toolbar!!!
might not be the best but it works!
end result will look like this
If you create a project as a Navigation Drawer project(Navigation Drawer Activity) it will give you four XML files at the creation in your layout folder
app_bar_main
content_main
navigatin_main
activity_main
how these xmls are linked? mostly i see include tag is used
Your Activity is linked with activity_main
activity_main has the app_bar_main and navigation_view(drawer)
app_bar_main has the toolbar and content_main by default
now lets remove activity_main and set its contents directly to app bar main and use it as the main layout for Activity.
To add the drawer under tool bar
add it under the android.support.design.widget.AppBarLayout because is contains the toolbar and its should be on top.
here is an example of 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="none.navhead.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
//------ taken from activity_main
// content main
<include layout="#layout/content_main" />
// you need this padding
<android.support.v4.widget.DrawerLayout
android:paddingTop="?attr/actionBarSize"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
p.s you can set app_bar_main.XML to setContentView of your activity
just play around there are plenty of ways ;)

this is my layouts and work perfect:
activity_main:
<?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">
<!-- AppBarLayout should be here -->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
<!-- add app:layout_behavior="#string/appbar_scrolling_view_behavior" -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
app_bar_main.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:fitsSystemWindows="true"
tools:context=".activty.MainActivity">
<include layout="#layout/content_main"/>
</FrameLayout>
result:
Bellow toolbar

If you are using custom toolbar then use the drawer layout in this way..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- drawer view -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start">
....
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
and if you are not using custom toolbar then you have to set margin top to the drawer layout..
android:layout_marginTop ="?android:attr/actionBarSize"

<?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:fitsSystemWindows="false"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

An Easy and Good solution is set fitsSystemWindows=false for
android.support.v4.widget.DrawerLayout
that has id as
android:id="#+id/drawer_layout"
And for navigationView set layout_marginTop as ?attr/actionBarSize that would get the actionbar size and set it as margin
Here is complete code of activity_main.xml that has both the changes listed above.