Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How is TabItem used when placed in the layout XML?

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?

like image 237
Nathan Fig Avatar asked Jun 26 '16 03:06

Nathan Fig


People also ask

What is TabItem in android?

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.

How to add Tab item in TabLayout android?

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.

How do I use TabLayout on Android?

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.


1 Answers

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> 
like image 190
Mike M. Avatar answered Sep 28 '22 00:09

Mike M.