1

J'utilise un FragmentPagerAdapter avec un ViewPager pour créer un TabLayout avec 4 onglets. Tout fonctionne bien, sauf pour la taille de la police.Comment puis-je définir les titres de mes onglets dans un TabLayout pour avoir la même taille de police?

J'ai essayé différentes solutions proposées dans les discussions suivantes, mais rien n'a fonctionné pour moi:

Text size of android design TabLayout tabs

How to increase icon size of tabs in TabLayout

android font size of tabs

Change the text size in tab in android

Voici comment mon TabLayout ressemble à l'instant:

Et ce sont mes classes associées:

MainActivity.class

private void setupUi() { 
    final MainPagerAdapter mainPagerAdapter = 
      new MainPagerAdapter(getSupportFragmentManager()); 
    viewPager.setAdapter(mainPagerAdapter); 
    tabLayout.setupWithViewPager(viewPager); 
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 
} 

MainPagerAdapter.class

public class MainPagerAdapter extends FragmentPagerAdapter { 

    private static final String UPCOMING_TITLE = "UPCOMING"; 
    private static final String INTERESTS_TITLE = "INTERESTS"; 
    private static final String ABOUT_TITLE = "ABOUT"; 
    private static final String ACCOUNT_TITLE = "ACCOUNT"; 

    private static final Integer TAB_COUNT = 4; 

    public MainPagerAdapter(final FragmentManager fragmentManager) { 
     super(fragmentManager); 
    } 

    @Override 
    public Fragment getItem(final int position) { 
     switch (position) { 
     case 0: 
     default: 
      return new UpcomingFragment(); 
     case 1: 
      return new InterestsFragment(); 
     case 2: 
      return new AccountFragment(); 
     case 3: 
      return new AboutFragment(); 
     } 
    } 

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

    @Override 
    public CharSequence getPageTitle(final int position) { 
     switch (position) { 
      case 0: 
       return UPCOMING_TITLE; 
      case 1: 
       return INTERESTS_TITLE; 
      case 2: 
       return ACCOUNT_TITLE; 
      case 3: 
       return ABOUT_TITLE; 
      default: 
       return null; 
     } 
    } 
} 

toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
    <android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:background="?attr/colorPrimary" 
    app:layout_scrollFlags="scroll|enterAlways" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> 

</android.support.v7.widget.Toolbar> 

styles.xml

<resources> 

    <!-- Base application theme. --> 
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
     <!-- Customize your theme here. --> 
     <item name="colorPrimary">@color/colorPrimary</item> 
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
     <item name="colorAccent">@color/colorPrimaryDark</item> 
    </style> 

    <style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout"> 
     <item name="tabIndicatorColor">?attr/colorAccent</item> 
     <item name="tabIndicatorHeight">2dp</item> 
     <item name="tabPaddingStart">0dp</item> 
     <item name="tabPaddingTop">0dp</item> 
     <item name="tabPaddingBottom">0dp</item> 
     <item name="tabPaddingEnd">0dp</item> 
     <item name="tabBackground">?attr/selectableItemBackground</item> 
     <item name="tabSelectedTextColor">?android:textColorPrimary</item> 
     <item name="android:background">@color/colorPrimary</item> 
     <item name="tabTextAppearance">@style/TabLayoutTextAppearance</item> 
    </style> 

    <style name="TabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"> 
     <item name="android:textSize">14sp</item> 
     <item name="android:textAllCaps">true</item> 
    </style> 

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> 

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/> 

</resources> 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" > 

    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/main_content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/appbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      android:theme="@style/AppTheme.AppBarOverlay"> 

      <include 
       android:id="@+id/toolbar" 
       layout="@layout/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tab_layout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 

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

     <android.support.v4.view.ViewPager 
      android:id="@+id/view_pager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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


    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_view_filter" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="right|end" 
     android:layout_marginTop="?attr/actionBarSize" 
     android:background="@color/md_white_1000" /> 

</android.support.v4.widget.DrawerLayout> 

VEUILLEZ ME ENREGISTRER!

+0

Ils ont déjà la même taille que je pensais. – Ibrahim

+0

pourquoi ne personnalisez-vous pas votre onglet avec la mise en page personnalisée –

+0

@Ibrahim Si vous regardez "Compte" et "À venir" la taille de la police diffère. –

Répondre

1

Essayez ceci dans activity_main.xml

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

Quel est l'effet de votre code ci-dessus? – Ibrahim

+0

Désolé, je mets maintenant le code à jour. –

+0

Merci, ça marche pour moi! J'ai supposé en quelque sorte que le style allait être utilisé par lui-même sur le TabLayout .. –

0

Alternative possible.

app: tabMode = "scrollable"

Cela rend les titres de chaque onglet de même taille de la police. Mais en même temps les onglets ne seront plus fixés. Mais si vous gardez le mode d'onglet "fixe", dans les téléphones avec une largeur plus petite, les titres semblent petits ou même aller à la ligne suivante. Donc, tabMode = "scrollable" est une meilleure option pour 4 onglets. Mais quand même, si vous avez besoin d'onglets fixes et de la même taille de police pour chaque titre, définissez la taille de la police dans le style et assurez-vous qu'elle est petite. Exemple:

`<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"> 
     <item name="android:textSize">13sp</item> 
     <item name="android:textAllCaps">true</item> 
    </style>`