Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why content is dragging after removing scrollFlags `scroll`?

If remove at app:layout_scrollFlags value scroll in Toolbar , then content is moving to top. See screenshot

Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <!--region Content-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <!--region EmptyView-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:id="@+id/titleView"
                    fontPath="@string/font_semibold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:gravity="center"
                    android:padding="8dp"
                    android:textColor="#9b9b9b"
                    android:textSize="16sp"
                    tools:ignore="MissingPrefix"
                    tools:text="@string/error_view_internet_connection_title"/>

                <TextView
                    android:id="@+id/messageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="32dp"
                    android:gravity="center"
                    android:paddingStart="32dp"
                    android:paddingEnd="32dp"
                    android:textColor="#9b9b9b"
                    android:textSize="14sp"
                    tools:ignore="MissingPrefix"
                    tools:text="@string/error_view_internet_connection_message"
                    />

            </LinearLayout>
            <!--endregion-->

            <!--region List-->
            <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/swipeRefreshLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <RecyclerView
                    android:id="@+id/recyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clipToPadding="false"
                    android:scrollbarSize="2dp"
                    android:scrollbars="vertical"
                    android:visibility="gone"
                    tools:visibility="visible"/>

            </android.support.v4.widget.SwipeRefreshLayout>
            <!--endregion-->

        </LinearLayout>
        <!--endregion-->

        <!--region Toolbar-->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@android:color/transparent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:elevation="0dp"
            app:layout_behavior="@string/appbar_layout_behavior"
            app:layout_collapseMode="pin">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                style="?android:attr/toolbarStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#636363"
                android:minHeight="?android:attr/actionBarSize"
                app:elevation="0dp"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/ToolbarStyle"
                app:theme="@style/ToolbarStyle"
                tools:ignore="NewApi"/>

        </android.support.design.widget.AppBarLayout>
        <!--endregion-->

    </android.support.design.widget.CoordinatorLayout>

    <!--region BottomNavigation-->
    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:accentColor="#111232"
        app:inactiveColor="#111232"
        app:titleState="always_hide"/>
    <!--endregion-->

</LinearLayout>

enter image description here

I remove the flag by func, and after that in UI it is shaking:

    public void setToolbarCollapsible(boolean collapsible) {
        int defaultFlags =
                AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP
                | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS
                | AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL;
        int none = 0;
//        //remove from toolbar
        Toolbar toolbar = getToolbar();
        if (toolbar == null) return;
        AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
        toolbarLayoutParams.setScrollFlags(collapsible ? defaultFlags : none);
        toolbar.setLayoutParams(toolbarLayoutParams);
    }
like image 738
NickUnuchek Avatar asked Nov 26 '18 10:11

NickUnuchek


1 Answers

If remove at app:layout_scrollFlags value scroll in Toolbar , then content is moving to top.

The content is shifting up because the height of the LinearLayout that wraps the TextView is changing height. As a result, android:gravity="center" specified on the LinearLayout computes a different vertical center.

The following layout is a simplified view of your layout for demonstration purposes.

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/titleView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/error_view_internet_connection_title"
            android:textSize="16sp" />

    </LinearLayout>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="Toolbar" />

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

Here is the layout inspector view of this layout showing the height of the LinearLayout with and without the scroll flag set.

enter image description here

Without the scroll flag set, the height of the LinearLayout that wraps the TextViews is smaller by the height of the Toolbar. This makes sense since the LinearLayoutis match_parent it must fit. With the scroll flag set, the LinearLayout can be taller since it can scroll and does not have to fit within the screen. In fact, it is as tall as the screen but shifted below the toolbar.

You can do a quick test about whether this is the case or not but replacing android:gravity="center" with a top margin.

I remove the flag by func, and after that in UI it is shaking

I think that I have seen this behavior before, but I don't recall the reason for it. Since CoordinatorLayout is so dynamic, it may be some kind of oscillation in the layout due to some layout ambiguity. This is, however, nothing more than guess. If you clean up your layout a little and consider why you are manipulating the scroll flag (Is there another way?), you may be able to resolve the problem.

Short of that, a small runnable project that demonstrates the jitter problem may be a helpful thing to post.

like image 139
Cheticamp Avatar answered Nov 09 '22 07:11

Cheticamp