How is TabItem used when placed in the layout XML? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How is TabItem used when placed in the layout XML? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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?

Answer

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>
We are here to answer your question about How is TabItem used when placed in the layout XML? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji