Unable to add navigation menu with constraint layout (Android Studio)

Question

I'm fairly new to XML and constraint layout. I am having a problem with implementing navigation menu with constraint layout. I have successfully implemented the menu with a new project with drawer layout, but unable with my current constraint layout project.

The issue is the layout_height is resetting to 0 dp after changing it to match parent.

The xml code is as follows:

<android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/nav_menu"
    android:layout_gravity="start"
    >
</android.support.design.widget.NavigationView>

nav_menu simply has items, like so:

<item android:id="@+id/Credit"
    android:title="Credit">
</item>

I position the Buttons/TextEdit/TextView through infer constraints.

I would like to position the menu to lay above the main activity view; when swiped from left to right, the menu will slide and open.

Answer 1

Make android.support.v4.widget.DrawerLayout the parent layout and place the ConstraintLayout as the child layout.

The NavigationView widget and other contents should placed inside the ConstraintLayout. See example that works for me below:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:gravity="center"
        android:fitsSystemWindows="true"
        android:background="@color/colorPrimary"
        android:id="@+id/navmenubar">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <include
                layout="@layout/navigation_actionbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


            <ImageView
                android:id="@+id/imageView"
                android:layout_width="158dp"
                android:layout_height="46dp"
                android:layout_marginBottom="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginStart="24dp"
                android:layout_marginTop="24dp"
                android:contentDescription="@string/todo"
                android:src="@drawable/logo"
                app:layout_constraintBottom_toTopOf="@+id/slogan"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.504"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.014" />


            <TextView
                android:id="@+id/slogan"
                android:layout_width="135dp"
                android:layout_height="16dp"
                android:layout_marginTop="6dp"
                android:text="@string/lawn"
                android:textAlignment="center"
                android:textColor="#002734"
                android:textSize="12sp"
                app:layout_constraintHorizontal_bias="0.502"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView" />

            <Button
                android:id="@+id/startbtn"
                android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:layout_marginBottom="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginStart="24dp"
                android:layout_marginTop="24dp"
                android:background="@drawable/mainbackground"
                android:text="@string/begin"
                android:textAllCaps="false"
                android:textColor="@android:color/background_light"
                android:textSize="18sp"
                android:typeface="sans"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/slogan"
                app:layout_constraintVertical_bias="0.851"
                tools:text="@string/begin" />

            <android.support.design.widget.NavigationView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                app:menu="@menu/navigation_menu"
                android:layout_gravity="start"
                app:headerLayout="@layout/navigation_header"
                android:background="@drawable/navimenubg"
                android:id="@+id/nav_viw">
            </android.support.design.widget.NavigationView>
        </android.support.constraint.ConstraintLayout></android.support.v4.widget.DrawerLayout>