How to change selected tab title textSize in Android

问题

I am trying to find a way to change text size of Tab Title when selected. Until now without exit. Hope someone can help me.

My code bellow:

XML :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tab_layout"
    app:tabSelectedTextColor="@android:color/holo_orange_dark"
    app:tabTextAppearance="@style/textAppearance">


</android.support.design.widget.TabLayout>


<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/pager_view"/>

Style used for tabTextAppearance:

<style name="textAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">18sp</item>
    <item name="android:textStyle">bold</item>
</style>

My adapter:

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private final Resources resources;
private static final int num = 3;

public ViewPagerAdapter(FragmentManager fm, Resources resources) {
    super(fm);
    this.resources = resources;
}

@Override
public Fragment getItem(int position) {
    Fragment fragment = null;

    switch (position) {
        case 0:
            fragment = new FragmentA();
            break;
        case 1:
            fragment = new FragmentB();
            break;
        case 2:
            fragment = new FragmentC();
            break;

    }

    return fragment;
}

@Override
public int getCount() {
    return num;
}

@Override
public CharSequence getPageTitle(int position) {
    String title = null;
    switch (position) {
        case 0:
            title = "A";
            break;
        case 1:
            title = "B";
            break;
        case 2:
            title = "C";
            break;
    }
    return title;
}
}

And My Carousel Fragment class:

 public class CarouselFragment extends Fragment {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter viewPagerAdapter;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.fragment_carousel, container, false);
        tabLayout = (TabLayout)root.findViewById(R.id.tab_layout);
        viewPager = (ViewPager)root.findViewById(R.id.pager_view);
        setHasOptionsMenu(true);
        return root;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);


        viewPagerAdapter = new ViewPagerAdapter(getChildFragmentManager(), getResources());
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
            viewPager.setAdapter(viewPagerAdapter);
            tabLayout.setSelectedTabIndicatorColor(Color.RED);
            tabLayout.setupWithViewPager(viewPager);
        }else {
            viewPager.setAdapter(viewPagerAdapter);
            tabLayout.setupWithViewPager(viewPager);
        }

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
//here i should do something, but what???

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
//here i should do something, but what???
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}

Many thanks in advance!

回答1:

use this code

for (int i = 0; i < tabLayout.getTabCount(); i++) {

    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {

        TextView tabTextView = new TextView(this);
        tab.setCustomView(tabTextView);

        tabTextView.getLayoutParams().width = ViewGroup.LayoutParams.WRAP_CONTENT;
        tabTextView.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;

        tabTextView.setText(tab.getText());

        if (i == 0) {
            tabTextView.setTextSize(16);
        }

    }

}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(tab.getPosition());
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTextSize(16);
            }
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(tab.getPosition());
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTextSize(14);
            }
        }
    }
}

回答2:

I would recommend to set custom tab.

First you need to initiate your custom tabs, otherwise it won't change anything.

Create a new layout with a TextView (you can add whatever you want to be in each tab).

In your onActivityCreated after your tabLayout.setupWithViewPager initiate your custom tabs:

for (int i = 0; i < 3; i++) { // 3 - A+B+C in your example
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {
        ViewGroup tabContainer = (ViewGroup) LayoutInflater.from(this).inflate(R.layout.custom_tab_item, tabLayout, false);
        if (tabContainer != null) {
            TextView yourTv = (TextView) tabContainer.findViewById(R.id.tv); 
            yourTv.setTextSize(18);
            tab.setCustomView(tabContainer);
        }
    }
}

Add listener tabLayout.addOnTabSelectedListener and Implement TabLayout.OnTabSelectedListener, In your onTabSelected use this:

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {
        View customView = tab.getCustomView();
        if (customView != null) {
            TextView yourTv = (TextView) customView.findViewById(R.id.tv);
            if (yourTv != null) {
                if (i == selectedTabIndex) {
                    yourTv.setTextSize(18);
                } else {
                    yourTv.setTextSize(16);
                }
            }
        }
    }
}

回答3:

You can set your own view to the TabLayout's individual tabs and you can change the size latter on the tab selection-

Here is the code hint -

        TabLayout mTabLayout = (TabLayout) findViewById(R.id.tab_layout);

        TabLayout.Tab tabOne = mTabLayout.newTab();
        tabOne.setCustomView(getLayoutInflater().inflate(R.layout.item_tab, mTabLayout, false));
        mTabLayout.addTab(tabOne);

        TabLayout.Tab tabTwo = mTabLayout.newTab();
        tabTwo.setCustomView(getLayoutInflater().inflate(R.layout.item_tab, mTabLayout, false));
        mTabLayout.addTab(tabTwo);
        tabTwo.select();
        // mTabLayout.setupWithViewPager(mViewPager);
        if (getResources().getDisplayMetrics().widthPixels > getResources().getDisplayMetrics().heightPixels) {
            mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        } else {
            mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        }


        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                ((TextView) tab.getCustomView().findViewById(R.id.text1)).setTextSize(16);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                ((TextView) tab.getCustomView().findViewById(R.id.text1)).setTextSize(13);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

iteb_tab.xml can be like -

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:text="One"
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

You can further synchronize the selection with viewpager page change as

            mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            @Override
            public void onPageSelected(int position) {
                mTabLayout.getTabAt(position).select();
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

Edit

You can further reduce your effort by setting your tab titles from the adapter itself -

        PagerAdapter mPagerAdapter = mViewPager.getAdapter();
        for (int position = 0; position < mPagerAdapter.getCount(); position++) {
            View view = (getLayoutInflater().inflate(R.layout.item_tab, mTabLayout, false));
            TextView label = (TextView) view.findViewById(R.id.text1);
            label.setText(mPagerAdapter.getPageTitle(position));
            TabLayout.Tab tab = mTabLayout.newTab();
            tab.setCustomView(view);
            mTabLayout.addTab(tab);
        }

Here is how it looks -

来源：https://stackoverflow.com/questions/44244469/how-to-change-selected-tab-title-textsize-in-android

标签

java

android

android-viewpager

styles

android-tablayout