The TabLayout
documentation gives an example of nesting TabItem
directly inside TabLayout
like so:
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="@string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="@drawable/ic_android"/>
</android.support.design.widget.TabLayout>
But it gives no example of how this could be used in practice, and the documentation for TabItem says:
This view is not actually added to TabLayout, it is just a dummy which allows setting of a tab items's text, icon and custom layout.
So what is TabItem
for? After extensive Googling, I cannot find a single example of anyone defining TabItems in XML. Is there any way to set up a tabbed activity using TabItem in the resource file as shown above?
This appears to be a relatively recent addition to the design library, apparently added in version 23.2.0, though it's not mentioned in the revision history. It's functionality is pretty basic, and the only attributes it seems to use are the three given in its docs: text
, icon
, and layout
.
From testing, it seems it's basically an XML shortcut for creating a new Tab
, and setting its text, icon, and custom View
, as one would usually do in code. When it says "This view is not actually added to TabLayout", I believe it's meant to suggest that it's not a View
in the regular sense, in that you can't set any kind of standard layout attribute on it, like layout_width
or background
. It simply serves to cause the TabLayout
to create a new Tab
for each TabItem
, and call setText()
, setIcon()
, and setCustomView()
accordingly.
For example, to add a Tab
in code, we would usually do something like this:
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
// Add Tab
TabLayout.Tab tab = tabLayout.newTab();
tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);
tabLayout.addTab(tab);
Whereas now we can replace everything after the comment above by adding a TabItem
in the layout.
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout="@layout/tab"
android:text="Tab 1"
android:icon="@drawable/ic_launcher" />
</android.support.design.widget.TabLayout>
Do note that the same requirements for the custom View
layout still apply. That is, the TextView
for the text must have the system Resource ID @android:id/text1
, and the ImageView
for the icon must have the ID @android:id/icon
. As an example, the R.layout.tab
from above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView android:id="@android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>