designing a view pager indicator like this

Question

I am creating a view pager indicator like this image , in which icons scroll to center when clicked , How can I achieve this , I have tried View Pager indicator and tabbed layout but no success .

Answer 1

public class CenteringTabLayout extends TabLayout {
private Typeface mTypeface;

public CenteringTabLayout(Context context) {
    super(context);
}

public CenteringTabLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CenteringTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}



@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    View firstTab = ((ViewGroup) getChildAt(0)).getChildAt(0);
    View lastTab = ((ViewGroup) getChildAt(0)).getChildAt(((ViewGroup) getChildAt(0)).getChildCount() - 1);
   if(firstTab!=null)

    ViewCompat.setPaddingRelative(getChildAt(0), (getWidth() / 2) - (firstTab.getWidth() / 2), 0, (getWidth() / 2) - (lastTab.getWidth() / 2), 0);

}

@Override
public void addOnTabSelectedListener(@NonNull OnTabSelectedListener listener) {
    super.addOnTabSelectedListener(listener);

}

@Override
public void addTab(@NonNull Tab tab) {
    super.addTab(tab);
    ViewGroup mainView = (ViewGroup) getChildAt(0);
    ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());

    int tabChildCount = tabView.getChildCount();
    for (int i = 0; i < tabChildCount; i++) {
        View tabViewChild = tabView.getChildAt(i);
        if (tabViewChild instanceof TextView) {
            ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
        }
    }
}
}

paste this centering tablayout in you java class. use centering tablayout instead of tablayput in your xml design

Answer 2

I suggest you to use BottomBar

 <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />

OR

Also check BottomNavigation

<it.sephiroth.android.library.bottomnavigation.BottomNavigation
        android:id="@+id/BottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:bbn_entries="@menu/bottombar_menu_4items"
        app:bbn_scrollEnabled="true"
        app:bbn_badgeProvider="@string/bbn_badgeProvider"
        app:layout_behavior="@string/bbn_phone_view_behavior" />