Getting the textview of the TabLayout's tab

Question

I want to programmatically change a tab's textview. Is there any way to do this?

There are answers only concerning the old TabHost view, I am using the TabLayout used by Google's Material Design library using android.support.design.widget.TabLayout.

For TabHost: How to add padding to a tabs label?

Justajustemilieu

comic book guy's voice "Worst, question, everrr". Just kidding, but read how to write a good question here - stackoverflow.com/help/how-to-ask. In the future you should include code, a detailed description, and what you have tried already. – Upland

It's quite hard to supply code in this context, and what I have tried is the answer below, just sharing because getting this answer is especially tricky. Detailed description however... – Justajustemilieu

Answer 1

With a given tab:

 int wantedTabIndex = 0;
 TextView tv = (TextView)(((LinearLayout)((LinearLayout)mTabLayout.getChildAt(0)).getChildAt(wantedTabIndex)).getChildAt(0));
 tv.setText("Hello world!");

Justajustemilieu

This crashes with java.lang.ClassCastException: android.widget.ImageView cannot be cast to android.widget.TextView in support lib 22.2.1 – Firebox

I am also running 22.2.1 via "compile 'com.android.support:design:22.2.1'", let me know with some code... Hopefully I can help you – Justajustemilieu

can you elaborate on that? getting same exception. the code already looks shite. lol – Kerosene

this is not a safe way to go. android team can anytime update the view group hierarchy which will crash the app after updating the support libraries – Kautz

Answer 2

This is working solution

int wantedTabIndex = 0;
TextView tv = (TextView)(((LinearLayout)((LinearLayout)mTabLayout.getChildAt(0)).getChildAt(wantedTabIndex)).getChildAt(1));
tv.setText("Hello world!");

Just change the last index Zero to One now above code will work

Removed Crash

java.lang.ClassCastException: android.widget.ImageView cannot be cast to android.widget.TextView

Instrument

what does the 1 signify. for example i have 2 tabs. want to update text style on both.??? – Kerosene

Each tab is a LinearLayout. So your LinearLayout has 2 tabs/views. Inside of each tab, the TextView is index 1. – Folly

Answer 3

    public static void setTextViewsCapsOff(View view) {
        if (!(view instanceof ViewGroup)) {
            return;
        }
        ViewGroup group = (ViewGroup)view;
        for (int i = 0; i < group.getChildCount(); i++) {
            View child = group.getChildAt(i);
            if (child instanceof TextView) {
                ((TextView)child).setAllCaps(false);
            } else {
                setTextViewsCapsOff(child);
            }
        }
    }

Pass in your TabLayout to this recursive method. It will find any child that is a TextView and set its All Caps mode off. Avoids all the other very specific typecasting. If it does not appear to work call it later in your code. I had it in onCreate but that did not work. Called it later in code and it worked perfectly.

Affects all Tabs, not just one but I figure this is the most common usage. Not specific to TabLayout either. Can be used for any layout that contains TextViews you want to change.

Markowitz

This is a much cleaner and more future-proof solution than the accepted one 👍 – Grovergroves

Answer 4

This worked for me:

tabLayout.getTabAt(0).setText("some text");

Replace 0 with the index of the tab you want to edit. I think your tabLayout needs to be populated before calling this, otherwise tablayout.getTabAt(0) will return null.

Fag

Answer 5

I think the best thing to do here is create a custom layout with a TextView and then assign the custom view to the tabs you want to edit

final TabLayout.Tab tabAt = tabLayout.getTabAt(index);
tabAt.setCustomView(myLayoutId);

In this way you can do whatever you want with the TextView that is inside the layout

Thriller

tabLayout.getTabAt(index); returns null value as my tab layout initially empty – Herder

Answer 6

Add onTabSelectedListener to your tabLayout to set text dynamically. so in this approach when tab will be selected text will become "selected" or other tab

 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getCustomView().setAlpha(1.0f);
            ((TextView) tab.getCustomView()).setTextSize(12);
            ((TextView) tab.getCustomView()).setText("Selected");
            Log.d("TabBar", "selected");
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getCustomView().setAlpha(0.3f);//to set alpha 

            ((TextView) tab.getCustomView()).setTextSize(11);
            ((TextView) tab.getCustomView()).setText("DeSelected");
            Log.d("TabBar", "unselected");
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            Log.d("TabBar", "reselected");
        }
    });

to set tab as default selected then use this statement

tabLayout.getTabAt(0).select(); //this is used to set tab as default

Betrothed

Answer 7

Kevin answer is great! (https://mcmap.net/q/1119167/-getting-the-textview-of-the-tablayout-39-s-tab). Relying on this answer I create realization for apply any changes for TextView in Kotlin:

private fun applyForTextView(parent: ViewGroup, func: (TextView) -> Unit) {
    for (i in 0 until parent.childCount) {
        when (val child = parent.getChildAt(i)) {
            is TextView -> func(child)
            is ViewGroup -> applyForTextView(child, func)
        }
    }
}

How it use:

applyForTextView(tabLayout) { it.isAllCaps = false }

Conformity