xamarin navigation drawer with fragments

Question

I'm doing something wrong here. I want to use the navigation drawer and then for the content create some fragments for display the different 'pages'. I have the navigation view, hamburger menu, etc working just fine. But I can't seem to get my fragments to show up. So I tried replacing my fragments with just a text view so I can tell if its showing up but I can't even get that to show up now.

<?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">
        <RelativeLayout
                android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/toolbar" android:id="@+id/includething"/>
                <TextView
                android:id="@+id/label"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Sample Text "/>
        <!--<FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
                    android:layout_below="@id/includething"/>-->
    </RelativeLayout >

    <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>

edit: Adding the toolbar layout I'm including

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/MyTheme">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>

At one point I got the fragment to show up but it was in the navigation drawer itself. Now I can't even get that to show up. What am I doing wrong? I commented out the fragment for now just hoping to get the textview to show up below the toolbar. If i can get that working i am confident i can make the fragment stuff work.

edit: After trying cricket's mode I was able to get this closer, but it looks like now the toolbar is on top of the main content area. Is there a way to move that down so that the content starts at the bottom of the toolbar? I have turned the background of my fragment yellow so its easier to see in the image below. What you can't see is there is actually text that appears in the fragment but its blocked by the toolbar.

Answer 1

DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from one or both vertical edges of the window.

You have a LinearLayout as the top element instead

Your toolbar may also be pushing the text out of the view.

You can compare your solution with the documentation. https://developer.android.com/training/implementing-navigation/nav-drawer.html

And your toolbar is more than just a Toolbar, it's a whole view.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

That last line pushed your text off the screen

Answer 2

This code works for me in my application, developed in VS2017 with Xamarin. Hope it helps you.

Your Main.axml file should be like this

<?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"
        android:background="@color/colorWhite"
        android:id="@+id/ll">
        <include
            layout="@layout/toolbar" />
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="320dp"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navbar" />
</android.support.v4.widget.DrawerLayout>

your MainActivity

public class MainActivity : AppCompatActivity
{
    #region Menu

    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    V7Toolbar toolbar;

    #endregion Menu

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

        SetContentView(Resource.Layout.Main);

        #region Menu

        drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);

        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);

        #endregion Menu
    }

    #region Menu

    private void SetupDrawerContent(NavigationView navigationView)
    {
        navigationView.NavigationItemSelected += (sender, e) =>
        {
            e.MenuItem.SetChecked(true);

            FragmentTransaction ft = this.FragmentManager.BeginTransaction();

            switch (e.MenuItem.ItemId)
            {
                case Resource.Id.mn_Home:
                    toolbar.Title = "Dashboard";
                    HomeFragment mg4 = new HomeFragment();
                    ft.Replace(Resource.Id.ll, mg4);
                    break;
            }

            ft.Commit();
            drawerLayout.CloseDrawers();
        };
    }

    public override bool OnCreateOptionsMenu(IMenu menu)
    {
        if (!IsNavigationMenuLoaded)
        {
            navigationView.InflateMenu(Resource.Menu.menu_main);
            IsNavigationMenuLoaded = true;
        }

        return true;
    }

    #endregion Menu
}

Your Fragment

public class HomeFragment : Fragment
{
    public override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // Create your fragment here
    }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = LayoutInflater.From(Activity).Inflate(Resource.Layout.layout_Home, null);
        return view;
    }
}

Answer 3

It looks like from the xml you provided that your TextView is behind the toolbar. When using a RelativeLayout, all of the view's positions need to be defined relative from one another or its parent.

The textview should become visible if you add android:layout_below="@id/includething" to the TextView.

<TextView
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Sample Text "
    android:layout_below="@id/includething"/>