@@ -43,7 +43,11 @@ class TabStrip extends LinearLayout {
4343
4444 private final int mDefaultBottomBorderColor ;
4545
46+ // selected tab position (final)
4647 private int mSelectedPosition ;
48+ // current tab position for when the view is animating (scrolling)
49+ private int mSelectionTabPosition ;
50+ // scrolling offset in relation to the current tab position
4751 private float mSelectionOffset ;
4852
4953 private final SimpleTabColorizer mDefaultTabColorizer ;
@@ -173,6 +177,7 @@ private void updateTabsTextFontSize(){
173177
174178
175179 void onTabsViewPagerPageChanged (int position , float positionOffset ) {
180+ mSelectionTabPosition = position ;
176181 mSelectionOffset = positionOffset ;
177182 invalidate ();
178183 }
@@ -206,24 +211,30 @@ protected void dispatchDraw(Canvas canvas) {
206211 final SimpleTabColorizer tabColorizer = mDefaultTabColorizer ;
207212
208213 // Thick colored underline below the current selection
209- if (childCount > 0 && mSelectedPosition < childCount ) {
210- View selectedTitle = getChildAt (mSelectedPosition );
214+ if (childCount > 0 && mSelectionTabPosition < childCount ) {
215+ View selectedTitle = getChildAt (mSelectionTabPosition );
211216 int left = selectedTitle .getLeft ();
217+ int width = selectedTitle .getWidth ();
212218 int right = selectedTitle .getRight ();
213- int color = tabColorizer .getIndicatorColor (mSelectedPosition );
214-
215- if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount () - 1 )) {
216- int nextColor = tabColorizer .getIndicatorColor (mSelectedPosition + 1 );
219+ int color = tabColorizer .getIndicatorColor (mSelectionTabPosition );
220+ int nextTab = mSelectionTabPosition + 1 ;
221+
222+ // we're always at mSelectionTabPosition + mSelectionOffset (ex: 1 + 0.5)
223+ // if we mSelectionOffset > 0f then we need to mutate the position, width and color of the selection
224+ // if we're on the last tab, nextTab will be getChildCount() + 1 so it won't enter as there's nothing to animate
225+ if (mSelectionOffset > 0f && nextTab >= 0 && nextTab < getChildCount ()) {
226+ int nextColor = tabColorizer .getIndicatorColor (nextTab );
217227 if (color != nextColor ) {
218228 color = blendColors (nextColor , color , mSelectionOffset );
219229 }
220230
221231 // Draw the selection partway between the tabs
222- View nextTitle = getChildAt (mSelectedPosition + 1 );
223- left = (int ) (mSelectionOffset * nextTitle .getLeft () +
224- (1.0f - mSelectionOffset ) * left );
225- right = (int ) (mSelectionOffset * nextTitle .getRight () +
226- (1.0f - mSelectionOffset ) * right );
232+ View nextTitle = getChildAt (nextTab );
233+ // left is the current tab left + it's width * mSelectionOffset ex: 0 + (100 * 0.5) = 50, halfway through the current cell
234+ left = (int ) (left + mSelectionOffset * width );
235+ // right is the tab right + the next tab's width * mSelectionOffset ex: 100 + (200 * 0.5) = 200, halfway through the next cell
236+ // this ensures that the width mutates smoothly as we move between cells
237+ right = (int ) (right + mSelectionOffset * nextTitle .getWidth ());
227238 }
228239
229240 mSelectedIndicatorPaint .setColor (color );
0 commit comments