I'm trying to integrate a navigation drawer with my relative layout (which holds my activity content) and my toolbar. As you can see below, the toolbar is being duplicated within the interior relative layout as well as existing outside of it.
The highlighted portion is the relative layout.
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/landing_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/frontPageBGColor">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<android.support.v4.widget.DrawerLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
//Content Content Content
</RelativeLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:layout_height="match_parent"
android:layout_width="280dp"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
android:name="com.xxxxxxxx.chessgame.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
in your styles, you need to inherit the app theme from .NoTitleBar to remove the system provided action bar
like this
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
explained in detail here:
http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html
Related
I'm using navigation bar to switch over my fragments, but the fragment content is always being overlapped by the actionbar, how to avoid this?
I've tried to remove lines android:fitsSystemWindows="true" but it did not change anything.
<?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">
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<include
layout="#layout/app_bar_violation_browser"
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_violation_browser"
app:menu="#menu/activity_violation_browser_drawer" />
</android.support.v4.widget.DrawerLayout>
Here i placed 4 text rows
But when i run it on my device it looks like this...
Because you have 3 views inside the <android.support.v4.widget.DrawerLayout>, only the first one is considered as content and the other two are considered as drawers.
Surround the FrameLayout with id frame_container and the include with layout app_bar_violation_browser by another FrameLayout.
Try to add the following code to your fragment layout:
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
Especially, marginTop!
And, use that <include like this and do your stuffs on the referring layout:
<include layout="#layout/app_bar_violation_browser" />
And delete that FrameLayout and use it in your Include.
That should work then.
I am developing an app that will need ActionBar tabs as well as a navigation drawer. It seems, however that these two conflict with each other in layout. For a Navigation Drawer, I need to have a DrawerLayout as the root layout and then two other views for the drawer and content. This is really easy to, and works well. The code to do that is:
<?xml version="1.0" encoding="utf-8"?>
<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/navdrawer"
tools:context="io.github.ncca_fbla.fabric.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
I can tell it works without even running or dong any other work:
The issue is that I need a TabLayout, ViewPager and a custom ToolBar all of which require a CoordinatorLayout as the root element to work properly. Is there anyway I can get the three views I need to work properly, keeping the DrawerLayout as the root? I have tried just adding them without a CoordinatorLayout as the root view, and the toolbar does not display properly. Basically, I am trying to combine, the above code with something like:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coord"
tools:context="io.github.ncca_fbla.fabric.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
You can do it cleanly by storing your coordinator layout in a separate file named coordinator_tabs and including it in the DrawerLayout. Your file would then look like this:
<?xml version="1.0" encoding="utf-8"?>
<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/navdrawer"
tools:context="io.github.ncca_fbla.fabric.MainActivity">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
If you're using Android Studio, you can see an example of this by right-clicking on a java folder and selecting New->Activity->Navigation Drawer Activity
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main_drawer">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#color/octo"/>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="am.octogr.app.octocopy.NavigationDrawerFragment"
tools:layout="#layout/main_drawer_listview" />
</android.support.v4.widget.DrawerLayout>
Hi, how can I put a Toolbar within this layout?
This layout for Navigation Drawer.
I've tried some code but still not working.
1. Under FrameLayout: Toolbar did not appear.
2. Below FrameLayout: Toolbar appear but content did not display.
3. Have DrawerLayout in a LinearLayout but my fragment seems didn't work well.
Thank you in advance.
Let me try to explain.
Android draws Views from top to down so; A-B-C- are you 3 respective Views in your DrawerLayout. now A being the Toolbar is drawn first with params width fit-to-the-overallwidth and height fit the content itself, B is drawn with width fit-to-the-overallwidth and height fit-to-the-overallheight, etc etc. that means your FrameLayout is drawn second in the drawing successions and on top of your Toolbar but since its covered you do not see that it is there, if you bring it below, your Toolbar is drawn second in succession hence you see it.
i hope you can deduct a solution from it now.
Have the toolbar in another layout which would be your main content view
<!-- The main content view -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#color/octo"/>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
Try this :
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".main_drawer">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
>
<include
android:id="#+id/toolbar"
layout="#layout/tool_bar"
/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="am.octogr.app.octocopy.NavigationDrawerFragment"
tools:layout="#layout/main_drawer_listview" />
<!-- Your Content -->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
with a separate tool_bar.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/octo"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
Don't forget to Initialize your Toolbar and set it as the ActionBar:
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
With a minSdkVersion of 14
Try this. It works fine for me.
Use this XML for your drawer activity.
<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_layout" />
<!-- The navigation drawer -->
<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_drawer"
app:menu="#menu/activity_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_layout.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.rsa.myapplication.DrawerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/> <!--This line is important-->
</android.support.design.widget.CoordinatorLayout>
you can find recent documentation about it on appbar.
They missed to include some code to make it work, here they are :
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;
}
where R.menu.menu is your xml file in your project's res/menu/ directory. Paste above code on your activity which implement the Toolbar.
I am implementing Material Design into my app that has a navigation drawer. Amongst all the differing implementations of the Nav. Drawer and Toolbar with Material Design (see this post); I have chosen to keep the app feel similar to the ICS/Halo design and have the Nav Drawer slide out under the Toolbar. The problem is that the Toolbar dims with the shadow like the rest of the activity when the nav drawer is open. How would I keep the Toolbar from darkening? If you see the image in the post I linked above I am after #6, 3 or 5, but my looks more like #9 now.
Example (from post above):
What I'm after (no shadow on Toolbar):
What I currently get (Toolbar darkens when nav drawer is open):
Here is the code for my main activity's XML:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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:context="com.funkhaus.navdrawer.app.MainActivity">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar; Added for Material Design -->
<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" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize" />
</FrameLayout>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:layout_gravity="start"
android:name="com.funkhaus.brewwerks.NavigationDrawerFragment" />
The notable part being that the <FrameLayout> whose ID is 'container' is where all my fragments are inflated, and its marginTop was set to the height of the Toolbar so its content would be below the Toolbar. Similarly, the Navigation Drawer fragment also has its marginTop set to the height of the Toolbar so it slides out below it.
Thanks to #alanv I fixed my issue.
My post above shows my activity_main.xml code; I simplified it to this, removing the Toolbar view and removing the marginTop formatting:
<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:fitsSystemWindows="true"
tools:context="com.funkhaus.navdrawer.app.MainActivity">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="start"
android:name="com.funkhaus.brewwerks.NavigationDrawerFragment" />
</android.support.v4.widget.DrawerLayout>
I created a toolbar.xml, which I now setContentView() on in my main Activity that <include>'s the activity_main.xml above:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar; Added for Material Design -->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<include android:id="#+id/drawer_layout" layout="#layout/activity_main" />
</LinearLayout>
Finally, in my Activity's onCreate() I setContentView() on the toolbar.xml:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.toolbar);
// Rest of code here....
You do it in the same xml like this, This is for underlying toolbar navigation like play store app design
<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"
tools:context="com.ccas.roadsideconnect.BaseFragmentActivity">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/img_actionbar_white_sm"
android:gravity="top"
android:minHeight="58.0dip"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar"
/>
</LinearLayout>
</FrameLayout>
The below code is for overlying toolbar navigation like Gmail APP design.
<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"
tools:context="com.ccas.roadsideconnect.BaseFragmentActivity">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/img_actionbar_white_sm"
android:gravity="top"
android:minHeight="58.0dip"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar"
/>
</LinearLayout>
<FrameLayout android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
How to make the drawer layout be below the actionbar/toolbar? I'm using v7:21 app compat library with the new ToolBar view.
Examples that I see looks like
<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">
<!-- drawer content -->
</LinearLayout>
<!-- normal content view -->
<LinearLayout
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" />
<!-- The rest of content view -->
</LinearLayout>
But then the toolbar will be hidden by the drawer, which makes an animated hamburger icon (like v7.ActionBarDrawerToggle) useless since it will not be visible below the drawer, but I do want to use the new ToolBar view to support Material theme better.
So how to accomplish that? Is it possible to have DrawerLayout as a non top-level view?
<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">
<!-- 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">
<!-- drawer content -->
</LinearLayout>
<!-- normal content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The rest of content view -->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
i don't think you can when using custom toolbar
but a work around would be to set a top_margin to drawer.
(the same thing on google play store!)
<!-- drawer view -->
<LinearLayout
android:layout_marginTop="?attr/actionBarSize"
...
if you found a better solution tell me too ;)
Change Your drawer layout style like as below
RelativeLayout
----Toolbar
----DrawerLayout
---ContentView
---DrawerList
My solution: generate template with Android Studio 2.1.2, drawer template:
Only need three changes: set margin top in view NavigationView and delete overloap statusbar in style.xml
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
android:fitsSystemWindows="false"
layout main.xml set margin top get size actionbar value
android:layout_marginTop="?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:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="false"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
I had issues getting this to work, and it finally displayed properly. Here is the layout I used:
<LinearLayout...[add your namespaces, etc]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar [your custom toolbar] />
<android.support.v4.widget.DrawerLayout [your drawer layout] />
<LinearLayout>
[content here]
</LinearLayout>
<android.support.design.widget.NavigationView />
</LinearLayout>
Be careful moving the design widgets around, if one is under the wrong root tag, you'll get a
"no layout_gravity_left"
exception.
I have found a simpler solution:
Set the DrawerLayout and NavigationView attribute:
android:fitsSystemWindows="false"
and then give marginTop to navigation view as
"?actionBarSize"
maybe your statusbar background will become transparent in that case in styles.xml add
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
attribute to get back the normal color or any other color you want...
Here is the Kotlin solution:
In the layout file containing your DrawerLayout...
Add android:keepScreenOn="true" to the DrawerLayout
Add android:layout_marginTop="?android:attr/actionBarSize" to the NavigationView
The full XML piece should look like this:
<com.mullr.neurd.Miscellaneous.CustomDrawerLayout
android:id="#+id/clipped_drawer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keepScreenOn="true"
tools:openDrawer="start"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="?android:attr/actionBarSize"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</com.mullr.neurd.Miscellaneous.CustomDrawerLayout>
That should do it (ignore my clipped nav drawer).