How to implement DrawerArrowToggle from Android appcompat v7 21 library

Question

So now that Android 5 0 was released i was wondering how to implement the animated actionbar icons   This library here implements it fine for me but since the appcompat v7 library has it how can it be implemented   The library references it in themes xml    lt item name  drawerArrowStyle  gt  style Widget AppCompat DrawerArrowToggle lt  item gt    Under this style    lt style name  Base V7 Theme AppCompat  parent  Platform AppCompat  gt    UPDATE  I got this implemented using the v7 DrawerToggle  However I cannot style it  Please Help  I found the styling for it in the v7 styles base xml   lt style name  Base Widget AppCompat DrawerArrowToggle  parent    gt       lt item name  color  gt  android attr textColorSecondary lt  item gt       lt item name  thickness  gt 2dp lt  item gt       lt item name  barSize  gt 18dp lt  item gt       lt item name  gapBetweenBars  gt 3dp lt  item gt       lt item name  topBottomBarArrowSize  gt 11 31dp lt  item gt       lt item name  middleBarArrowSize  gt 16dp lt  item gt       lt item name  drawableSize  gt 24dp lt  item gt       lt item name  spinBars  gt true lt  item gt   lt  style gt    I added this to my styles and did not work  Also added to my attr xml   lt declare-styleable name  DrawerArrowToggle  gt       lt  -- The drawing color for the bars -- gt       lt attr name  color  format  color   gt       lt  -- Whether bars should rotate or not during transition -- gt       lt attr name  spinBars  format  boolean   gt       lt  -- The total size of the drawable -- gt       lt attr name  drawableSize  format  dimension   gt       lt  -- The max gap between the bars when they are parallel to each other -- gt       lt attr name  gapBetweenBars  format  dimension   gt       lt  -- The size of the top and bottom bars when they merge to the middle bar to form an arrow -- gt       lt attr name  topBottomBarArrowSize  format  dimension   gt       lt  -- The size of the middle bar when top and bottom bars merge into middle bar to form an arrow -- gt       lt attr name  middleBarArrowSize  format  dimension   gt       lt  -- The size of the bars when they are parallel to each other -- gt       lt attr name  barSize  format  dimension   gt       lt  -- The thickness  stroke size  for the bar paint -- gt       lt attr name  thickness  format  dimension   gt   lt  declare-styleable gt    But crashes and says color type error when doing so  What am i missing

User · Answer

If you are using the Support Library provided DrawerLayout as suggested in the Creating a navigation drawer training, you can use the newly added android.support.v7.app.ActionBarDrawerToggle (note: different from the now deprecated android.support.v4.app.ActionBarDrawerToggle):

shows a Hamburger icon when drawer is closed and an arrow when drawer is open. It animates between these two states as the drawer opens.

While the training hasn't been updated to take the deprecation/new class into account, you should be able to use it almost exactly the same code - the only difference in implementing it is the constructor.

User · Answer

I created a small application which had similar functionality  MainActivity  public class MyActivity extends ActionBarActivity         Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity my            DrawerLayout drawerLayout    DrawerLayout  findViewById R id drawer           android support v7 widget Toolbar toolbar    android support v7 widget Toolbar  findViewById R id toolbar           ActionBarDrawerToggle actionBarDrawerToggle   new ActionBarDrawerToggle                  this                  drawerLayout                  toolbar                  R string open                  R string close                                  public void onDrawerClosed View view                                super onDrawerClosed view                   invalidateOptionsMenu                    syncState                               public void onDrawerOpened View drawerView                                super onDrawerOpened drawerView                   invalidateOptionsMenu                    syncState                                     drawerLayout setDrawerListener actionBarDrawerToggle              Set the custom toolbar         if  toolbar    null               setSupportActionBar toolbar                      getSupportActionBar   setDisplayHomeAsUpEnabled true            actionBarDrawerToggle syncState              My XML of that Activity   lt 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      tools context   MyActivity      android id    id drawer       gt        lt  -- The main content view -- gt       lt FrameLayout         android id    id content frame          android layout width  match parent          android layout height  match parent   gt           lt include layout   layout toolbar custom   gt       lt  FrameLayout gt       lt  -- The navigation drawer -- gt       lt ListView         android layout marginTop   attr actionBarSize          android id    id left drawer          android layout width  240dp          android layout height  match parent          android layout gravity  start          android choiceMode  singleChoice          android divider   android color transparent          android dividerHeight  0dp          android background   457C50   gt     lt  android support v4 widget DrawerLayout gt    My Custom Toolbar XML   lt  xml version  1 0  encoding  utf-8   gt    lt android support v7 widget Toolbar     xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  wrap content      android id    id toolbar      android background   attr colorPrimaryDark  gt       lt TextView android text  U titel          android textAppearance   android style TextAppearance Theme          android textColor   android color white          android layout width  wrap content          android layout height  wrap content            gt   lt  android support v7 widget Toolbar gt    My Theme Style   lt resources gt       lt style name  AppTheme  parent  Base Theme AppCompat   gt        lt style name  AppTheme Base  parent  Theme AppCompat  gt           lt item name  colorPrimary  gt  color primary lt  item gt           lt item name  colorPrimaryDark  gt  color primaryDarker lt  item gt           lt item name  android windowNoTitle  gt true lt  item gt           lt item name  windowActionBar  gt false lt  item gt           lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt       lt  style gt        lt style name  DrawerArrowStyle  parent  Widget AppCompat DrawerArrowToggle  gt           lt item name  spinBars  gt true lt  item gt           lt item name  color  gt  android color white lt  item gt       lt  style gt        lt color name  primary  gt  457C50 lt  color gt       lt color name  primaryDarker  gt  580C0C lt  color gt   lt  resources gt    My Styles in values-v21   lt  xml version  1 0  encoding  utf-8   gt   lt resources gt       lt style name  AppTheme  parent  AppTheme Base  gt           lt item name  android windowContentTransitions  gt true lt  item gt           lt item name  android windowAllowEnterTransitionOverlap  gt true lt  item gt           lt item name  android windowAllowReturnTransitionOverlap  gt true lt  item gt           lt item name  android windowSharedElementEnterTransition  gt  android transition move lt  item gt           lt item name  android windowSharedElementExitTransition  gt  android transition move lt  item gt       lt  style gt   lt  resources gt

User · Answer

First  you should know now the android support v4 app ActionBarDrawerToggle is deprecated   You must replace that with android support v7 app ActionBarDrawerToggle   Here is my example and I use the new Toolbar to replace the ActionBar   MainActivity java  public class MainActivity extends ActionBarActivity        Override     protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main        Toolbar mToolbar    Toolbar  findViewById R id toolbar       setSupportActionBar mToolbar       DrawerLayout mDrawerLayout    DrawerLayout  findViewById R id drawer layout       ActionBarDrawerToggle mDrawerToggle   new ActionBarDrawerToggle          this   mDrawerLayout  mToolbar          R string navigation drawer open  R string navigation drawer close            mDrawerLayout setDrawerListener mDrawerToggle       getSupportActionBar   setDisplayHomeAsUpEnabled true       getSupportActionBar   setHomeButtonEnabled true       mDrawerToggle syncState        styles xml    lt style name  AppTheme  parent  Theme AppCompat Light  gt       lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt   lt  style gt    lt style name  DrawerArrowStyle  parent  Widget AppCompat DrawerArrowToggle  gt       lt item name  spinBars  gt true lt  item gt       lt item name  color  gt  android color white lt  item gt   lt  style gt    You can read the documents on AndroidDocument DrawerArrowToggle spinBars  This attribute is the key to implement the menu-to-arrow animation      public static int DrawerArrowToggle spinBars   Whether bars should rotate or not during transition   Must be a boolean value  either  true  or  false     So  you set this   lt item name  spinBars  gt true lt  item gt    Then the animation can be presented   Hope this can help you

User · Answer

I want to correct little bit the above code      public class MainActivity extends ActionBarActivity            Override         protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main            Toolbar mToolbar    Toolbar  findViewById R id toolbar           DrawerLayout mDrawerLayout    DrawerLayout  findViewById R id drawer layout           ActionBarDrawerToggle mDrawerToggle   new ActionBarDrawerToggle              this   mDrawerLayout  mToolbar              R string navigation drawer open  R string navigation drawer close                    mDrawerLayout setDrawerListener mDrawerToggle            getSupportActionBar   setDisplayHomeAsUpEnabled true           getSupportActionBar   setHomeButtonEnabled true           and all the other things will remain same     For those who are having problem Drawerlayout overlaying toolbar  add android layout marginTop   attr actionBarSize  to root layout of drawer content

User · Answer

To answer the updated part of your question  to style the drawer icon arrow  you have two options   Style the arrow itself  To do this  override drawerArrowStyle in your theme like so    lt style name  AppBaseTheme  parent  Theme AppCompat Light  gt       lt item name  drawerArrowStyle  gt  style MyTheme DrawerArrowToggle lt  item gt   lt  style gt   lt style name  MyTheme DrawerArrowToggle  parent  Widget AppCompat DrawerArrowToggle  gt       lt item name  color  gt  android color holo purple lt  item gt       lt  --   this will make the icon purple -- gt   lt  style gt    This is probably not what you want  because the ActionBar itself should have consistent styling with the arrow  so  most probably  you want the option two   Theme the ActionBar Toolbar  Override the android actionBarTheme  actionBarTheme for appcompat  attribute of the global application theme with your own theme  which you probably should derive from ThemeOverlay Material ActionBar ThemeOverlay AppCompat ActionBar  like so    lt style name  AppBaseTheme  parent  Theme AppCompat Light  gt       lt item name  actionBarTheme  gt  style MyTheme ActionBar lt  item gt   lt  style gt   lt style name  MyTheme ActionBar  parent  ThemeOverlay AppCompat ActionBar  gt       lt item name  android textColorPrimary  gt  android color white lt  item gt       lt  --   this will make text and arrow white -- gt       lt  -- you can also override drawerArrowStyle here -- gt   lt  style gt    An important note here is that when using a custom layout with a Toolbar instead of stock ActionBar implementation  e g  if you re using the DrawerLayout-NavigationView-Toolbar combo to achieve the Material-style drawer effect where it s visible under translucent statusbar   the actionBarTheme attribute is obviosly not picked up automatically  because it s meant to be taken care of by the AppCompatActivity for the default ActionBar   so for your custom Toolbar don t forget to apply your theme manually    lt  --inside your custom layout with DrawerLayout and NavigationView or whatever -- gt   lt android support v7 widget Toolbar                     app theme   actionBarTheme  gt    -- this will resolve to either AppCompat s default ThemeOverlay AppCompat ActionBar or your override if you set the attribute in your derived theme   PS a little comment about the drawerArrowStyle override and the spinBars attribute -- which a lot of sources suggest should be set to true to get the drawer arrow animation  Thing is  spinBars it is true by default in AppCompat  check out the Base Widget AppCompat DrawerArrowToggle Common style   you don t have to override actionBarTheme at all to get the animation working  You get the animation even if you do override it and set the attribute to false  it s just a different  less twirly animation  The important thing here is to use ActionBarDrawerToggle  it s what pulls in the fancy animated drawable

[android] How to implement DrawerArrowToggle from Android appcompat v7 21 library

Examples related to android

Examples related to android-actionbar

Examples related to android-5.0-lollipop

Examples related to android-appcompat

Examples related to drawertoggle