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

bottom tablayout in android github
tab layout with bottom navigation in android
viewpager with bottom tabs bar in android
bottom navigation bar with viewpager android
android.support.design.widget.tablayout androidx
androidx tablayout dependency
tabitem android
bottom navigation bar android

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!

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

How to set android TabLayout in the bottom of the screen?, 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  How to set android TabLayout in the bottom of the screen? (4) 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 :

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>

Android TabLayout on the bottom of the screen, How exactly must I change it, that the tab bar will be placed on the bottom of the screen? On the TabLayout Tag I already tried to add android:  How to place the TabLayout at bottom of screen in Android? can I set tabs at the bottom and also hide top actionbar? 2. Android TabLayout on the bottom of the screen.

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>

Android Bottom Navigation Bar / View / Tabs with Fragments , Hello guys, This tutorial will cover how to use bottom navigation view in android studio. (This Duration: 25:26 Posted: Jan 15, 2018 On the TabLayout Tag I already tried to add android:layout_gravity="bottom", but it didnt change anything. android android-tablayout share | improve this question

android:layout_alignParentBottom="true"

Add this setting in

android.support.design.widget.TabLayout

Tab Layout, A horizontal layout to display tabs. To use a TabLayout with a static number of tabs, define each tab as a TabItem <com.google.android.material.tabs. Example of TabLayout. Add the following dependency to your app module's build.gradle file. In the activity_main.xml file, we have used Toolbar, ViewPager, etc. Create tab_background.xml file in the drawable folder. Add colors in the colors.xml file. Add theme in styles.xml file.

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>

Android Working with Bottom Navigation, 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. Bottom nav bars are now Android Canon. The main take-aways from this are: 1) Use bottom nav bars only for 3-5 icons. Any less, use tabs. Any more, use scrollable tabs (page down on that same link). 2) Avoid using a bottom nav bar and tabs together, and be sure the responsibilities of both are clearly separated if you do.

TabLayout, Android Bottom Navigation stays at the bottom of the screen providing navigation Tabs – Use when there are two navigational destinations. how can I change background colour of bottom bar for each fragment? should I  Population of the tabs to display is done through TabLayout.Tab instances. You create tabs via newTab(). From there you can change the tab's label or icon via setText(int) and setIcon(int) respectively. To display the tab, you need to add it to the layout via one of the addTab(Tab) methods.

Android Bottom Navigation Bar Example, TabLayout provides a horizontal layout to display tabs. From there you can change the tab's label or icon via setText(int) and Indicator gravity used to align the tab selection indicator to the bottom of the TabLayout . 2. addTab(Tab tab): This method is used to add a tab in the TabLayout. By using this method we add the tab which we created using newTab() method in the TabLayout. The tab will be added at the end of the list and If it is the first tab to be added then it will become the selected tab.

ViewPager with bottom Tabs Bar in Android, Shows how to make an android screen with bottom navigation bar BottomNavigationView widget it may look similar to the TabLayout of the same library. android.support.design:itemIconTint – It is used to set the icon tint  At first when you look at the new BottomNavigationView widget it may look similar to the TabLayout of the same library. But but do not get confused, as its implementation is a lot different than that of the later one. As the new bottom bar navigation implementation of Android is based out of menu items. Hence to populate a BottomNavigationView

Comments
  • Full solution here: stackoverflow.com/a/32985326/4409409
  • Please check my solution. If I have solved your problem, make sure to mark it as an answer.
  • 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!
  • @user562 you are very welcome. Happy coding!
  • @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.
  • how to make it in xamarin ?
  • Nice it work for me . i can put more icon then bottom navigation bar
  • Great answer, thanks! I also moved the tab indicator to the top using: app:tabIndicatorGravity="top" on the TabLayout
  • Didn't work, thought it was too good to be true compared to the more complex answers.