How do I use DrawerLayout to display over the ActionBar Toolbar and under the status bar

Question

I ve seen in the new material design Side Nav spec that you can display the drawer over the action bar and behind the status bar  How can I implement this

User · Answer

Make it work  in values-v21 styles or theme xml needs to use this attribute    lt item name  android windowTranslucentStatus  gt true lt  item gt   That make the magic

User · Answer

I am Using Design Support Library  And just by using custom theme I achived transparent Status Bar when Opened Navigation Drawer        lt style name  NavigationStyle  parent  Theme AppCompat Light NoActionBar  gt       lt  -- Customize your theme here  -- gt       lt item name  colorPrimary  gt  color primaryColor lt  item gt       lt item name  colorPrimaryDark  gt  color primaryColorDark lt  item gt        lt  -- To Make Navigation Drawer Fill Status Bar and become Transparent Too -- gt       lt item name  android windowDrawsSystemBarBackgrounds  gt true lt  item gt       lt item name  android statusBarColor  gt  android color transparent lt  item gt    lt  style gt    Finally add theme in Manifest File   lt activity                        android theme   style NavigationStyle  gt    lt  activity gt    Do not forget to use the property  android fitsSystemWindows  true  in  DrawerLayout

User · Answer

New functionality in the framework and support libs allow exactly this  There are three  pieces of the puzzle     Using Toolbar so that you can embed your action bar into your view hierarchy  Making DrawerLayout fitsSystemWindows so that it is layed out behind the system bars  Disabling Theme Material s normal status bar coloring so that DrawerLayout can draw there instead    I ll assume that you will use the new appcompat   First  your layout should look like this    lt  -- The important thing to note here is the added fitSystemWindows -- gt   lt 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      android fitsSystemWindows  true  gt        lt  -- Your normal content view -- gt       lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical  gt            lt  -- We use a Toolbar so that our drawer can be displayed              in front of the action bar -- gt           lt 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    gt            lt  -- The rest of your content view -- gt        lt  LinearLayout gt        lt  -- 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  -- gt       lt LinearLayout         android layout width  304dp          android layout height  match parent          android layout gravity  left start          android fitsSystemWindows  true  gt            lt  -- Your drawer content -- gt        lt  LinearLayout gt    lt  android support v4 widget DrawerLayout gt    Then in your Activity Fragment   public void onCreate Bundled savedInstanceState        super onCreate savedInstanceState           Your normal setup  Blah blah             As we re using a Toolbar  we should retrieve it and set it        to be our ActionBar     Toolbar toolbar         findViewById R id my awesome toolbar       setSupportActionBar toolbar           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       Then you need to make sure that the DrawerLayout is visible behind the status bar  You do that by changing your values-v21 theme   values-v21 themes xml   lt style name  Theme MyApp  parent  Theme AppCompat Light NoActionBar  gt       lt item name  android windowDrawsSystemBarBackgrounds  gt true lt  item gt       lt item name  android statusBarColor  gt  android color transparent lt  item gt       lt item name  android windowTranslucentStatus  gt true lt  item gt   lt  style gt    Note  If a  lt fragment android name  fragments NavigationDrawerFragment  gt  is used instead of   lt LinearLayout     android layout width  304dp      android layout height  match parent      android layout gravity  left start      android fitsSystemWindows  true  gt        lt  -- Your drawer content -- gt    lt  LinearLayout gt    the actual layout  the desired effect will be achieved if you call fitsSystemWindows boolean  on a view that you return from onCreateView method    Override public View onCreateView LayoutInflater inflater                            ViewGroup container                           Bundle savedInstanceState        View mDrawerListView   inflater inflate          R layout fragment navigation drawer  container  false       mDrawerListView setFitsSystemWindows true       return mDrawerListView

User · Answer

This is the most simple  and it worked for me   In the values-21    lt resources gt       lt style name  AppTheme  parent  AppTheme Base  gt                       lt item name  android windowTranslucentStatus  gt true lt  item gt       lt  style gt       lt dimen name  topMargin  gt 25dp lt  dimen gt   lt  resources gt    In the values    lt resources gt       lt dimen name  topMargin  gt 0dp lt  dimen gt   lt  resources gt    And set to your toolbar  android layout marginTop   dimen topMargin

User · Answer

With the release of the latest Android Support Library  rev 22 2 0  we ve got a Design Support Library and as part of this a new view called NavigationView  So instead of doing everything on our own with the ScrimInsetsFrameLayout and all the other stuff we simply use this view and everything is done for us   Example  Step 1  Add the Design Support Library to your build gradle file  dependencies          Other dependencies like appcompat     compile  com android support design 22 2 0      Step 2  Add the NavigationView to your DrawerLayout    lt 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 drawer layout       android layout width  match parent       android layout height  match parent       android fitsSystemWindows  true  gt   lt  -- this is important -- gt         lt  -- Your contents -- gt         lt android support design widget NavigationView          android id    id navigation           android layout width  wrap content           android layout height  match parent           android layout gravity  start           app menu   menu navigation items    gt   lt  -- The items to display -- gt    lt  android support v4 widget DrawerLayout gt    Step 3  Create a new menu-resource in  res menu and add the items and icons you wanna display    lt menu xmlns android  http   schemas android com apk res android  gt        lt group android checkableBehavior  single  gt           lt item             android id    id nav home              android icon   drawable ic action home              android title  Home    gt           lt item             android id    id nav example item 1              android icon   drawable ic action dashboard              android title  Example Item  1    gt       lt  group gt        lt item android title  Sub items  gt           lt menu gt               lt item                 android id    id nav example sub item 1                  android title  Example Sub Item  1    gt           lt  menu gt       lt  item gt    lt  menu gt    Step 4  Init the NavigationView and handle click events   public class MainActivity extends AppCompatActivity        NavigationView mNavigationView      DrawerLayout mDrawerLayout          Other stuff      private void init             mDrawerLayout    DrawerLayout  findViewById R id drawer layout           mNavigationView    NavigationView  findViewById R id navigation view           mNavigationView setNavigationItemSelectedListener new NavigationView OnNavigationItemSelectedListener                  Override             public boolean onNavigationItemSelected MenuItem menuItem                    mDrawerLayout closeDrawers                    menuItem setChecked true                   switch  menuItem getItemId                          case R id nav home                             TODO - Do something                         break                         TODO - Handle other items                                   return true                                      Step 5  Be sure to set android windowDrawsSystemBarBackgrounds and android statusBarColor in values-v21 otherwise your Drawer won t be displayed  under  the StatusBar   lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt       lt  -- Other attributes like colorPrimary  colorAccent etc  -- gt       lt item name  android windowDrawsSystemBarBackgrounds  gt true lt  item gt       lt item name  android statusBarColor  gt  android color transparent lt  item gt   lt  style gt    Optional Step  Add a Header to the NavigationView  For this simply create a new layout and add app headerLayout   layout my header layout  to the NavigationView   Result    Notes   The highlighted color uses the color defined via the colorPrimary attribute The List Items use the color defined via the textColorPrimary attribute The Icons use the color defined via the textColorSecondary attribute   You can also check the example app by Chris Banes which highlights the NavigationView along with the other new views that are part of the Design Support Library  like the FloatingActionButton  TextInputLayout  Snackbar  TabLayout etc

User · Answer

Instead of using the ScrimInsetsFrameLayout    Isn t it easier to just add a view with a fixed height of 24dp and a background of primaryColor   I understand that this involves adding a dummy view in the hierarchy  but it seems cleaner to me   I already tried it and it s working well    lt android support v4 widget DrawerLayout xmlns android  http   schemas android com apk res android  xmlns tools  http   schemas android com tools  android id    id activity base drawer layout  android layout width  match parent  android layout height  match parent  gt        lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical  gt            lt  -- THIS IS THE VIEW I M TALKING ABOUT    -- gt           lt View             android layout width  match parent              android layout height  24dp              android background   attr colorPrimary    gt            lt android support v7 widget Toolbar             android id    id activity base toolbar              android layout width  match parent              android layout height   attr actionBarSize              android background   attr colorPrimary              android elevation  2dp              android theme   style ThemeOverlay AppCompat Dark    gt            lt FrameLayout             android id    id activity base content frame layout              android layout width  match parent              android layout height  match parent    gt        lt  LinearLayout gt        lt fragment         android id    id activity base drawer fragment          android name  com myapp drawer ui DrawerFragment          android layout width  240dp          android layout height  match parent          android layout gravity  start          android elevation  4dp          tools layout   layout fragment drawer    gt    lt  android support v4 widget DrawerLayout gt

User · Answer

All answers mentioned here are too old and lengthy The best and short solution that work with latest Navigationview is   Override public void onDrawerSlide View drawerView  float slideOffset        super onDrawerSlide drawerView  slideOffset        try             int currentapiVersion   android os Build VERSION SDK INT          if  android os Build VERSION SDK INT  gt   android os Build VERSION CODES LOLLIPOP                  Do something for lollipop and above versions          Window window   getWindow                clear FLAG TRANSLUCENT STATUS flag          window clearFlags WindowManager LayoutParams FLAG TRANSLUCENT STATUS               add FLAG DRAWS SYSTEM BAR BACKGROUNDS flag to the window         window addFlags WindowManager LayoutParams FLAG DRAWS SYSTEM BAR BACKGROUNDS               finally change the color to any color with transparency           window setStatusBarColor getResources   getColor R color colorPrimaryDarktrans            catch  Exception e             Crashlytics logException e              this is going to change your status bar color to transparent when you open the drawer  Now when you close the drawer you need to change status bar color again to dark So you can do it in this way           public void onDrawerClosed View drawerView            super onDrawerClosed drawerView           try       if  android os Build VERSION SDK INT  gt   android os Build VERSION CODES LOLLIPOP          Do something for lollipop and above versions      Window window   getWindow            clear FLAG TRANSLUCENT STATUS flag      window clearFlags WindowManager LayoutParams FLAG TRANSLUCENT STATUS           add FLAG DRAWS SYSTEM BAR BACKGROUNDS flag to the window     window addFlags WindowManager LayoutParams FLAG DRAWS SYSTEM BAR BACKGROUNDS           finally change the color again to dark     window setStatusBarColor getResources   getColor R color colorPrimaryDark           catch  Exception e        Crashlytics logException e                                                 and then in main layout add a single line i e              android fitsSystemWindows  true    and your drawer layout will look like               lt 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 fitsSystemWindows  true              android layout width  match parent              android layout height  match parent  gt    and your navigation view will look like       lt android support design widget NavigationView         android id    id navigation view          android layout height  match parent          android layout width  wrap content          android layout gravity  start          android fitsSystemWindows  true          app headerLayout   layout navigation header          app menu   menu drawer            gt    I have tested it and its fully working Hope it helps someone This may not be the best approach but it works smoothly and is simple to implement  Mark it up if it helps Happy coding

User · Answer

EDIT  The new Design Support Library supports this and the previous method is no longer required   This can now be achieved using the new Android Design Support Library   You can see the Cheesesquare sample app by Chris Banes which demos all the new features     Previous method   Since there is no complete solution posted  here is the way I achieved the desired result   First include a ScrimInsetsFrameLayout in your project        Copyright 2014 Google Inc      Licensed under the Apache License  Version 2 0  the  License      you may not use this file except in compliance with the License    You may obtain a copy of the License at         http   www apache org licenses LICENSE-2 0     Unless required by applicable law or agreed to in writing  software   distributed under the License is distributed on an  AS IS  BASIS    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND  either express or implied    See the License for the specific language governing permissions and   limitations under the License            A layout that draws something in the insets passed to      link  fitSystemWindows Rect    i e  the area above UI chrome    status and navigation bars  overlay action bars      public class ScrimInsetsFrameLayout extends FrameLayout       private Drawable mInsetForeground       private Rect mInsets      private Rect mTempRect   new Rect        private OnInsetsCallback mOnInsetsCallback       public ScrimInsetsFrameLayout Context context            super context           init context  null  0              public ScrimInsetsFrameLayout Context context  AttributeSet attrs            super context  attrs           init context  attrs  0              public ScrimInsetsFrameLayout          Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle           init context  attrs  defStyle              private void init Context context  AttributeSet attrs  int defStyle            final TypedArray a   context obtainStyledAttributes attrs                  R styleable ScrimInsetsView  defStyle  0           if  a    null                return                    mInsetForeground   a getDrawable              R styleable ScrimInsetsView insetForeground           a recycle             setWillNotDraw true               Override     protected boolean fitSystemWindows Rect insets            mInsets   new Rect insets           setWillNotDraw mInsetForeground    null           ViewCompat postInvalidateOnAnimation this           if  mOnInsetsCallback    null                mOnInsetsCallback onInsetsChanged insets                     return true     consume insets             Override     public void draw Canvas canvas            super draw canvas            int width   getWidth            int height   getHeight            if  mInsets    null  amp  amp  mInsetForeground    null                int sc   canvas save                canvas translate getScrollX    getScrollY                     Top             mTempRect set 0  0  width  mInsets top               mInsetForeground setBounds mTempRect               mInsetForeground draw canvas                   Bottom             mTempRect set 0  height - mInsets bottom  width  height               mInsetForeground setBounds mTempRect               mInsetForeground draw canvas                   Left             mTempRect set                  0                   mInsets top                   mInsets left                   height - mInsets bottom               mInsetForeground setBounds mTempRect               mInsetForeground draw canvas                   Right             mTempRect set                  width - mInsets right                   mInsets top  width                   height - mInsets bottom               mInsetForeground setBounds mTempRect               mInsetForeground draw canvas                canvas restoreToCount sc                         Override     protected void onAttachedToWindow             super onAttachedToWindow            if  mInsetForeground    null                mInsetForeground setCallback this                         Override     protected void onDetachedFromWindow             super onDetachedFromWindow            if  mInsetForeground    null                mInsetForeground setCallback null                                   Allows the calling container to specify a callback for custom         processing when insets change  i e  when   link  fitSystemWindows Rect          is called  This is useful for setting padding on UI elements         based on UI chrome insets  e g  a Google Map or a ListView           When using with ListView or GridView  remember to set        clipToPadding to false              public void setOnInsetsCallback OnInsetsCallback onInsetsCallback            mOnInsetsCallback   onInsetsCallback             public static interface OnInsetsCallback           public void onInsetsChanged Rect insets             Then create a styleable so that the insetForeground can be set   values attrs xml   lt declare-styleable name  ScrimInsetsView  gt       lt attr name  insetForeground  format  reference color    gt   lt  declare-styleable gt    Update your activity s xml file and make sure android fitsSystemWindows is set to true on both the DrawerLayout as well as the ScrimInsetsFrameLayout   layout activity main xml   lt android support v4 widget DrawerLayout      xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android id    id drawerLayout      android layout width  match parent      android layout height  match parent      android fitsSystemWindows  true      tools context   MainActivity  gt        lt  -- The main content view -- gt       lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical  gt            lt  -- Your main content -- gt        lt  LinearLayout gt        lt  -- The navigation drawer -- gt       lt com example app util ScrimInsetsFrameLayout          xmlns app  http   schemas android com apk res-auto          android id    id scrimInsetsFrameLayout          android layout width  320dp          android layout height  match parent          android layout gravity  start          android background   color white          android elevation  10dp          android fitsSystemWindows  true          app insetForeground   4000  gt            lt  -- Your drawer content -- gt        lt  com example app util ScrimInsetsFrameLayout gt    lt  android support v4 widget DrawerLayout gt    Inside the onCreate method of your activity set the status bar background color on the drawer layout   MainActivity java   Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main                    mDrawerLayout    DrawerLayout  findViewById R id drawerLayout       mDrawerLayout setStatusBarBackgroundColor          getResources   getColor R color primary dark        Finally update your app s theme so that the DrawerLayout is behind the status bar   values-v21 styles xml   lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt       lt item name  android windowDrawsSystemBarBackgrounds  gt true lt  item gt       lt item name  android statusBarColor  gt  android color transparent lt  item gt   lt  style gt    Result

User · Answer

The above all approaches are correct and may be working   I have created a working demo following the above guide and tested on 2 x to 5 x   You can clone from Github  The important thing to play around is in Main Activity   toolbar    Toolbar  findViewById R id toolbar   res   this getResources     this setSupportActionBar toolbar   ActionBar actionBar   getSupportActionBar    actionBar setDisplayHomeAsUpEnabled true   actionBar setHomeButtonEnabled true   if  Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP         ScrimInsetsFrameLayout scrimInsetsFrameLayout    ScrimInsetsFrameLayout              findViewById R id linearLayout       scrimInsetsFrameLayout setOnInsetsCallback this        and the call back    Override public void onInsetsChanged Rect insets        Toolbar toolbar   this toolbar      ViewGroup MarginLayoutParams lp    ViewGroup MarginLayoutParams          toolbar getLayoutParams        lp topMargin   insets top      int top   insets top      insets top    toolbar getHeight        toolbar setLayoutParams lp       insets top   top     revert     Absolutely the Theme for V21 does the magic    lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt       lt  -- API 21 theme customizations can go here  -- gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color accent material light lt  item gt       lt item name  windowActionModeOverlay  gt true lt  item gt       lt item name  android windowDrawsSystemBarBackgrounds  gt true lt  item gt       lt item name  android statusBarColor  gt  android color transparent lt  item gt       lt item name  android windowTranslucentStatus  gt true lt  item gt   lt  style gt    and the ScrimInsetsFrameLayout  Now this come more easy with new Design Support library   compile  com android support design 22 2 0    clone from  Chris Banes https   github com chrisbanes cheesesquare

User · Answer

Try with this     lt android support v4 widget DrawerLayout xmlns android  http   schemas android com apk res android  android layout width  match parent  android layout height  match parent  android id    id drawer layout  android fitsSystemWindows  true  gt     lt FrameLayout     android layout width  match parent      android layout height  match parent  gt        lt  --Main layout and ads-- gt       lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical  gt            lt FrameLayout             android id    id ll main hero              android layout width  match parent              android layout height  0dp              android layout weight  1  gt            lt  FrameLayout gt            lt FrameLayout             android id    id ll ads              android layout width  match parent              android layout height  wrap content  gt                lt View                 android layout width  320dp                  android layout height  50dp                  android layout gravity  center                  android background   ff00ff    gt           lt  FrameLayout gt         lt  LinearLayout gt        lt  --Toolbar-- gt       lt android support v7 widget Toolbar         android layout width  match parent          android layout height  wrap content          android id    id toolbar          android elevation  4dp    gt   lt  FrameLayout gt     lt  --left-- gt   lt ListView     android layout width  240dp      android layout height  match parent      android layout gravity  start      android choiceMode  singleChoice      android divider   null      android background   mipmap layer image      android id    id left drawer  gt  lt  ListView gt    lt  --right-- gt   lt FrameLayout     android layout width  240dp      android layout height  match parent      android layout gravity  right      android background   mipmap layer image  gt        lt ImageView         android layout width  match parent          android layout height  match parent          android src   mipmap ken2          android scaleType  centerCrop    gt   lt  FrameLayout gt      style     lt style name  ts theme overlay  parent  Theme AppCompat Light NoActionBar  gt       lt item name  colorPrimary  gt  color red A700 lt  item gt       lt item name  colorPrimaryDark  gt  color red1 lt  item gt       lt item name  android windowBackground  gt  color blue A400 lt  item gt   lt  style gt    Main Activity extends ActionBarActivity  toolBar    Toolbar  findViewById R id toolbar       setSupportActionBar toolBar     Now you can onCreateOptionsMenu like as normal ActionBar with ToolBar   This is my Layout    TOP     Left Drawer - Right Drawer   MID     ToolBar  ActionBar  BOTTOM  ListFragment    Hope you understand  have fun

[android] How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?

Examples related to android

Examples related to navigation-drawer

Examples related to android-appcompat

Examples related to statusbar

[android] How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?

Examples related to android

Examples related to navigation-drawer

Examples related to toolbar

Examples related to android-appcompat

Examples related to statusbar