如何讓 TabLayout 呈現在下方

情境

有時候你會想要 TabLayout 放置在手機畫面下方
其實只要調整一下 Layout 即可

相關參考

關於 TabLayout 的操作可以參考

• 如何使用 TabLayout
• 如何使用 ViewPager + TabLayout
• 如何讓TabLayout的Tab自動延展
• 如何讓 TabLayout 呈現在下方
• 如何使用ViewPager+TabLayout+Toolbar
• 如何使用Toolbar+DrawerLayout+Tab+SwipRefresh
• 如何使用CoordinatorLayout搭配AppBarLayout
• 如何使用DrawerLayout

程式碼下載

你可以到 GitHub 上面觀看或下載完整程式碼

• GitHub

程式碼說明

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.givemepass.bottomtablayoutdemo.MainActivity">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#000000"
        android:tabStripEnabled="false"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:id="@+id/tabs"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"/>
</RelativeLayout>

只需要指定他在整個 layout 的下方
就可以很簡單的完成這樣的功能

可是如果在底部其實不太需要下面那條橫槓 (Indicator) 的呈現
所以我們可以把它拿掉
只需要再加上這一行

app:tabIndicatorHeight="0dp"

就可以看到 TabLayout 漂亮的運作