Having issues with trying to display items on my toolbar

Question

I've been working on a weather app for a while now and I happened to have worked on other sections of the app before realizing I needed to use a left navigation drawer bar. On trying to create the new nav bar following samples from tutorials, I realized it needed to be displayed on a toolbar to function well and I earlier didn't use a toolbar(i initially placed all my items directly on the activity's layout). Now that I have created a new toolbar, it displays on my items and obstructs them from displaying on the app.

i.e. I want it to be displayed like this https://i.stack.imgur.com/NTKaY.png only that the toolbar should be displayed behind, not on them.

But here's how it displays currently https://i.stack.imgur.com/rBkf1.png obstructing the items from displaying.

The items it obstructs are my edittexts, textview, and imageview(as shown on the first image).

I've tried to correct it by placing the item views directly below the toolbar's code in the layout, but it still displays the same way. Please can anyone help/suggestions on how I can correct this issue?

Here's my activity's layout code:

<androidx.drawerlayout.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"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:context=".Activity.HomeActivity"
    tools:openDrawer="start">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout"
        android:background="@drawable/dubai">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_constraintTop_toTopOf="parent"
            app:popuptheme="@style/ThemeOverlay.AppCompat.Light" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_menu" />

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="409dp"
            android:layout_height="599dp"
            app:defaultNavHost="true"
            app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:navGraph="@navigation/my_nav" />

        <EditText
            android:id="@+id/textfield"
            android:layout_width="250dp"
            android:layout_height="35dp"
            android:autofillHints="@string/change_city"
            android:background="@color/colorPrimary"
            android:hint="@string/search_city"
            android:inputType="text"
            android:labelFor="@id/imageView4"
            android:padding="8dp"
            android:textColor="@color/colorAccent"
            android:textSize="16sp"
            app:layout_constraintEnd_toStartOf="@+id/imageView4"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="50dp"
            android:layout_height="35dp"
            android:layout_marginEnd="1dp"
            android:contentDescription="@string/searchbtn"
            android:src="@drawable/look"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/time_field"
            android:visibility="gone"
            android:textColor="#FFFFFF"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textfield" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu"/>


</androidx.drawerlayout.widget.DrawerLayout>

Answer 1

So, there are a couple of things that need to be adjusted:

• In your desired layout the ToolBar looks transparent
• The Toolbar obstructs the EditText & ImageView.

For the first point, I'd suggest to change the background of the ToolBar to transparent color. And to remove the the elevation that could block out those items; so the toolBar would be:

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintTop_toTopOf="parent"
        app:popuptheme="@style/ThemeOverlay.AppCompat.Light" />