No Hamburger to Arrow animation or icon showing on Drawer.

So I watched this youtube tutorial and used his sample code (sample 50) found in his website. I ran the sample, the Hamburger to Arrow animation appeared but when I tried to implement it on my solution project, no animation or icons.

I even went as far for testing; I created a new solution and literally copy the sample files unto the new solution and same results, no animation or icons. So at this point, I'm thinking is something internally that is causing the problem of no Hamburger to Arrow animation or icons.

Am I missing a file that contains the animation or they're somehow not being call?

I tried this solutions and none of them work:
ActionBarDrawerToggle.syncState Doesn't show the hamburger icon
Appcompatv7 - v21 Navigation drawer not showing hamburger icon
Navigation Drawer with Burger to back arrow animation on Lollipop

Files from sample:

MainActivity:

using System;

using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using SupportToolbar = Android.Support.V7.Widget.Toolbar;
using Android.Support.V7.App;
using Android.Support.V4.Widget;
using System.Collections.Generic;

namespace test.Droid
{
    [Activity (Label = "test.Droid", Icon = "@drawable/icon", MainLauncher = true, Theme="@style/MyTheme")]
    public class MainActivity : ActionBarActivity
    {
        private SupportToolbar mToolbar;
        private MyActionBarDrawerToggle mDrawerToggle;
        private DrawerLayout mDrawerLayout;
        private ListView mLeftDrawer;
        private ListView mRightDrawer;
        private ArrayAdapter mLeftAdapter;
        private ArrayAdapter mRightAdapter;
        private List<string> mLeftDataSet;
        private List<string> mRightDataSet;

        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
            mDrawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
            mLeftDrawer = FindViewById<ListView>(Resource.Id.left_drawer);
            mRightDrawer = FindViewById<ListView>(Resource.Id.right_drawer);

            mLeftDrawer.Tag = 0;
            mRightDrawer.Tag = 1;

            SetSupportActionBar(mToolbar);

            mLeftDataSet = new List<string>();
            mLeftDataSet.Add ("Left Item 1");
            mLeftDataSet.Add ("Left Item 2");
            mLeftAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, mLeftDataSet);
            mLeftDrawer.Adapter = mLeftAdapter;

            mRightDataSet = new List<string>();
            mRightDataSet.Add ("Right Item 1");
            mRightDataSet.Add ("Right Item 2");
            mRightAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, mRightDataSet);
            mRightDrawer.Adapter = mRightAdapter;

            mDrawerToggle = new MyActionBarDrawerToggle(
                this,                           //Host Activity
                mDrawerLayout,                  //DrawerLayout
                Resource.String.openDrawer,     //Opened Message
                Resource.String.closeDrawer     //Closed Message
            );

            mDrawerLayout.SetDrawerListener(mDrawerToggle);
            SupportActionBar.SetHomeButtonEnabled(true);
            SupportActionBar.SetDisplayShowTitleEnabled(true);
            mDrawerToggle.SyncState();

            if (bundle != null)
            {
                if (bundle.GetString("DrawerState") == "Opened")
                {
                    SupportActionBar.SetTitle(Resource.String.openDrawer);
                }

                else
                {
                    SupportActionBar.SetTitle(Resource.String.closeDrawer);
                }
            }

            else
            {
                //This is the first the time the activity is ran
                SupportActionBar.SetTitle(Resource.String.closeDrawer);
            }
        }

        public override bool OnOptionsItemSelected (IMenuItem item)
        {       
            switch (item.ItemId)
            {

            case Android.Resource.Id.Home:
                //The hamburger icon was clicked which means the drawer toggle will handle the event
                //all we need to do is ensure the right drawer is closed so the don't overlap
                mDrawerLayout.CloseDrawer (mRightDrawer);
                mDrawerToggle.OnOptionsItemSelected(item);
                return true;

            case Resource.Id.action_refresh:
                //Refresh
                return true;

            case Resource.Id.action_help:
                if (mDrawerLayout.IsDrawerOpen(mRightDrawer))
                {
                    //Right Drawer is already open, close it
                    mDrawerLayout.CloseDrawer(mRightDrawer);
                }

                else
                {
                    //Right Drawer is closed, open it and just in case close left drawer
                    mDrawerLayout.OpenDrawer (mRightDrawer);
                    mDrawerLayout.CloseDrawer (mLeftDrawer);
                }

                return true;

            default:
                return base.OnOptionsItemSelected (item);
            }
        }

        public override bool OnCreateOptionsMenu (IMenu menu)
        {
            MenuInflater.Inflate (Resource.Menu.action_menu, menu);
            return base.OnCreateOptionsMenu (menu);
        }

        protected override void OnSaveInstanceState (Bundle outState)
        {
            if (mDrawerLayout.IsDrawerOpen((int)GravityFlags.Left))
            {
                outState.PutString("DrawerState", "Opened");
            }

            else
            {
                outState.PutString("DrawerState", "Closed");
            }

            base.OnSaveInstanceState (outState);
        }

        protected override void OnPostCreate (Bundle savedInstanceState)
        {
            base.OnPostCreate (savedInstanceState);
            mDrawerToggle.SyncState();
        }

        public override void OnConfigurationChanged (Android.Content.Res.Configuration newConfig)
        {
            base.OnConfigurationChanged (newConfig);
            mDrawerToggle.OnConfigurationChanged(newConfig);
        }
    }
}

MyActionBarDrawerToggle:

using System;
using SupportActionBarDrawerToggle = Android.Support.V7.App.ActionBarDrawerToggle;
using Android.Support.V7.App;
using Android.Support.V4.Widget;

namespace test.Droid
{
    public class MyActionBarDrawerToggle : SupportActionBarDrawerToggle
    {
        private ActionBarActivity mHostActivity;
        private int mOpenedResource;
        private int mClosedResource;

        public MyActionBarDrawerToggle (ActionBarActivity host, DrawerLayout drawerLayout, int openedResource, int closedResource) 
            : base(host, drawerLayout, openedResource, closedResource)
        {
            mHostActivity = host;
            mOpenedResource = openedResource;
            mClosedResource = closedResource;
        }

        public override void OnDrawerOpened (Android.Views.View drawerView)
        {   
            int drawerType = (int)drawerView.Tag;

            if (drawerType == 0)
            {
                base.OnDrawerOpened (drawerView);
                mHostActivity.SupportActionBar.SetTitle(mOpenedResource);
            }
        }

        public override void OnDrawerClosed (Android.Views.View drawerView)
        {
            int drawerType = (int)drawerView.Tag;

            if (drawerType == 0)
            {
                base.OnDrawerClosed (drawerView);
                mHostActivity.SupportActionBar.SetTitle(mClosedResource);
            }               
        }

        public override void OnDrawerSlide (Android.Views.View drawerView, float slideOffset)
        {
            int drawerType = (int)drawerView.Tag;

            if (drawerType == 0)
            {
                base.OnDrawerSlide (drawerView, slideOffset);
            }
        }
    }
}

Styles:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>

    <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#2196F3</item>
        <item name="drawerArrowStyle">@style/MyDrawerArrowStyle</item>
    </style>

    <style name="MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">#F5F5F5</item>
        <item name="spinBars">true</item>
    </style>
</resources>

MainLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!-- The Main Content View -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Support V7 Action Bar Drawer Toggle"
                android:layout_centerInParent="true" />
        </RelativeLayout>
    <!-- The Left Navigation Drawer -->
        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="#818181"
            android:dividerHeight="1dp"
            android:background="#E3F2FD" />
        <ListView
            android:id="@+id/right_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:choiceMode="singleChoice"
            android:divider="#E2E2E2"
            android:dividerHeight="1dp"
            android:background="#9E9E9E" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

Menu:

<?xml version="1.0" encoding="UTF-8" ?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:myapp="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/action_refresh"
        android:icon="@drawable/ic_action_refresh"
        android:title="Refresh"
        myapp:showAsAction="always" />

    <item android:id="@+id/action_help"
        android:icon="@drawable/ic_action_help"
        android:title="Help"
        myapp:showAsAction="always"/>

</menu>

Best Answer

Answers

  • Well I thank you

  • TheGreatOneTheGreatOne USMember ✭✭

    Thank you for what?

  • HenkBurgstraHenkBurgstra USMember

    For the feedback. It solved my problem as well, thanks.

  • Thank you broth

  • TranHiepTranHiep USMember

    Thank you , Bros. It worked very well

  • Does this code still work with the latest libraries and particularly when changing to AppCompatActivity rather than ActionBarActivity? I'm getting no hamburger icon showing :(

  • kfirkoberkfirkober USMember

    Yes it does.

    Just follow the same tutorial and change to AppCompatActivity and it still works.

    Thanks Guys!

  • ibrahimwahbiibrahimwahbi USMember ✭✭

    thank you bro... worked for me

  • mnayyermnayyer PKMember ✭✭

    How I can use this drawer in another activity ?

  • TripleDoubleTripleDouble BGMember ✭✭✭

    I am working on the same video, but hamburger icon is invisible.
    I am using AppCompatActivity, and i set SupportActionBar.SetDisplayHomeAsUpEnabled(true);
    I really need some help
    Any ideas?

    [Activity(Label = "test", MainLauncher = true, Icon = "@drawable/test", Theme = "@style/MyTheme")]
    public class MainActivity : AppCompatActivity

    mLeftDrawer = FindViewById(Resource.Id.left_drawer);
    mDrawerLayout = FindViewById(Resource.Id.drawer_layout);

    mDrawerToggle = new MyActionBarDrawerToggle(
    this, //Host Activity
    mDrawerLayout, // Drawerlayout
    Resource.String.openDrawer, //Opened Message
    Resource.String.closeDrawer //Closed Message
    );

            mDrawerLayout.SetDrawerListener(mDrawerToggle);
    
            SupportActionBar.SetHomeButtonEnabled(true);
            SupportActionBar.SetDisplayHomeAsUpEnabled(true);
            SupportActionBar.SetDisplayShowTitleEnabled(true);
            mDrawerToggle.SyncState();
    
    
        public override bool OnOptionsItemSelected(IMenuItem item)
        {
    
            int id = item.ItemId;
    
            if (id == Android.Resource.Id.Home)
            {
    
                mDrawerToggle.OnOptionsItemSelected(item);
                return true;
            }
    
            return base.OnOptionsItemSelected(item);
        }
    

    this is my style

  • VijayPawar.0297VijayPawar.0297 USMember ✭✭

    @AaronClausen.0025 said:
    Does this code still work with the latest libraries and particularly when changing to AppCompatActivity rather than ActionBarActivity? I'm getting no hamburger icon showing :(

    I don't think so. I followed same steps as Joe Rock from you tube. And I got Hamburger to SpinBars for old libraries but when I updated through nugetManager the animation gone.

Sign In or Register to comment.