Adding a Navigation Drawer to an existing ConstraintLayout Activity

Question

Is there any way that I can modify the XML file of my main activity (the one that I wish to add a navigation drawer to) so as to allow for my existing layout to remain while adding the navigation drawer?

My current code is as follows:

<android.support.constraint.ConstraintLayout 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">

<EditText
    android:id="@+id/editText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:ems="10"
    android:hint="@string/edit_message"
    android:inputType="textPersonName"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:onClick="sendMessage"
    android:text="@string/button_send"
    app:layout_constraintBaseline_toBaselineOf="@+id/editText"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/editText" />

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="0dp"
    android:layout_height="146dp"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintVertical_bias="0.0">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="204dp"
        android:layout_height="139dp"
        android:baselineAlignBottom="false"
        android:src="@drawable/monetwaterloo" />
</LinearLayout>

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:onClick="sendPhoto"
    android:text="@string/button_photo_send"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout"
    app:layout_constraintVertical_bias="0.04000002" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:onClick="checkDatabase"
    android:text="@string/check_database_items"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button4" />

And this results in the following:

So essentially, all I just want a drawer navigation to appear beside the title... Any help or guiding advice would be greatly appreciated!

Failure

The DrawerLayout needs to be the top view, and the ConstraintLayout would be in it with a gravity of start – Declared

Answer 1

Just wrap the whole thing in a drawer layout and then add a second view which will act as the drawer layout. See below:

<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:id="@+id/drawer_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ui.MainActivity">

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

        <EditText
            android:id="@+id/editText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:ems="10"
            android:hint="@string/edit_message"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:onClick="sendMessage"
            android:text="@string/button_send"
            app:layout_constraintBaseline_toBaselineOf="@+id/editText"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/editText" />

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="0dp"
            android:layout_height="146dp"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button2"
            app:layout_constraintVertical_bias="0.0">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="204dp"
            android:layout_height="139dp"
            android:baselineAlignBottom="false"
            android:src="@drawable/monetwaterloo" />

    </LinearLayout>

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:onClick="sendPhoto"
    android:text="@string/button_photo_send"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout"
    app:layout_constraintVertical_bias="0.04000002" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:onClick="checkDatabase"
    android:text="@string/check_database_items"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button4" />

    </android.support.constraint.ConstraintLayout>

    <include layout="@layout/layout_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

More info can be found here

Gulfweed

Thank you so much! Unfortunately now I am getting two action bars at the top? Is this as a result of there being two activities? I'm really new to Android development and am just experimenting, hence the confusion. Any help will be much appreciated! :) – Failure

Not exactly sure what you mean by two activites, but in my setup I used a NoActionBar theme and had my own toolbar which I set as the supportActionBar so that is how that worked. – Gulfweed