I'm trying to make the navigation drawer over the action bar when it was slide to the right like this app:
[Removed]
This is my main activity's layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
...
</RelativeLayout>
<fragment android:name="com...."
android:layout_gravity="start"
android:id="#id/navigation"
android:layout_width="#dimen/navigation_menu_width"
android:layout_height="fill_parent" />
</android.support.v4.widget.DrawerLayout>
Some other questions on stackoverflow are similar such as this question but all answers are recommend to use sliding menu lib. But this app they still use android.support.v4.widget.DrawerLayout and they succeed. Don't ask me how I know they use the standard navigation drawer but I sure about it.
Would be really appreciate for your helps.
HERE IS THE FINAL SOLUTION: many thanks to #Peter Cai THIS WORKS PERFECTLY.
https://github.com/lemycanh/DrawerOnTopActionBar
I have a tiny "trick" learnt from https://github.com/jfeinstein10/SlidingMenu to implement the effect you required.
You only need to remove the first child of the window's decor view, and add the first child to your drawer's content view. After that, you only need to add your drawer to the window's decor view.
Below is some detailed steps for you to do that.
First, create a xml named "decor.xml" or anything you like. Only put the DrawerLayout and the drawer in. The "FrameLayout" below is just a container. We will use it to wrap your activity's content.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
<FrameLayout android:id="#+id/container"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<fragment android:name="com...."
android:layout_gravity="start"
android:id="#id/navigation"
android:layout_width="#dimen/navigation_menu_width"
android:layout_height="fill_parent" />
</android.support.v4.widget.DrawerLayout>
and then remove the DrawerLayout in your main layout. Now the layout of your main activity should look like
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
...
</RelativeLayout>
we assume that the main activity's layout is named "main.xml".
in your MainActivity, write as the following:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Inflate the "decor.xml"
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
DrawerLayout drawer = (DrawerLayout) inflater.inflate(R.layout.decor, null); // "null" is important.
// HACK: "steal" the first child of decor view
ViewGroup decor = (ViewGroup) getWindow().getDecorView();
View child = decor.getChildAt(0);
decor.removeView(child);
FrameLayout container = (FrameLayout) drawer.findViewById(R.id.container); // This is the container we defined just now.
container.addView(child);
// Make the drawer replace the first child
decor.addView(drawer);
// Do what you want to do.......
}
Now you've got a DrawerLayout which can slide over the ActionBar. But you might find it covered by status bar. You might need to add a paddingTop to the Drawer in order to fix that.
UPDATE: How to overlay the actionbar with nav drawer. (With the new Toolbar)
Use these in your dependencies in your build.gradle
compile 'com.android.support:appcompat-v7:21.0.0'
compile 'com.android.support:support-v4:21.0.0'
This as your drawerlayout
<!-- 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">
<LinearLayout
android:id="#+id/layout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"/>
</LinearLayout>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/list_background"
/>
</android.support.v4.widget.DrawerLayout>
Make new toolbar.xml file in your layout folder.
<?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_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Go to you activity which extend the navigation drawer.
and add this after SetContentView()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Don't forget to extend your theme NoActionBar in your values folder.
<style name="Theme.Whtsnxt" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="windowActionModeOverlay">true</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorPrimary">#color/splashscreen</item>
<item name="colorPrimaryDark">#color/holo_blue_light</item>
<item name="android:windowBackground">#color/white</item>
<item name="android:colorBackground">#color/white</item>
</style>
If you do not want to use a lib or this hack:
Extend "Theme.AppCompat.NoActionBar"
Move the first Element of your DrawerLayout into a LinearLayout.
Add a Toolbar to this LinearLayout.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
in Activity add following line after setContentView
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
now it should work.
I have posted a trick that makes this possible in prior Android L versions.
You can find my solution in this post. Hope it can be useful to someone.
Related
Have upgraded app to use Material Design - Theme.AppCompat.Light.NoActionBar, Toolbar instead of ActionBar etc..
And have a problem.
Bottom content become to be hidden under soft NavigationBar (see picture below) on devices with APi >= 21
Have found solution to fix this:
in values-v21/styles.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorPrimaryDark">#color/green</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</styles>
if option <item name="android:windowDrawsSystemBarBackgrounds">false</item> - bottom content is visible, but statusbar become completely black. I cant change color to colorPrimaryDark (green in my case)
if option <item name="android:windowDrawsSystemBarBackgrounds">true</item> - bottom content is invisible, and statusbar is green, as expected.
I want to have statusbar colored(green) and visible bottom content..
Probably, issue is with toolbar. Is it pushes content down?
Any suggestions?
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
UPDATE:
As suggested #azizbekian, I've replaced container for fragmets to CoordinatorLayout(before FrameLayout) and applied android:fitsSystemWindows="true"
In this case bottom panel is visible, but not at the bottom..
Goal is to keep buttons athe bottom...
<?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">
<include
layout="#layout/toolbar"/>
<!-- The main content view -->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/content"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
layout of the screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<FocusableScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/order_editor_layout"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/o_e_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
</FocusableScrollView>
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/oe_bottom_pane"/>
</LinearLayout>
Here is result:
UPDATE#2
Activity Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ActionBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- The main content view -->
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
Replaced LinearLayour with CoordinatorLayout as root for activity.
As root element for content I've keep FrameLayout.
Applied android:fitsSystemWindows="true" to CoordinatorLayout.
This way, all content was slightly moved up and part of placed below the toolbar(you can see on image below - top elements are circle with + and - symbold. But on previous images there are text on the top.) Regarding bottom elements (buttons panel) - still placed below navigation bar but also slightly moved up. I've marked android:background="#color/red" to easier recognize position of this panel.
Seems, we are on the right way. All we need - to resolve problem - why content moved below the toolbar.. If tolbar will be top ui elemnt, buttons will be visible..
Apply android:fitsSystemWindows="true" to your root view.
See this post for detailed explanation.
1
I´m trying to use CollapsingToolbarLayout with a ScrollView but I do not why it doesn't work. I try this:
<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/appBarLayout"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways"></include>
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:background="#color/white"></com.github.mikephil.charting.charts.LineChart>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/nested_scroll_view" />
</android.support.design.widget.CoordinatorLayout>
my nested scrollview that its bhavior set to appbar_scrolling_view_behavior
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/scroll_view_aba"/>
<include layout="#layout/scroll_view_aci"/>
<include layout="#layout/scroll_view_aci_reduced"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
my nestedScrollView is scrolled but the collapsing toolbar is pinned!
make sure you are using toolbar as actionbar
To use Toolbar as an ActionBar, first ensure the AppCompat-v7 support library is added to your application build.gradle (Module:app) file:
dependencies {
...
compile 'com.android.support:appcompat-v7:23.1.0'
}
Second, let's disable the theme-provided ActionBar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or the light variant) within the res/styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>
Now you need to add a Toolbar to your Activity layout file. One of the biggest advantages of using the Toolbar widget is that you can place the view anywhere within your layout. Below we place the toolbar at the top of a LinearLayout like the standard ActionBar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<!-- Layout for content is here. This can be a RelativeLayout -->
</LinearLayout>
Note: You'll want to add android:fitsSystemWindows="true" to the parent layout of the Toolbar to ensure that the height of the activity is calculated correctly.
As Toolbar is just a ViewGroup and can be styled and positioned like any other view. Note that this means if you are in a RelativeLayout, you need to ensure that all other views are positioned below the toolbar explicitly. The toolbar is not given any special treatment as a view.
Next, in your Activity or Fragment, set the Toolbar to act as the ActionBar by calling the setSupportActionBar(Toolbar) method:
Note: When using the support library, make sure that you are importing android.support.v7.widget.Toolbar and not android.widget.Toolbar.
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
public class MyActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
}
// Menu icons are inflated just as they were with actionbar
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
Next, we need to make sure we have the action items listed within a menu resource file such as res/menu/menu_main.xml which is inflated above in onCreateOptionsMenu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/miCompose"
android:icon="#drawable/ic_compose"
app:showAsAction="ifRoom"
android:title="Compose">
</item>
<item
android:id="#+id/miProfile"
android:icon="#drawable/ic_profile"
app:showAsAction="ifRoom|withText"
android:title="Profile">
</item>
</menu>
From this point on, all menu items are displayed in your Toolbar, populated via the standard options menu callbacks.
Also make sure that the CoordinatorLayout is the main layout container.
<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="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CoordinatorLayout>
I found my answer
in my toolbar XML file ,layout_height is set to "wrap_content". I set it to "?attr/actionBarSize" and CollapsingToolbarLayout scrolled charmly
This is the issue I am encountering
On pre-lollipop devices I have the following issue
On Lollipop and Marshmallow devices everything appears fine
I am trying to create the translucent status bar effect when opening the navigation drawer.
On Marshmallow and lollipop devices this is working fine.
Here is my code
activity_base.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle" />
<FrameLayout
android:id="#+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<include layout="#layout/view_navigation_drawer_layout" />
</android.support.v4.widget.DrawerLayout>
view_navigation_drawer_layout.xml
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header" />
<ListView
android:id="#+id/lst_menu_items"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Note that I do the above because of the answer to this question NavigationView and custom Layout
Notice that both layouts have the android:fitsSystemWindows="true"
I thought maybe its because I include the layout so I tried copying the whole layout into the activity layout. Did not help
I also have this styles xml file in my values-v19 directory (for KitKat and above)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="MaterialDesign">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
I made a solution to this issue. However, my solution requires a BaseActivity that hijacks the layout as stated in this blog post http://mateoj.com/2015/06/21/adding-toolbar-and-navigation-drawer-all-activities-android/
here is my code
public class BaseActivity extends AppCompatActivity {
#Override
public void setContentView(int layoutResID) {
ViewGroup baseView = (ViewGroup) getLayoutInflater().inflate(R.layout.activity_base_with_drawer);
FrameLayout activityContainer = (FrameLayout) baseView.findViewById(R.id.activity_content);
getLayoutInflater().inflate(layoutResID, activityContainer, true);
super.setContentView(layoutResID);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (useToolbar()) { //Does the activity have a toolbar?
toolbar.setFitsSystemWindows(true); //toolbar will stretch underneath the status bar and because it naturally has a semi translucent background, it will assume a darker color of the toolbar which is usually the color primary.
setSupportActionBar(toolbar); //Set the toolbar
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
} else {
toolbar.setVisibility(View.GONE);
activityContainer.setFitsSystemWindows(true); //No toolbar so we set the container to have the fitsSystemWindow attribute to ensure contents do not overlay the system window such as status bar and navigation bar.
TypedValue outValue = new TypedValue();
boolean doesThemeHaveTranslucentWindow = getTheme().resolveAttribute(android.R.attr.windowIsTranslucent, outValue, true); //Check if the current activity theme has translucent window, this includes SearchActivity
if (!doesThemeHaveTranslucentWindow) { //If it does not then set the container background to colour primary to have the same effect as the toolbar being there and avoid a white status bar. We do not want to do this for translucent windows otherwise they would not be see through
activityContainer.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
}
}
}
And this is the layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle" />
<FrameLayout
android:id="#+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<include layout="#layout/view_navigation_drawer_layout" />
</android.support.v4.widget.DrawerLayout>
FitsSystemWindows is no longer set in any of the XML layouts. This is done in the setContentViewMethod of the BaseActivity class.
If the activity does not have a toolbar, the activity container has the fitsSystemWindow attribute set to true otherwise, the toolbar has it applied.
If the activity does not have a toolbar, its container layout has a background colour set to the colour primary.
Why I do this is because when you set fitsSystemWindows on your toolbar it stretches underneath the status bar and because the status bar naturally has a semi translucent background, it will assume a darker color of the toolbar which is usually the color primary so we do this for the activity container to have the same effect.
Now there is a use-case I had in my app where I had an activity with a transparent window background which I check. If not true, the activity container has this colour set.
Not sure if its the best solution but its working well for me so far on Marshmallow, pre-lollipop and pre-KitKat too :P . Hope it helps out others.
I am using Androidhibe NavigationDrawer and SwipeTab with Custom Action Bar as seen here:
http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
The NavigationDrawer is shown over the ViewPager (below the ActionBar) but I would like it to show on top of the ActionBar. How can I achieve that affect?
You can use Toolbar instead of ActionBar to achieve that.
Here is a blog post that may help you from switching over to Toolbar.
The XML for your MainActivity would look something like this:
<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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<!-- 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"/>
</LinearLayout>
<!-- 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="com.example.app.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
The XML for my Toolbar looked like this:
<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"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"/>
I struggled with it at first, but once I switched over to using Toolbar the Navigation Drawer overlayed the Toolbar just like I wanted. If the blog post and sample code here is not enough, just let me know and I can continue to help you through it.
I am not getting it which is ActionBar and which is ToolBar.
How do i implement this?
Any answers appreciated..Thanks in Advance.
In this example, the blue toolbar is an extended height, overlaid by the screen content and provides the navigation button. There is another toolbar used in the detail view. I have circled both Toolbars below.
Haven't tried this yet but it should work. Here is your layout :
<?xml version="1.0" encoding="utf-8"?>
<!-- The important thing to note here is the added fitSystemWindows -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your content -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Your main ActionBar (with the blue background).
The height is 56 + 72dp according to specs -->
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="128dp" />
<!-- The white sheet -->
<FrameLayout
android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
android:layout_marginTop="56dp"
android:background="#android:color/white">
<!-- This is the secondary toolbar, 72dp also according to specs -->
<android.support.v7.widget.Toolbar
android:id="#+id/secondary_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:minHeight="72dp" />
<!-- Your main frame container where you put your fragment -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</RelativeLayout>
<!-- Your drawer view. This can be any view, LinearLayout
is just an example. As we have set fitSystemWindows=true
this will be displayed under the status bar. -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
This will include a NavigationDrawer that goes on top of the ActionBar (for more information about this, read this answer by Chris Banes), and the layout you're requesting.
Then in your Fragment/Activity :
public void onCreate(Bundled savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
// Set the main Toolbar as the ActionBar
Toolbar mainToolbar = (...) findViewById(R.id.main_toolbar);
setSupportActionBar(mainToolbar);
// Now retrieve the DrawerLayout so that we can set the status bar color.
// This only takes effect on Lollipop, or when using translucentStatusBar
// on KitKat.
DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
drawerLayout.setStatusBarBackgroundColor(yourChosenColor);
// Use the secondary toolbar in Standalone mode. This means you don't set is as the ActionBar
// but it also implies you have to handle the Toolbar items yourslef
Toolbar secondaryToolbar = (...) findViewById(R.id.secondary_toolbar);
// For example, to set an OnMenuItemClickListener to handle menu item clicks :
toolbar.setOnMenuItemClickListener(
new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// To inflate a menu to be displayed in the toolbar :
toolbar.inflateMenu(R.menu.your_toolbar_menu);
// ...
}
I think this should do it (don't forget to replace hard-coded values with dimensions to adapt to the device size).
For more information, take a look at the AppCompat v21 doc or at Chris Banes' post on the AppCompat v21.