GridView under Toolbar - Hide ToolBar when Scrolling

Question

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

score 2 · Answer 1 · answered Jun 24 '15 at 08:18

2

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

answered Jun 24 '15 at 08:18

Rahul M Mohan

293
1
3
12

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

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().

edited May 23 '17 at 11:59

Community

1
1

answered Mar 21 '15 at 13:17

Lamorak

10,957
9
43
57

Then it ends up to a similar problem like : http://stackoverflow.com/questions/29184409/add-swiperefreshlayout-to-recyclerview-when-it-has-a-empty-header, So it is not a real solution. – Ali Mar 22 '15 at 19:57
Sorry, didn't notice that.. Would you like to have the refresh stripes above or below the toolbar? – Lamorak Mar 23 '15 at 08:00
Ofcourse bellow, at the top of grid/list, but not first item as it is header. – Ali Mar 23 '15 at 08:35
Edited my answer, hope it helps – Lamorak Mar 23 '15 at 08:52
I will give it a try soon, +1 for your help. – Ali Mar 23 '15 at 19:21
setProgressViewOffset() get two parameters : start and end. Do you know how to get the default ones? – Ali Mar 24 '15 at 13:02
How do you set the height of toolbar? _End_ should be the same I guess. Don't know about the default _start_, I would try some constants and see how they work.. At [some places](https://code.google.com/p/android/issues/detail?id=77712) they even use 0. – Lamorak Mar 24 '15 at 13:14

GridView under Toolbar - Hide ToolBar when Scrolling

2 Answers2