TabLayout Icon Not Displaying

Question

I am trying to make a tab with tablayout as follows https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-custom-view-to-tablayout

Now I'm trying to show an icon instead of text using imagespan. But no luck, can anyone help indicate what is missing in this lesson?

Here is the code

public class HomeActivity extends FragmentActivity { //Fragments List public ArrayList <Fragment> fragmentList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); setUpFragmentList(); // Get the ViewPager and set it PagerAdapter so that it can display items ViewPager viewPager = (ViewPager) findViewById(R.id.home_viewpager); viewPager.setAdapter(new HomeFragmentPagerAdapter(getSupportFragmentManager(), HomeActivity.this, fragmentList)); // Give the TabLayout the ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); //start this 2 are to set the tab to fill entire screen tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); //end this 2 are to set the tab to fill entire screen tabLayout.setupWithViewPager(viewPager); tabLayout.getTabAt(1).setIcon(R.drawable.ic_tab_down_activity); } private void setUpFragmentList() { fragmentList = new ArrayList<>(); fragmentList.add(new MyActivitesFragment()); fragmentList.add(new ChatListFragment()); fragmentList.add(new QuickMatchFragment()); fragmentList.add(new FilterMatchFragment()); } } public class HomeFragmentPagerAdapter extends FragmentPagerAdapter { private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" ,"Tab4"}; private Context context; private ArrayList <Fragment> fragmentList; private int[] imageResId = { // unclicked R.drawable.ic_tab_down_activity, R.drawable.ic_tab_down_chat, R.drawable.ic_tab_down_find, R.drawable.ic_tab_down_filter, }; public HomeFragmentPagerAdapter(FragmentManager fm, Context context, ArrayList <Fragment> fragmentList) { super(fm); this.context = context; this.fragmentList = fragmentList; } @Override public int getCount() { return fragmentList.size(); } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public CharSequence getPageTitle(int position) { Drawable image = context.getResources().getDrawable(imageResId[position]); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); SpannableString sb = new SpannableString(" "); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return sb; } } 

Answer 1

In your custom tab layout file, just set textAllCaps to false. This will work :) Reason, the image is converted into symbols, then if it is true, then converting them to capital will not display the image.

 <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">16sp</item> <item name="android:textColor">?android:textColorSecondary</item> <item name="textAllCaps">false</item> </style> 

Answer 2

Apparently, I found a solution using TabLayout.getTabAt (i) .setIcon (imageResId [i]);

my intention first is to install all the icons from the viewpager adapter. but since I had no idea, no time to find a solution. I would use this other trick that I recognized.

and also to switch the image around i use TabLayout.TabLayoutOnPageChangeListener

hope this helps someone who needs it too. =]

Answer 3

You have not added any tabs.

Add a tab: tabLayout.addTab (tabLayout.newTab (). SetText ("Tab One")) ;.

Answer 4

well, I think you are missing the highlight in your xml. Set text Appearance for tab layout. ie textAllCaps = false, otherwise the range of images will not work.