アイコンとテキストをTabLayoutに追加
私は3つのタブを含む画面で作業していますが、タブ内にテキストが含まれるアイコンを追加しようとしています.
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;
}}
この方法を試してくださいこれはまさにあなたが探しているものです
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);
}
}
}
まず、テキストの上部にある単純なアイコンの例として、タブに必要な構造を持つレイアウトxmlファイルを作成します。そのようです： - 
1.ナビゲーションタブレイアウトxmlを作成します：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>
レイアウトとidを膨らませ、ImageViewとTextView idも与えて、後で親レイアウトを膨らませた後に参照できるようにします。
2. drawableフォルダーでアイコンを定義し、strings.xmlファイルでラベルを定義します
そして、アイコンを表示したい順序で配列内のリソースIDでそれらを参照します。
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. TabLayoutを使用してViewerPagerをセットアップします。
TabLayout navigation = (TabLayout) findViewById(R.id.navigation);
navigation.setupWithViewPager(mainView/* the viewer pager object*/);
カスタマイズ部分：
// 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);
}
---
アクティブな状態を設定し、タブが選択されたときにアイコンとテキストの色を変更する最終タッチ：
ここで私の答えを続けることができます
それは達成します： 
タブレイアウトのアイコンとテキストを1行に配置する場合は、次のようにカスタムレイアウトを作成する必要があります。
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>
Java側では、タブに画像とタイトルを配置するコードを以下に書くことができます。
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)
注：-tabTitles配列では、text（<space>Title 1）画像とタイトルの間にスペースを保持するため。
ここでkotlinコードを提供して申し訳ありませんが、Javaに簡単に変換できます。問題がある場合は、この回答にコメントしてください。私は彼らを助けようとします。