Navigation Drawer Fragment Affecting Toolbar's Style and Positioning

Question

I'm desperately looking for help with an issue I'm having. So I've been following this tutorial series, which are absolutely great, but in comparison to using a Bottom Navigation like he is in the video, I'm using a `Navigation Drawer' with fragments.

When I select HomeFragment within the NavigationDrawer, the layout loads but with everything pushed down below the Toolbar. Now, the Toolbar is fully functional as the hamburger and more options menu icon are indeed there, but are invisible to also being white, therefore it's more a Design issue.

Also, regarding the Toolbar's style, yes I've made it to be transparent on purpose so that the finished UI looks like the "Expected Output" image below.

Expected Output - This is what the identical layout looks like in HomeActivity in oppose to HomeFragment.

The below is my code for the HomeActivity, which nests the FrameLayout for the Fragments.

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.michaeldybek.plasticoceansapp.HomeActivity">

    <FrameLayout
        android:id="@+id/mainContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@id/toolbar"
        app:layout_constraintTop_toBottomOf="@id/toolbar">
    </FrameLayout>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@null"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

I have declared and initiated the Toolbar within the HomeActivity class like normal, and when the HomeActivity is displayed the Toolbar is indeed there, which makes me question whether I must declare it again within the HomeFragment class? If so, how would you go about doing that?

If any other code is required from other layouts or classes, ask away. Any help will be much appreciated!

Answer 1

So after a week of solid research, I have finally manage to come up with a solution which bypassed this issue!

I ended up removing the Toolbar and FrameLayoutfrom HomeActivity, and instead created a new layout resource file and called it "app_bar.xml", which contained the following code:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".core.MainActivity">

        <FrameLayout
            android:id="@+id/mainContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:elevation="0dp"
        android:stateListAnimator="@null">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Light"/>

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

</RelativeLayout>

I then followed by including the app_bar in the HomeActivity layout using the include tag (HomeActivity also houses the NavigationView nested within a DrawerLayout).

I hope this helps whomever comes across this question. If you have any further queries, ask away!