Android how to position TabLayout to the bottom of the screen (for Google's material design library TabLayout)

Question

I am trying to use a TabLayout joined with a ViewPager to create three swipeable fragments. However, I ran against a problem: I want the TabLayout to be at the bottom of the screen, but the ViewPager is forcing it to be at the top.

TabLayout used to be in the android.support.design.widget library. This library, however, has been changed since androidx was introduced. The new library is com.google.android.material.tabs.TabLayout.

Previous (and outdated) posts (example1, example2) suggest a simple solution to the above problem by simply creating a vertical LinearLayout and specifying the ViewPager and TabLayout as two separate elements of that LinearLayout.

The above solution is no longer viable due to the fact that now, you have to specify the TabLayout to be an element inside of the ViewPager (reference), like this:

<androidx.viewpager.widget.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        >
    </com.google.android.material.tabs.TabLayout>
</androidx.viewpager.widget.ViewPager>

Then, to "merge" the ViewPager with the TabLayout, the setupWithViewPager(ViewPager vp) method has to be called on the TabLayout instance:

ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
MainPagerAdapter mpa = new MainPagerAdapter(getSupportFragmentManager(), 3);
viewPager.setAdapter(mpa);

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

Now, how can I neatly make the TabLayout go to the bottom of the ViewPager, either from xml code or programmatically?

Nudge

Possible duplicate of How to set android TabLayout in the bottom of the screen? – Illustrator

Answer 1

I've found an answer: simpy add the android:layout_gravity="bottom" to the TabLayout in xml.

So the xml implementation now looks like:

<androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="bottom"
            >
        </com.google.android.material.tabs.TabLayout>
    </androidx.viewpager.widget.ViewPager>

Nudge

Great work thank you , this should be the answer. – Birthstone

Answer 2

According to your reference - To include a TabLayout in a ViewPager, add a TabLayout element inside of the ViewPager element.

but it doesn't mean you cannot use TabLayout outside ViewPager. so you can use any answers from previous posts or you can try like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
<androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tab_layout"/>

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_height="48dp"/></RelativeLayout>

Sissy

Found a simpler solution... check my answer :D – Nudge