I am having this issue that there is blank space over the top app bar which is supposed to be at the top. Anchoring it to the top doesn't help, "android:fitsSystemWindows="true"" as well.
The structure of my file: CoordinatorLayout with MaterialToolBar(problem) - NestedScrollView - CoordinatorLayout with scrollabel content in it
My code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/mainCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
style="@style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:background="#E0ECDE"
app:layout_anchor="@+id/topAppBar"
app:layout_anchorGravity="center"
app:menu="@menu/top_app_bar"
app:subtitleTextColor="#205072"
app:titleCentered="true"
app:titleTextColor="#205072">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/montserrat_bold"
android:gravity="center_horizontal"
android:paddingLeft="14dp"
android:text="text"
android:textColor="#68B2A0"
android:textSize="24dp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/sendBtn"
android:layout_marginLeft="150dp"
style="@style/Widget.App.Button.OutlinedButton.Icon"
android:backgroundTint="#68B2A0"
android:layout_width="34dp"
android:layout_height="34dp"
app:icon="@drawable/ic_round_arrow_upward_24"
app:iconGravity="textStart"
app:iconSize="24dp"
app:iconTint="#E0ECDE"
app:strokeWidth="2dp"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
app:strokeColor="#68B2A0" />
</com.google.android.material.appbar.MaterialToolbar>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="90dp"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--scrollable content-->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_anchorGravity="bottom|center"
app:backgroundTint= "#FFFFFF"
app:contentInsetStart="0dp"
app:elevation= "8dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="unlabeled"
app:itemIconTint="#CDE0C9"
android:background="@drawable/background_transparent"
app:menu="@menu/bottom_app_bar" />
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>This might be because of NestedScrollView, because on other pages without it there is no issue with top bar. Any ideas on why this is happenning or how to fix it?
Edit: themes code
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#205072</item>
<item name="colorPrimaryVariant">#CDE0C9</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#329D9C</item>
<item name="colorSecondaryVariant">#329D9C</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="error_appearance_one" parent="@android:style/TextAppearance">
<item name="android:textColor">@android:color/transparent</item>
</style>
<style name="error_appearance_two" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/error</item>
</style>
<style name="Theme.Main.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#56C596</item>
<item name="boxStrokeWidth">2dp</item>
</style>
<style name="Theme.Main.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.Main.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="Theme.ThemeOne" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#205072</item>
<item name="colorPrimaryVariant">@color/white</item>
<item name="colorOnPrimary">#329D9C</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#329D9C</item>
<item name="colorSecondaryVariant">#329D9C</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.ThemeTwo" parent="Theme.MaterialComponents.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">#CDE0C9</item>
<item name="colorPrimaryVariant">@color/white</item>
<item name="colorOnPrimary">#329D9C</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#329D9C</item>
<item name="colorSecondaryVariant">#329D9C</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimary</item>
<!-- Customize your theme here. -->
</style>
<style name="Widget.App.Button.OutlinedButton.Icon" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
<item name="android:padding">0dp</item>
<item name="iconPadding">0dp</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:insetLeft">0dp</item>
<item name="android:insetRight">0dp</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
</resources>I think that white gap is the status bar. you may have accidentally changed it's color to white which eventually hid all the white icons on the bar making it looks like a white gap.
You have colorPrimaryVariant as white in ThemeOne and ThemeTwo , make sure you are not using these theme as they will make your status bar white.