Ajouter des icônes + du texte à TabLayout
Je travaille sur un écran contenant trois onglets. J'essaie d'ajouter une icône avec Mon texte dans des onglets. Je veux que l'image soit en haut du texte et qu'il y ait un espace entre eux.
public class HomeScreen extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
private Toolbar toolbar;
private ViewPager pager;
private ViewPagerAdapter adapter;
private SlidingTabLayout tabs;
private CharSequence Titles[] = {"News", "Most Views", "Chart"};
int Numboftabs = 3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_screen);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
//MAhmoud Code Addtion
// getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// getSupportActionBar().setIcon(R.drawable.ic_launcher);
// Creating The ViewPagerAdapter and Passing Fragment Manager, Titles
// fot the Tabs and Number Of Tabs.
adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles,
Numboftabs);
// Assigning ViewPager View and setting the adapter
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
// Assiging the Sliding Tab Layout View
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setDistributeEvenly(true);
tabs.setViewPager(pager);
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}}
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
CharSequence Titles[];
int NumbOfTabs;
public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[],
int mNumbOfTabsumb) {
super(fm);
this.Titles = mTitles;
this.NumbOfTabs = mNumbOfTabsumb;
}
// This method return the fragment for the every position in the View Pager
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Tap1();
case 1:
return new Tap2();
case 2:
return new Tap3();
}
return null;
}
// This method return the titles for the Tabs in the Tab Strip
@Override
public CharSequence getPageTitle(int position) {
return Titles[position];
}
// This method return the Number of tabs for the tabs Strip
@Override
public int getCount() {
return NumbOfTabs;
}}
Essayez de cette façon c'est exactement ce que vous cherchez
http://www.androidhive.info/2015/09/Android-material-design-working-with-tabs/
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ic_tab_favourite,
R.drawable.ic_tab_call,
R.drawable.ic_tab_contacts
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new OneFragment(), "ONE");
adapter.addFrag(new TwoFragment(), "TWO");
adapter.addFrag(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
commencez par créer un fichier XML de mise en page dont la structure de tabulation vous convient. Par exemple, une simple icône située en haut d'un texte. ainsi: 
1. créez la disposition d'onglet de navigation xml: dans le dossier layout> nav_tab.xml
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/nav_tab"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical"
Android:gravity="center_horizontal">
<ImageView
Android:layout_width="wrap_content"
Android:layout_height="@dimen/nav_icon"
Android:scaleType="centerInside"
Android:id="@+id/nav_icon"
Android:layout_marginBottom="@dimen/tiny_padding"/>
<TextView
Android:id="@+id/nav_label"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:fontFamily="@string/font_fontFamily_medium"
Android:shadowColor="@Android:color/black"
Android:textColor="@color/dark_grey"
Android:textSize="@dimen/nav_tab_label_font_size"
tools:text="@string/nav_home" />
</LinearLayout>
donnez votre mise en page et votre identifiant à gonfler, et donnez également les identifiants ImageView et TextView à référencer ultérieurement après avoir gonflé la mise en page parente.
2. Définissez vos icônes dans le dossier drawable et les étiquettes dans le fichier strings.xml.
et référencez-les par leur identifiant de ressource dans un tableau ordonné selon vos souhaits:
private int[] navIcons = {
R.drawable.ico_home,
R.drawable.ico_search,
R.drawable.ico_notification,
R.drawable.ico_profile
};
private int[] navLabels = {
R.string.nav_home,
R.string.nav_search,
R.string.nav_notifications,
R.string.nav_profile
};
// another resouces array for active state for the icon
private int[] navIconsActive = {
R.drawable.ico_home_red,
R.drawable.ico_search_red,
R.drawable.ico_notification_red,
R.drawable.ico_profile_red
};
3. configurez votre TabLayout avec votre ViewerPager:
TabLayout navigation = (TabLayout) findViewById(R.id.navigation);
navigation.setupWithViewPager(mainView/* the viewer pager object*/);
maintenant partie de personnalisation:
// loop through all navigation tabs
for (int i = 0; i < navigation.getTabCount(); i++) {
// inflate the Parent LinearLayout Container for the tab
// from the layout nav_tab.xml file that we created 'R.layout.nav_tab
LinearLayout tab = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.nav_tab, null);
// get child TextView and ImageView from this layout for the icon and label
TextView tab_label = (TextView) tab.findViewById(R.id.nav_label);
ImageView tab_icon = (ImageView) tab.findViewById(R.id.nav_icon);
// set the label text by getting the actual string value by its id
// by getting the actual resource value `getResources().getString(string_id)`
tab_label.setText(getResources().getString(navLabels[i]));
// set the home to be active at first
if(i == 0) {
tab_label.setTextColor(getResources().getColor(R.color.efent_color));
tab_icon.setImageResource(navIconsActive[i]);
} else {
tab_icon.setImageResource(navIcons[i]);
}
// finally publish this custom view to navigation tab
navigation.getTabAt(i).setCustomView(tab);
}
---
Touche finale pour définir un état actif et obtenir la couleur de l'icône et du texte modifiés lorsque l'onglet est sélectionné:
vous pouvez continuer à ma réponse ici
change l'image et la couleur du texte dans l'onglet lorsque sélectionné
cela permettra: 
Si vous souhaitez mettre des icônes et du texte sur une seule ligne dans un tablayout, vous devez créer une mise en page personnalisée comme ci-dessous.
custom_tab_heading.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical"
Android:gravity="center">
<TextView
Android:id="@+id/tabContent"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:textAlignment="center"
Android:textColor="@Android:color/black"
Android:gravity="center"/>
</LinearLayout>
Sur votre côté Java, vous pouvez écrire ci-dessous le code pour mettre l'image et le titre sur vos onglets.
val tabTitles = arrayListOf<String>(" Text Jokes"," Funny Images")
val tabIcons = arrayListOf<Int>(R.drawable.text_jokes,R.drawable.image_jokes)
val tabLinearLayout = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayout
val tabContent = tabLinearLayout.findViewById<View>(R.id.tabContent) as TextView
tabContent.text = tabTitles.get(0)
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[0], 0, 0, 0)
myTabLayout.getTabAt(0)!!.setCustomView(tabContent)
val tabLinearLayout1 = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayout
val tabContent1 = tabLinearLayout1.findViewById<View>(R.id.tabContent) as TextView
tabContent1.text = tabTitles.get(1)
tabContent1.setCompoundDrawablesWithIntrinsicBounds(tabIcons[1], 0, 0, 0)
var l = tabLinearLayout1.layoutParams
myTabLayout.getTabAt(1)!!.setCustomView(tabContent1)
Note : - Dans le tableau tabTitles, notez que j'ai donné un espace avant le texte (<space>Title 1) car il gardera un espace entre votre image et le titre.
Désolé, je fournis ici du code kotlin, mais vous pouvez facilement le convertir en Java. Si quelqu'un a un problème, alors commentez dans cette réponse et je vais essayer de les aider.