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?
TabItem is a special 'view' which allows you to declare tab items for a TabLayout within a layout. 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. See TabLayout for more information on how to use it.
The title and icon of Tabs are set through setText(int) and setIcon(int) methods of TabListener interface respectively. Tabs of layout are attached over TabLayout using the method addTab(Tab) method. We can also add tab item to TabLayout using TabItem of android design widget.
This example demonstrates how do I create a Tab Layout in android app. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 3 − Add the following code to res/layout/activity_main. xml.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With