In this post I will explain how to implement the arrow animation with a few lines of code 👌🏻 + a small bonus 😉

The first thing we have to do is add the dependencies of appcompat-v7 and material libraries in our build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
}
build.gradle

Then we create the activity's layout including a DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">

    <!-- Fragment container -->
    <FrameLayout
        android:id="@+id/fragment_main_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!-- Menu drawer-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white" />
</androidx.drawerlayout.widget.DrawerLayout>
activity_main.xml

The third step is to enable the toolbar's home button in the onCreate method of our activity and assign a DrawerArrowDrawable to it as an icon

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = supportActionBar
        if (toolbar != null) {
            toolbar.setDisplayHomeAsUpEnabled(true)
            toolbar.setHomeAsUpIndicator(DrawerArrowDrawable(this))
        }
}

Once that's done, the drawer icon should appear in the screen toolbar as follows

Don't worry about the color of the icon, that's its state when it has no DrawerListener assigned. In order to properly assign that listener we create, assign and synchronize the state of an ActionBarDrawerToggle (in the onCreate method of our activity) like this:

val drawerToggle = ActionBarDrawerToggle(this, drawer_layout, R.string.app_name, R.string.app_name)
drawer_layout.addDrawerListener(drawerToggle)
drawerToggle.syncState()

Just by doing that, we get this result if we run the app

As you can see, the icon doesn't play any animation nor opens/closes the Drawer menu... BUT! we're almost there 😃 now we just need to add the actions to open/close the drawer when the user taps the drawer icon, we do that by adding the following code in our activity

override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                val isDrawerOpen = drawer_layout.isDrawerOpen(GravityCompat.START)
                if (isDrawerOpen) { 
                    drawer_layout.closeDrawer(GravityCompat.START) // Close drawer if it's open
                } else {
                    drawer_layout.openDrawer(GravityCompat.START) // Open drawer if it's closed
                }
                true
            }
            else ->
                return super.onOptionsItemSelected(item)
        }
    }

and that's it! 🎉 now if you run the app you should see something like this:


Bonus Tip: Sometimes we are asked to make the color of the drawer a custom color... we can change it easily by overwriting drawerArrowStyle in the style of the application:

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- Style that changes the drawer's icon -->
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

        <!--(Extra bonus point!) Style to change the textColor of the toolbar-->
        <item name="actionBarStyle">@style/CustomActionBar</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@color/custom_blue</item> <!-- #1A237E -->
    </style>

    <style name="CustomActionBar" parent="Widget.AppCompat.ActionBar.Solid">
        <item name="titleTextStyle">@style/ActionBarTitle</item>
    </style>

    <style name="ActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/custom_blue</item>  <!-- #1A237E -->
    </style>

Now we run the app and should see the new color applied to our drawer icon and toolbar title 👌🏻🤓

Thanks for reading the whole thing! 🏅👌🏻😃