CODEWITHSUNDEEP
androidgridviewtoolbarmaterial-design
Ali
Ali

Reputation: 9994

GridView under Toolbar - Hide ToolBar when Scrolling

I have the following layout for my Activity:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/content_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

</FrameLayout>

content_fragment is the place where I replace a fragment which includes a gridView:

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/swipe_refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.test.android.client.fragment.BurgerGridFragment">

        <GridView
            android:id="@+id/grid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:columnWidth="150dp"
            android:horizontalSpacing="@dimen/margin_extra_small"
            android:numColumns="auto_fit"
            android:padding="@dimen/padding_extra_small"
            android:scrollbars="none"
            android:stretchMode="columnWidth"
            android:verticalSpacing="@dimen/margin_extra_small" />

    </android.support.v4.widget.SwipeRefreshLayout>

My idea is as soon I scroll in GridView, Toolbar should appears/disappears with animation:

if (shown) {


view.animate()
                    .translationY(0)
                    .alpha(1)
                    .setDuration(HEADER_HIDE_ANIM_DURATION)
                    .setInterpolator(new DecelerateInterpolator());
        } else {
            view.animate()
                    .translationY(-view.getBottom())
                    .alpha(0)
                    .setDuration(HEADER_HIDE_ANIM_DURATION)
                    .setInterpolator(new DecelerateInterpolator());
        }

The problem is first grid items have partially overlapped by toolBar. Do you know how to solve the problem?

Addenda:

I have tried RelativeLayout as well as LinearLayout instead of FrameLayout for my Activity, but that will not be a solution and I get into another problem as described https://stackoverflow.com/questions/29163698/hiding-toolbar-when-scrolling-layout-under-toolbar-does-not-disapear

Upvotes: 1

Views: 1960

Answers (2)

Rahul M Mohan
Rahul M Mohan

Reputation: 293

try to change FrameLayout to LinearLayout with orientation vertical. Then the Gridview will placed bellow the Toolbar.

Upvotes: 2

Lamorak
Lamorak

Reputation: 11137

You could add an empty header to your GridView that would stay hidden under your custom header to provide the desired spacing. Since standart GridView does not support headers, you would need to use HeaderGridView. I have used this widget several times and it always works well.

Since you are using SwipeRefreshLayout you will also need need to adjust its progress view position. According to this answer this can be done with setProgressViewOffset().

Upvotes: 1

Related Questions