Customizing TabLayout Buttons

Question

Currently I have the following looks of TabLayout:

and it's code is a normal TabLayout:

and I want to achieve the following style:

How to possibly achieve this? the function of the button at the center is to call an activity and the TabLayout will be place at the bottom of the screen.

NOTE: I actually have 4 Tabs and not just 2

this was my code before

and I'm using a FloatingActionButton and place it on the bottom|center

I just decided to used TabLayout but I have no idea on how to apply my style.

Thanks!

UPDATE

seems like BottomNavigationView is what I want to be happen, but it failed to meet my requirement. I also don't want to use external library for this. So what I did is just remove the TabLayout and put the ViewPager at the top of the parent and my custom TabLayout style in the bottom. One of my requirement is to disable the swipe of ViewPager so I disabled the swipe on it by using custom class and trigger the pages onClick of ImageButton. Thanks for answers and suggestions. I'll put my code later.

UPDATE: HERE IS MY CODE

First I created a class NonSwipeableViewPager for Custom ViewPager, this will disable the swipe function of it.(I searched for this, I'm not actually the author of this NonSwipeableViewPager class)

public class NonSwipeableViewPager extends ViewPager {

    public NonSwipeableViewPager(Context context) {
        super(context);
        setMyScroller();
    }

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

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        // Never allow swiping to switch between pages
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // Never allow swiping to switch between pages
        return false;
    }

    //down one is added for smooth scrolling

    private void setMyScroller() {
        try {
            Class viewpager = ViewPager.class;
            Field scroller = viewpager.getDeclaredField("mScroller");
            scroller.setAccessible(true);
            scroller.set(this, new MyScroller(getContext()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public class MyScroller extends Scroller {
        public MyScroller(Context context) {
            super(context, new DecelerateInterpolator());
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy, int duration) {
            super.startScroll(startX, startY, dx, dy, 350 /*1 secs*/);
        }
    }

    //Disable Left and Right arrow swipe for keyboard in some devices
    @Override public boolean executeKeyEvent(KeyEvent event) { return false; }

}

second, Initialize content_main.xml layout. Remember! This is the content_main.xml, I @include this from activity_main.xml where the ToolBar and FloatingActionButton view are initialize.

third, the activity_main.xml layout

lastly, the MainActivity.class

public class MainActivity extends AppCompatActivity {

    private NonSwipeableViewPager viewPager; //Declare Custom ViewPager Class
    ImageButton btn_one, btn_two, btn_three, btn_four; //Declare ImageButton

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /**SOME CODE HERE**/

       //Initialize ImageButton
       btn_messages = (ImageButton) findViewById(R.id.btn_one);
       btn_people = (ImageButton) findViewById(R.id.btn_two);
       btn_video_call = (ImageButton) findViewById(R.id.btn_three);
       btn_voice_call = (ImageButton) findViewById(R.id.btn_four);

       //Initialize FloatingActionButton which in the Center at the Bottom of the Parent
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Handle some functions here...
            }
        });

        //Initialize ViewPager
        viewPager = (NonSwipeableViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager); //Call setupViewPager to setup the ViewPager

        //Initialize OnClickListener in every ImageButton
        btn_one.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(0); //Trigger Page 1 of ViewPager
            }
        });

        btn_two.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(1); //Trigger Page 2 of ViewPager
            }
        });

        btn_three.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(2); //Trigger Page 3 of ViewPager
            }
        });

        btn_four.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(3); //Trigger Page 4 of ViewPager
            }
        });

    }

    //This function setup the ViewPager
    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new Fragment_Zero(), "ZERO");
        adapter.addFragment(new Fragment_One(), "ONE");
        adapter.addFragment(new Fragment_Two(), "TWO");
        adapter.addFragment(new Fragment_Three(), "THREE");
        viewPager.setAdapter(adapter);
    }

    //Inner Class for ViewPagerAdapter
    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List mFragmentList = new ArrayList<>();
        private final List mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return null;
            // return mFragmentTitleList.get(position);
        }
    }
    //END
}

Output:

user_8117793 · Answer

This Layout can be achieved by Bottom Navigation View.

On the Centre of navigation View Use a Floating Button.

https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0

https://segunfamisa.com/posts/bottom-navigation-view-android

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

user_1781718 · Answer

I suggest you to use Bottom Navigation View to achieve that. You can find documentation here

But native BottomNavigationView has lots of limitations on design. So you can use some custom library like :

https://github.com/peng8350/JPTabBar

or

https://github.com/aurelhubert/ahbottomnavigation

or

You can use a custom way like this one.

user_8164116 · Answer

Use ConstraintLayout and add Left,Right and Bottom constraint to it.

Place your other views inside it.

Gradle Dependency :

compile 'com.android.support.constraint:constraint-layout:1.0.2'

To learn more about ConstraintLayout

Customizing TabLayout Buttons

3 Answers