Android top app bar blocking fragment background image

Question

I am working on an Android app and am running into this weird problem. I have my main activity which holds a navigation drawer and a top app bar, the top app bar is transparent so the background image is visible behind the search bar and the navigation drawer button. The problem is that when I use the navigation drawer to navigate to a different fragment, that fragment's background doesn't extend all the way to the top of the screen the way the main activities background does. I have a custom background set on the activity and the fragments you can navigate to from the navigation drawer but the confusing part is that when you launch the app, the home screen fragment which doesn't have a specific background set, works perfectly.

I am also thinking that having one top app bar held by the main activity is not a good idea and I should have one per fragment but I haven't been able to pull that off.

Ideally, I would want an individual top app par for each fragment but if you can just help me fix this main issue that would already help me tremendously.

Here are screenshots of the app and code snippets of the relevant files:

Here are the relevant files:

activity_main.xml:

 <?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"


    android:background="@drawable/best_winter_aesthetic_phone_wallpaper_in_hd"
    tools:openDrawer="start">

    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
    />

    <com.google.android.material.navigation.NavigationView
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/white"
        android:background="#80000000"
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    >


    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:background="@android:color/transparent">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
            android:background="@android:color/transparent"
            app:titleTextColor="@android:color/black">

            <!-- Search bar -->
            <androidx.appcompat.widget.SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:iconifiedByDefault="false"
                app:queryHint="Search"
                android:textAppearance="@color/white"
                android:background="@drawable/semi_transparent_rounded_searchview_background"
                app:queryBackground="@android:color/transparent" />
        </com.google.android.material.appbar.MaterialToolbar>
    </com.google.android.material.appbar.AppBarLayout>


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



</androidx.coordinatorlayout.widget.CoordinatorLayout>

fragment_current_location.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".presentation.CurrentLocationFragment"

    >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />


</androidx.constraintlayout.widget.ConstraintLayout>

fragment_account.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".presentation.navigation.AccountFragment"
    android:background="@drawable/generic_background"
    >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Account"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <fragment
        android:background="@android:color/transparent"
        android:id="@+id/nav_host_fragment_content_home"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

themes.xml:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.VibeCast" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">#801E1D1D</item>
        <item name="colorPrimaryVariant">#FFF0F0</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">#1F1E1E</item>
        <!-- Status bar color. -->

        <!-- This is where you should define the status bar attributes -->

        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

    <style name="Theme.VibeCast.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="Theme.VibeCast.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.VibeCast.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Answer 1

That's in fact the point. You set a custom background in the AccountFragment which menas that the android:background is not translucent. If you want the Fragment to load as you like, just delete the line android:background="@drawable/generic_background" in fragment_account.xml. This means that the Background will be translucent.

Why you can see the translucent background in the beginning has something to do with how you initialize the NavigationDrawer. It seems that you do not show any fragment in the beginning. Only when selecting one Tab the Fragment is loaded. That means that the first state of your Drawer does not load any Fragment. To prevent this, you can copy the code that you used for switching to your AccountFragment, and paste it into the onCreate Method of your NavigationDrawerActivity. When doing this, Android starts with the Fragment you specified, so that the beginning is not empty.