Changer la police du texte d'onglet dans le TabLayout de soutien de conception d'android

j'essaie de travailler sur le nouveau TabLayout de la bibliothèque de design android.

je veux changer le texte de l'onglet en police personnalisée . Et, j'ai essayé de chercher quelque style lié à TabLayout ,mais j'ai fini par ce .

s'il vous Plaît guide comment puis-je changer l'onglet polices de texte.

78
demandé sur Mario Velasco 2015-06-26 10:20:02

15 réponses

créer un TextView à partir du code Java ou XML comme ceci

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:textSize="15sp"
    android:textColor="@color/tabs_default_color"
    android:gravity="center"
    android:layout_height="match_parent"
/>

assurez-vous de garder l'id comme il est ici parce que le contrôle de TabLayout pour cet ID si vous utilisez custom textview

puis à partir du code gonfler cette mise en page et mettre la coutume Typeface sur ce textview et ajouter cette vue personnalisée à l'onglet

for (int i = 0; i < tabLayout.getTabCount(); i++) {
     //noinspection ConstantConditions
     TextView tv = (TextView)LayoutInflater.from(this).inflate(R.layout.custom_tab,null)
     tv.setTypeface(Typeface);       
     tabLayout.getTabAt(i).setCustomView(tv);
}
24
répondu Farmaan Elahi 2018-08-17 17:10:05

si vous utilisez TabLayout et que vous voulez changer la police, vous devez ajouter une nouvelle boucle à la solution précédente comme celle-ci:

private void changeTabsFont() {
    ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(Font.getInstance().getTypeFace(), Typeface.NORMAL);
                }
        }
    }
} 

consultez changer le style de police dans la barre d'action onglets à l'aide de sherlock

141
répondu praveen Sharma 2018-08-17 17:13:34

grande réponse de praveen Sharma. Juste un petit ajout: Au lieu d'utiliser changeTabsFont() partout où vous avez besoin de TabLayout , vous pouvez simplement utiliser votre propre CustomTabLayout .

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomTabLayout extends TabLayout {
    private Typeface mTypeface;

    public CustomTabLayout(Context context) {
        super(context);
        init();
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/Roboto-Regular.ttf");
    }

    @Override
    public void addTab(Tab tab) {
        super.addTab(tab);

        ViewGroup mainView = (ViewGroup) getChildAt(0);
        ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());

        int tabChildCount = tabView.getChildCount();
        for (int i = 0; i < tabChildCount; i++) {
            View tabViewChild = tabView.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
            }
        }
    }

}

et encore une chose. TabView est un LinearLayout avec TextView à l'intérieur (il peut aussi éventuellement contenir ImageView ). Donc vous pouvez rendre le code encore plus simple:

@Override
public void addTab(Tab tab) {
    super.addTab(tab);

    ViewGroup mainView = (ViewGroup) getChildAt(0);
    ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());
    View tabViewChild = tabView.getChildAt(1);
    ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
}

mais je ne le recommande pas. Si TabLayout l'implémentation va changer, ce code peut fonctionner incorrectement ou même se planter.

une autre façon de personnaliser TabLayout est d'y ajouter custom view. Voici le grand exemple .

47
répondu Andrei Aulaska 2015-10-22 15:37:24

créez votre propre style personnalisé et utilisez le style parent comme parent="@android:style/TextAppearance.Widget.TabWidget"

et dans la mise en page de votre onglet utilisez ce style comme app:tabTextAppearance="@style/tab_text"

exemple: Style:

<style name="tab_text" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:fontFamily">@font/poppins_regular</item>
</style>

Exemple: Onglet mise en page de la composante:

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabTextAppearance="@style/tab_text" />
40
répondu Milind Mevada 2017-08-22 11:51:08

la méthode suivante va changer la police en entier ViewGroup récursivement. J'ai choisi cette méthode parce que vous n'avez pas à vous soucier de la structure interne de TabLayout . J'utilise Calligraphie bibliothèque pour définir une police.

void changeFontInViewGroup(ViewGroup viewGroup, String fontPath) {
    for (int i = 0; i < viewGroup.getChildCount(); i++) {
        View child = viewGroup.getChildAt(i);
        if (TextView.class.isAssignableFrom(child.getClass())) {
            CalligraphyUtils.applyFontToTextView(child.getContext(), (TextView) child, fontPath);
        } else if (ViewGroup.class.isAssignableFrom(child.getClass())) {
            changeFontInViewGroup((ViewGroup) viewGroup.getChildAt(i), fontPath);
        }
    }
}
16
répondu Egis 2016-04-22 14:59:40

pour la prise en charge de la conception 23.2.0, en utilisant setupWithViewPager, vous devrez déplacer le code d'addTab(tab tab) à addTab(Tab tab, boolean setSelected).

11
répondu ejw 2016-03-07 18:37:43

Eh bien, je l'ai trouvé simple dans 23.4.0 sans utiliser une boucle. Il suffit de surcharger addTab (tab Tab Tab de@NonNull, boolean setSelected) comme suggéré par @ejw.

@Override
public void addTab(@NonNull Tab tab, boolean setSelected) {
    CoralBoldTextView coralTabView = (CoralBoldTextView) View.inflate(getContext(), R.layout.coral_tab_layout_view, null);
    coralTabView.setText(tab.getText());
    tab.setCustomView(coralTabView);

    super.addTab(tab, setSelected);
}

et voici le XML

<?xml version="1.0" encoding="utf-8"?>
<id.co.coralshop.skyfish.ui.CoralBoldTextView
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/custom_text"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:ellipsize="end"
   android:gravity="center"
   android:singleLine="true"
   android:textColor="@color/graylove"
   android:textSize="@dimen/tab_text_size" />

Espère que ça pourrait aider :)

8
répondu elsennov 2016-05-26 12:25:23

vous pouvez utiliser ceci, ça marche pour moi.

 private void changeTabsFont() {
    ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                AssetManager mgr = getActivity().getAssets();
                Typeface tf = Typeface.createFromAsset(mgr, "fonts/Roboto-Regular.ttf");//Font file in /assets
                ((TextView) tabViewChild).setTypeface(tf);
            }
        }
    }
}
6
répondu pavel 2017-08-13 14:13:40

Comme Andrei , a répondu, vous pouvez modifier fontface en étendant TabLayout de la classe. Et comme Penzzz dit, vous ne pouvez pas le faire dans addTab méthode. Remplacer onLayout méthode comme suit:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom){
    super.onLayout(changed, left, top, right, bottom);

    final ViewGroup tabStrip = (ViewGroup)getChildAt(0);
    final int tabCount = tabStrip.getChildCount();
    ViewGroup tabView;
    int tabChildCount;
    View tabViewChild;

    for(int i=0; i<tabCount; i++){
        tabView = (ViewGroup)tabStrip.getChildAt(i);
        tabChildCount = tabView.getChildCount();
        for(int j=0; j<tabChildCount; j++){
            tabViewChild = tabView.getChildAt(j);
            if(tabViewChild instanceof AppCompatTextView){
                if(fontFace == null){
                    fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.IranSans));
                }
                ((TextView) tabViewChild).setTypeface(fontFace, Typeface.BOLD);
            }
        }
    }
}

doit écraser la méthode onLayout, parce que, lorsque vous utilisez setupWithViewPager méthode pour lier le TabLayout avec le ViewPager, vous devez définir le texte des onglets soit avec la méthode setText ou dans le PagerAdapter après cela et quand cela s'est produit, la méthode onLayout est appelée Sur le groupe de vue parent (TabLayout) et c'est l'endroit où mettre le paramètre fontface.(Changer une cause TextView text cause en appelant la méthode onLayout de son parent - un tabView a deux enfants, L'un est ImageView L'autre est TextView)

5
répondu Arash 2017-04-23 05:15:40

ma méthode de résolution comme ceci ,changer le texte de l'onglet spécifié,

 ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
 ViewGroup vgTab = (ViewGroup) vg.getChildAt(1);
 View tabViewChild = vgTab.getChildAt(1);
 if (tabViewChild instanceof TextView) {
      ((TextView) tabViewChild).setText(str);
 }
3
répondu Smish jack 2018-08-17 17:14:44

pour utiliser le support des polices de caractères dans la fonctionnalité XML sur les périphériques tournant Android 4.1 (niveau API 16) et plus, utilisez la bibliothèque de Support 26+.

  1. clic droit dossier res
  2. Nouveau -> Android annuaire de ressources-> sélectionnez la police de caractères -> Ok
  3. mettez votre fichier myfont.ttf dans le dossier de police nouvellement créé

sur res/values/styles.xml ajouter:

<style name="customfontstyle" parent="@android:style/TextAppearance.Small">
    <item name="android:fontFamily">@font/myfont</item>
</style>

sur le fichier de mise en page ajouter app: tabTextAppearance= "@style / customfontstyle",

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabTextAppearance="@style/customfontstyle"
    app:tabMode="fixed" />

veuillez vous référer à [polices en xml].( https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml )

2
répondu Thomas V J 2018-08-17 17:17:36

Mon 2p, Kotlin avec la vérification des références, applicables partout où il va s'arrêter si quelque chose est faux.

private fun setTabLayouFont(tabLayout: TabLayout) {
    val viewGroupTabLayout = tabLayout.getChildAt(0) as? ViewGroup?
    (0 until (viewGroupTabLayout?.childCount ?: return))
            .map { viewGroupTabLayout.getChildAt(it) as? ViewGroup? }
            .forEach { viewGroupTabItem ->
                (0 until (viewGroupTabItem?.childCount ?: return))
                        .mapNotNull { viewGroupTabItem.getChildAt(it) as? TextView }
                        .forEach { applyDefaultFontToTextView(it) }
            }
}
1
répondu Rafael Ruiz Muñoz 2018-02-28 11:41:17
I think this is easier way.

<android.support.design.widget.TabLayout
   android:id="@+id/tabs"
   app:tabTextColor="@color/lightPrimary"
   app:tabSelectedTextColor="@color/white"
   style="@style/CustomTabLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>
<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
   <item name="tabMaxWidth">20dp</item>
   <item name="tabMode">scrollable</item>
   <item name="tabIndicatorColor">?attr/colorAccent</item>
   <item name="tabIndicatorHeight">2dp</item>
   <item name="tabPaddingStart">12dp</item>
   <item name="tabPaddingEnd">12dp</item>
   <item name="tabBackground">?attr/selectableItemBackground</item>
   <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
   <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
   <item name="android:textSize">16sp</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:textColorSecondary</item>
   <item name="textAllCaps">false</item>
</style>
0
répondu sudhakara 2018-08-20 13:15:28

Kotlin extension qui a fonctionné pour moi:

fun TabLayout.setFont(font: FontUtils.Fonts) {
    val vg = this.getChildAt(0) as ViewGroup
    for (i: Int in 0..vg.childCount) {
        val vgTab = vg.getChildAt(i) as ViewGroup?
        vgTab?.let {
            for (j: Int in 0..vgTab.childCount) {
                val tab = vgTab.getChildAt(j)
                if (tab is TextView) {
                    tab.typeface = FontUtils.getTypeFaceByFont(FontUtils.Fonts.BOLD, context)
                }
            }
        }
    }
}
0
répondu Michał Dobi Dobrzański 2018-09-02 14:07:47

Changement

if (tabViewChild instanceof TextView) {

pour

if (tabViewChild instanceof AppCompatTextView) { 

pour que ça marche avec android.soutien.conception.widget.TabLayout (au moins de com.Android.support: design: 23.2.0)

-2
répondu Penzzz 2016-03-04 09:14:35