How to set android TabLayout in the bottom of the screen?

Question

My question is how I can set the new android material design TabLayout to be in the bottom of the screen, kind of like Instagram's bottom toolbar.

If you have never seen Instagram's UI here is a screenshot of it :

. If there is a better way of approaching this, please feel free to post it here (with a code example if possible), I will greatly appreciate it.

Here is my code: activity_main.xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

I have tried many methods and workarounds suggested by the Stack Overflow community, but none seems to work with this new implementation of tabs in android. I know this UI design does not follow android design guidelines, so please don't comment on it. This UI design is vital to my application's UX and I would appreciate getting an answer for it. Thank you!

Slosh

Full solution here: https://mcmap.net/q/131184/-how-can-i-set-tabs-at-the-bottom-and-also-hide-top-actionbar – Unsettle

Please check my solution. If I have solved your problem, make sure to mark it as an answer. – Rigby

Thank you so much guys. Both of you have saved my life. You guys don't know how thankful I am for your help and valuable answers I have received. Best Regards! – Slosh

@user562 you are very welcome. Happy coding! – Rigby

@user562 If possible then try to avoid tabs at bottom. Instagram follows iOS like tabs since day one. Android and Material design doesn't recommend that. – Cosma

this will help https://mcmap.net/q/131185/-how-to-place-tabs-at-bottom-of-app-in-a-tabbedactivity – Feat

Answer 1

I believe I have the best simple fix. Use a LinearLayout and set the height of the viewpager to be 0dp with a layout_weight="1". Make sure the LinearLayout has an orientation of vertical and that the viewpager comes before the TabLayout. Here is what mines looks like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <include layout="@layout/toolbar" android:id="@+id/main_toolbar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        />

</LinearLayout>

And as a bonus, you should create your toolbar only once as toolbar.xml. So that way all you have to do is used the include tag. Makes your layout's more clean. Enjoy!

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Update 11.2.2016: For those of you who don't know how to inflate the toolbar, here is how. Make sure that your Activity extends AppCompatActivity so you can call setSupportActionBar() and getSupportActionBar().

Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Rigby

how to make it in xamarin ? – Mumford

Nice it work for me . i can put more icon then bottom navigation bar – Anstice

Great answer, thanks! I also moved the tab indicator to the top using: app:tabIndicatorGravity="top" on the TabLayout – Earmark

Answer 2

I suggest to use androidx library as android support libraries may get deprecated soon.

We can actually add a tab layout to a viewpager. Below is the code snippet that I used in my project

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

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00a294"
        android:layout_gravity="bottom" />

</androidx.viewpager.widget.ViewPager>

layout_gravity="bottom" is the syntax that puts the tab layout to the bottom

Domingodominguez

Answer 3

I had a same problem on Android Studio 2.2. This is what i did,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:subtitleTextColor="@color/color_white"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="@string/call_log"
        app:titleTextColor="@color/color_white"
        />

    <RelativeLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/tabLayout" />

        <android.support.design.widget.TabLayout
            android:layout_alignParentBottom="true"
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"/>
    </RelativeLayout>

</LinearLayout>

Anticatalyst

Answer 4

Better segregate both AppBarLayout and tabLayout like my code below. This way you can modify the tab bar and view pager properties independently.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:layout_above="@+id/tabs"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                android:layout_alignParentBottom="true"/>
        </RelativeLayout>
    </android.support.design.widget.CoordinatorLayout>

Akiko

Answer 5

android:layout_alignParentBottom="true"

Add this setting in

android.support.design.widget.TabLayout

Reputation

Didn't work, thought it was too good to be true compared to the more complex answers. – Inaction

Answer 6

Top of the page LinearLayout settings and set android:gravity="bottom". Thats it. Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:gravity="bottom"> //Thats it.
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:id="@+id/tabLayout1">
        <android.support.design.widget.TabItem
        android:icon="@drawable/home"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem1" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/mypage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem2" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/friends"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem3" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/messages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem4" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/settings"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem5" />
    </android.support.design.widget.TabLayout>
</LinearLayout>

Karaganda

Answer 7

Replace Your TabLayout code with this

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:elevation="2dp" />

Arana