Beta Kuang Beta Kuang - 1 month ago 9x
Android Question

Make SwipeRefreshLayout under Toolbar in AppBarLayout

I use

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

<ViewPager />
<Toolbar />
<TabLayout />

When I swipe down on the layout, the refresh circle of
appears from the top of the screen, on top of
. So I use
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?


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.