I am using a prominent app bar with an image in a fragment. My style and xml files look like this:
theme.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MainTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/DeepSkyBlue</item>
<item name="colorPrimaryVariant">@color/DeepSkyBlueVariant</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">@color/purple_500</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
main_activity.xml (which opens automatically the fragment):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragment_container_view_tag"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.tempapp.pkgFragments.PersonAddFragment" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_add_person.xml (which uses a layout to prevent redudancy):
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include
android:id="@+id/layoutAppBar"
layout="@layout/layout_app_bar_prominent" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
last but not least, my layout_app_bar_prominent.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- Layout tag not necessary, as we don't use any binding....-->
<com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height_image_view"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--- contentScrim defines what should "appear" when the bar is not collapsed.
if not set in this case, the image will remain when bar is not collapsed-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleTextColor="?attr/colorOnPrimary"
app:expandedTitleTextColor="?attr/colorOnPrimary"
>
<ImageView
android:id="@+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
android:contentDescription="@string/app_bar_expanded_image"
/>
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
So here is my situation: My aim is that the toolbar image (expandedImage) should appear in the statusbar also. After researching, some suggested adding the following code in my activity in order to accomplish this:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);
}
This works perfect and my image appears in my status bar:
HOWEVER, the issue I am having now, is that (when i collapse my toolbar), the title and menu icons appear behind the status bar due to the code I add above: So there is basically no margin between the statusbar and my toolbar, which by default always exists.
If I remove the flag option, I don't have that issue anymore but then the image wouldn't appear in the status bar.
Any ideas how I could solve my issue? I've tried many solutions like:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
android:fitsSystemWindows="true"
but none of the situations worked for me...
Using CoordinatorLayout instead of ConstraintLayout for your activity will probably solve your problem.
NOTE: android:fitsSystemWindows=true
is (in every subview) necessary, otherwise the app bar will never "fill" the status bar or you will experience some unexpected behaviour.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
>
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragment_container_view_tag"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"´
android:name="com.example.tempapp.pkgFragments.PersonAddFragment" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>