Navigation Drawer with tab in main page android xamarin

Question

I make an app with Navigation Drawer. I want to add a tab in main page but when I run the app, i have an error in

System.NullReferenceException: Object reference not set to an instance of an object.

ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;

how add tab? my code is:

namespace NavigationDrawerLayout
{
    [Activity(Label = "NavigationDrawerLayout", Theme = "@style/Theme.DesignDemo", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : AppCompatActivity
    {

        DrawerLayout drawerLayout;
        NavigationView navigationView;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;


            // Add the tabs to Action Bar  
            AddTab("Tab One");
            AddTab("Tab Two");
            AddTab("Tab Three");
            drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);


            // Create ActionBarDrawerToggle button and add it to the toolbar
            var toolbar = FindViewById<V7Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolbar);


            var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.drawer_open, Resource.String.drawer_close);
            drawerLayout.SetDrawerListener(drawerToggle);
            drawerToggle.SyncState();

            navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
            setupDrawerContent(navigationView);



        }
        private void AddTab(string tabText)
        {
            Android.App.ActionBar.Tab tab = ActionBar.NewTab();
            tab.SetText(tabText);
            tab.TabSelected += OnTabSelected;
            ActionBar.AddTab(tab);
        }
        private void OnTabSelected(object sender, Android.App.ActionBar.TabEventArgs args)
        {
            var CurrentTab = (Android.App.ActionBar.Tab)sender;

            if (CurrentTab.Position == 0)
            {

            }

            else
            {

            }
        }
        void setupDrawerContent(NavigationView navigationView)
        {
            navigationView.NavigationItemSelected += (sender, e) => {
                e.MenuItem.SetChecked(true);
                drawerLayout.CloseDrawers();
            };
        }

        public override bool OnCreateOptionsMenu(IMenu menu)
        {

            navigationView.InflateMenu(Resource.Menu.nav_menu);
            return true;

        }

        }
}

main.axml

    <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_height="match_parent"
        android:layout_width="fill_parent"
        android:fitsSystemWindows="true">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <include
                layout="@layout/toolbar" />
        </LinearLayout>
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_height="match_parent"
            android:layout_width="300dp"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

styles.xml

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

  <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
  </style>

  <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
     </style>


</resources>

Have you tried debugging your code to see which object could potentially be null? — Demitrian, Aug 20 '17 at 20:17

score 0 · Accepted Answer · answered Aug 21 '17 at 06:12

System.NullReferenceException: Object reference not set to an instance of an object.

When you want to add a ActionBar tab, your Activity should have ActionBar first, but in your Theme.DesignDemo, you have delete it in your Activity :

<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">

It means you can't get the ActionBar in your Activity, and you have use Toolbar instead. That's why it throws NullReferenceException exception.

how add tab?

With the API 21 the method ActionBarNavigationMode.Tabs is deprecated. You could use TabLayout in the Design Support Library.

Its usage is very simple, you could add it in your toolbar.axml like this :

Toolbar.axml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     ...
     >
  <android.support.design.widget.AppBarLayout
       ...
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

     <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:background="@color/colorPrimary" />

     <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <android.support.design.widget.TabItem
            android:text="Tab One"/>
        <android.support.design.widget.TabItem
            android:text="Tab Two"/>
        <android.support.design.widget.TabItem
            android:text="Tab Three"/>
     </android.support.design.widget.TabLayout>

 </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Use it in your code :

TabLayout tabLayout = FindViewById<TabLayout>(Resource.Id.tablayout);
tabLayout.SetupWithViewPager(viewPager);
//The one-stop shop for setting up this TabLayout with a ViewPager

Here is its effect. For more information, you could read this document.

Navigation Drawer with tab in main page android xamarin

1 Answers1