Designing a pager indicator of a view

Question

I am creating a view pager indicator similar to this image in which the icons scroll to the center when clicked. How can I achieve this, I tried to view the Pager indicator and layout tab, but did not succeed.

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); } } } } 

insert this centering tablayout into the java class. use centering tablayout instead of tablayput in your xml design

Answer 2

I suggest you use the 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 out 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" />