Make SwipeRefreshLayout under Toolbar in AppBarLayout

Question

I use SwipeRefreshLayout as the root element of my layout as I need to refresh everything on the screen. The layout is listed below:

<SwipeRefreshLayout>
    <CoordinatorLayout>
        <ViewPager />
        <AppBarLayout>
            <Toolbar />
            <FrameLayout>
                ...
            </FrameLayout>
        <TabLayout />
    </CoordinatorLayout>
</SwipeRefreshLayout>

When I swipe down on the layout, the refresh circle of SwipeRefreshLayout appears from the top of the screen, on top of Toolbar. So I use SwipeRefreshLayout#setProgressViewOffset to make the circle start from an offset of the toolbar's height, but when the refresh completes, the circle will hang oddly on the toolbar for a moment before disappearing: screenshot

How could I make the refresh circle under the toolbar?

Answer 1

It seems as though you want to implement a coplanar indicator, as documented in the Material Design Guidelines. To do this, you should use either the setProgressViewEndTarget() or the setProgressViewOffset() methods:

// This method will offset the end of the indicator animation
int target = getResources().getDimensionPixelSize(R.dimen.indicator_end_target);
mSwipeRefreshLayout.setProgressViewEndTarget(true, target);

// This method allows you to set both the start and end values for the indicator animation
int start = getResources().getDimensionPixelSize(R.dimen.indicator_start);
int end = getResources().getDimensionPixelSize(R.dimen.indicator_end);
mSwipeRefreshLayout.setProgressViewOffset(true, start, end);

By setting the first parameter to true in each of these methods the indicator will animate its scale as it comes into view, instead of just getting clipped by the edge of the containing view.