CODEWITHSUNDEEP
androidandroid-toolbarswiperefreshlayoutandroid-appbarlayout
Beta Kuang
Beta Kuang

Reputation: 113

Make SwipeRefreshLayout under Toolbar in AppBarLayout

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?

Upvotes: 1

Views: 3628

Answers (3)

Bryan
Bryan

Reputation: 15155

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.

Upvotes: 5

Chenmin
Chenmin

Reputation: 121

Were do you exactly want to show the circle? If you want to show it on the FrameLayout you should put swipeRefreshLayout above FrameLayout while not setting SwipeRefreshLayout as the root view.

Try this and let me know if it works.

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

Upvotes: 0

Nikhil
Nikhil

Reputation: 3711

Your toolbar should be outside SwipeRefreshLayout. Do it as follows

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

Upvotes: 0

Related Questions