I have a simple AppCompatActivity
with one simple Toolbar
(android.support.v7.widget.Toolbar), one Design-Library TabLayout
and one ViewPager
.
Now I have in this case 4 fragments which are inside the viewpager and can be swiped from the sides. That works fine.
But as soon as I use mTabLayout.setupWithViewPager(mViewPager);
, the icons disappear but I can tab on the empty spaces which works fine. If I remove the line, the icons are visible again, the "swipe" works but if I tab to an icon, nothing happens.
My Code
MainActivity
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private TabLayout mTabLayout;
private ViewPager mViewPager;
private ViewPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initToolbar();
initTabLayout();
initViewPager();
mTabLayout.setupWithViewPager(mViewPager);//Here is the code from above
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
}
private void initToolbar() {
mToolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
}
private void initTabLayout() {
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_fire_white));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_apps_white));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_account_plus_white));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_help_white));
}
private void initViewPager() {
mAdapter = new ViewPagerAdapter(getSupportFragmentManager(), MainActivity.this);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(mAdapter);
}
//MENUE STUFF
}
//ViewPagerAdapter
class ViewPagerAdapter extends FragmentStatePagerAdapter {
public static final int TABS_COUNT = 4;
private Context context;
public ViewPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0: return new HomeFragment1();
case 1: return new HomeFragment2();
case 2: return new HomeFragment3();
case 3: return new HomeFragment4();
}
return null;
}
@Override
public int getCount() {
return TABS_COUNT;
}
}
activity_main.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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<include
android:id="@+id/app_bar"
layout="@layout/app_bar" />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary"
app:tabGravity="fill"
app:tabMode="fixed"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
This example demonstrates how do I create a Tab Layout in android app. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 3 − Add the following code to res/layout/activity_main. xml.
setupWithViewPager()
instantiate Tab
that only have the title provided from the ViewPager.Adapter
. Of course you can override this method to something like this:
public class IconicTabLayout extends TabLayout {
private TabViewProvider mTabViewProvider;
public interface TabViewProvider {
Tab newTabInstance(int tabPosition);
}
public IconicTabLayout(Context context) {
super(context);
}
public IconicTabLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public IconicTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setTabProvider(TabViewProvider provider){
mTabViewProvider = provider;
}
@Override
public void setupWithViewPager(ViewPager viewPager) {
PagerAdapter adapter = viewPager.getAdapter();
if (adapter == null) {
throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
} else {
this.setTabsFromPagerAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(this));
this.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
}
}
@Override
public void setTabsFromPagerAdapter(PagerAdapter adapter) {
removeAllTabs();
mTabViewProvider = mTabViewProvider == null && adapter instanceof TabViewProvider? (TabViewProvider)adapter : null;
if(mTabViewProvider == null){
super.setTabsFromPagerAdapter(adapter);
}else{
for (int i = 0, count = adapter.getCount(); i < count; ++i) {
this.addTab(mTabViewProvider.newTabInstance(i));
}
}
}
}
Usage:
mIconicTabLayout.setTabProvider(new TabViewProvider() {
@Override
public Tab newTabInstance(int tabPosition) {
return mIconicTabLayout.newTab().setIcon(icons[position]);
}
});
mIconicTabLayout.setupWithViewPager(mViewPager);
Or
class ViewPagerAdapter extends FragmentStatePagerAdapter implements TabViewProvider{
public void setTabLayout(TabLayout t){
mTabLayout = t;
}
//...
@Override
public Tab newTabInstance(int position) {
return mTabLayout.newTab().setIcon(icons[position]);
}
}
Note:
Make sure you first call setTabProvider
method or your PagerAdapter
implement TabViewProvider
, otherwise it will call default implementation.
You should initiate and add the icons inside the PagerAdapter.
private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three
};
// ...
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[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;
}
Source
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With