Material toolbar covers ViewFlipper android-CodePudding

I've tried a few things, including for example adding fitsSystemWindows, which it works but it pushes the content too much down without me adding padding. But the problem is that the toolbar is in a partial file and this happens on other layouts that include it (i made it into one code now for making it easier)

What can I try? What am I missing? I think the layout order is right as well. Thanks for pointers on where to look

<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"
  >

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        >

     <com.google.android.material.appbar.MaterialToolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@ id/toolbar"
    style="@style/Widget.MaterialComponents.Toolbar.Surface"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:elevation="4dp"
    android:theme="@style/font_regular"
    app:layout_scrollFlags="scroll|enterAlways" />

    </com.google.android.material.appbar.AppBarLayout>

    <ViewFlipper
        android:id="@ id/story_viewflipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager.widget.ViewPager
            android:id="@ id/story_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </ViewFlipper>

    <LinearLayout
        android:id="@ id/article_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/scroll_article_bar_height_edge"
        android:background="?attr/article_bottom_navbar_background"
        android:layout_gravity="bottom"
        android:gravity="end"
        android:paddingStart="@dimen/article_swipe_padding"
        android:elevation="@dimen/story_bottom_nav_elevation"
        android:paddingEnd="@dimen/article_swipe_padding"
        android:orientation="horizontal"
        android:visibility="gone"
        >

        <ImageView
            android:id="@ id/previous_story_btn"
            android:layout_width="@dimen/story_button_size"
            android:layout_height="@dimen/story_button_size"
            android:paddingStart="@dimen/article_swipe_padding"
            android:paddingEnd="@dimen/article_swipe_padding"
            android:paddingTop="@dimen/article_swipe_padding_top"
            android:contentDescription="@string/previous_article"
            android:src="?attr/article_bottom_navbar_previous"/>

        <ImageView
            android:id="@ id/next_story_btn"
            android:layout_width="@dimen/story_button_size"
            android:layout_height="@dimen/story_button_size"
            android:contentDescription="@string/next_article"
            android:paddingStart="@dimen/article_swipe_padding"
            android:paddingEnd="@dimen/article_swipe_padding"
            android:paddingTop="@dimen/article_swipe_padding_top"
            android:src="?attr/article_bottom_navbar_next"
            />

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

image showing toolbar covering

Also i should mention that its different from API29 onwards, before that it works.

view After adding layout behaviour on viewpage

CodePudding user response：

Maybe you should change the coordinatorLayout to a constraintLayout. If you set the toolbar height to wrap_content and the top constraint of the ViewFlipper to the bottom of the toolbar then the toolbar shouldn't cover the ViewFlipper

Here is a youtube tutorial where you can dive deeper in constraint layouts:

https://www.youtube.com/watch?v=4N4bCdyGcUc

Credits: Coding in Flow

Hope this helps?

CodePudding user response：

When you're using CoordinatorLayout then you need to use layout_behavior to the following layout to avoid it from covering the toolbar space.

Example layout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@ id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.MaterialToolbar xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@ id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:elevation="4dp"
            android:background="@color/white"
            app:layout_scrollFlags="scroll|enterAlways" />

    </com.google.android.material.appbar.AppBarLayout>

    <ViewFlipper
        android:id="@ id/story_viewflipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:elevation="8dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.viewpager.widget.ViewPager
            android:id="@ id/story_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </ViewFlipper>


</androidx.coordinatorlayout.widget.CoordinatorLayout>