Navigation drawer icons (hamburger and arrow) when expanding the action view

I am using AppCompat

and Toolbar

.

I guarantee there will be an animation when the nav-drawer icon goes from hamburger to arrow or vice versa.

I use the following method on stackoverflow

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

</resources>

      

        
        
        
      

    

The animation happens when I click the navigation drawer to insert and bring up the menu. However, this is not very useful. As per the Material Design Guidelines, the navigation drawer fragment must be full height. Hence, it will block the navigation drawer icon when it starts popping up.

I'm more interested in animating my search ( action_search

) button , which acts as an action view of my toolbar.

main_menu.xml

<item android:id="@+id/action_search"
    android:title="Search me"
    android:icon="@drawable/ic_add_white_24dp"
    app:showAsAction="always|collapseActionView"
    app:actionLayout="@layout/collapsible_searchtext" />

<item android:id="@+id/action_settings" android:title="@string/action_settings"
    android:orderInCategory="100" app:showAsAction="never" />

      

        
        
        
      

    

collapsible_searchtext.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >
    <android.widget.AutoCompleteTextView
        android:id="@+id/search"
        android:dropDownWidth="match_parent"
        android:completionThreshold="1"
        android:inputType="textNoSuggestions"
        android:imeOptions="actionSearch|flagNoExtractUi"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:hint="Search stock"
        android:layout_gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

      

        
        
        
      

    

• When I click action_search
  
  , the search icon will expand to AutoCompleteTextView
  
  . At the same time, the hamburger icon will resemble an arrow icon
• When I click the arrow icon, the arrow icon will animate the hamburger icon.

I'm trying to achieve goal 1 using the following code after reading this StackOverflow question.

private void animateHamburgerToArrow() {
    ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float slideOffset = (Float) valueAnimator.getAnimatedValue();
            actionBarDrawerToggle.onDrawerSlide(drawerLayout, slideOffset);
        }
    });
    anim.setInterpolator(new DecelerateInterpolator());
    // You can change this duration to more closely match that of the default animation.
    anim.setDuration(500);
    anim.start();
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }

    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        animateHamburgerToArrow();
        return true;
    } else if (id == R.id.action_search) {
        animateHamburgerToArrow();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

      

        
        
        
      

    

When I click action_search

, the hamburger icon changes to an arrow icon. However, there is no animation. May I know if there is something I missed?

Update

I suspect the left arrow used by the navigation drawer is different from the left arrow used in search mode. These are 2 different copies.

This is because if I click action_settings

, I can watch the animation. However, if I click action_search

, I will not watch the animation. I suspect the left arrow is being used to search for actions, "block" navigation drawer icons (both hamburger and arrow).