Android TabsLayout tabs with ImageView

Question

I we know we can set any TextView for TabsLayout tabs without any problem, but at this time i dont have problem for setting TextView for tabs, but i want to have Image on tabs instead of text, for using this custom views i have this method:

private void setupTabIcons() {
    inflater = LayoutInflater.from(context);

    timeline = inflater.inflate(R.layout.joined_cafe_webs, null);
    TabLayout.Tab contentJoinedCafeWebsTab = tabsLayout.getTabAt(0);
    Objects.requireNonNull(contentJoinedCafeWebsTab).setCustomView(timeline);

    grid_list = inflater.inflate(R.layout.user_channels, null);
    TabLayout.Tab grid_listTab = tabsLayout.getTabAt(1);
    Objects.requireNonNull(grid_listTab).setCustomView(grid_list);

    post_items_view_pager.setCurrentItem(1);
    ...
}

joined_cafe_webs layout:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/grid_feeds"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="center"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:padding="5dp"
    android:tint="@color/grey_40"
    app:srcCompat="@drawable/ic_time_line_black_24dp" />

after compile and run project on phone, tabs are empty

score 0 · Accepted Answer · answered Jan 21 '19 at 12:50

Please check this :

https://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

And

Add Icons+Text to TabLayout

You can use following code :

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);
        }
    }
}

Android TabsLayout tabs with ImageView

1 Answers1