2

I'm able to click the tabs to change, but nothing happens when I swipe. I don't see the coloured bar underneath the selected tab either.

Here's my code. I've largely followed this tutorial, but I've changed tabLayout.setOnTabSelectedListener(this) to tabLayout.addOnTabSelectedListener(this) in StoriesActivity because the former is depreceated.

StoriesActivity:

public class StoriesActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    //This is our tablayout
    private TabLayout tabLayout;

    //This is our viewPager
    private ViewPager viewPager;

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_stories);

        /* +++ START Intent +++ */
        Bundle extras = getIntent().getExtras();

        final int authorID = extras.getInt("author_id");
        final String authorName = extras.getString("author_name");
        Log.i("click", Integer.toString(authorID));
        /* +++ END Intent +++ */

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle(authorName);
        setSupportActionBar(toolbar);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        //Initializing the tablayout
        tabLayout = (TabLayout) findViewById(R.id.tab_layout);

        //Adding the tabs using addTab() method
        tabLayout.addTab(tabLayout.newTab().setText("Stories"));
        tabLayout.addTab(tabLayout.newTab().setText("Collections"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        //Initializing viewPager
        viewPager = (ViewPager) findViewById(R.id.pager);

        //Creating our pager adapter
        StoriesTabsAdapter adapter = new StoriesTabsAdapter(getSupportFragmentManager(), tabLayout.getTabCount());

        //Adding adapter to pager
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        //Adding onTabSelectedListener to swipe views
        tabLayout.addOnTabSelectedListener(this);

    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

activity_stories.xml:

<RelativeLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        app:navigationIcon="?attr/homeAsUpIndicator"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

    <ListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/stories_list_view" />

</RelativeLayout>

StoriesTabsAdapter:

public class StoriesTabsAdapter extends FragmentPagerAdapter {

    int mNumOfTabs;

    public StoriesTabsAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                StoriesFragment tab1 = new StoriesFragment();
                return tab1;
            case 1:
                CollectionsFragment tab2 = new CollectionsFragment();
                return tab2;
            default:
                return null;
        }

    }

    @Override
    public int getCount() {
        return mNumOfTabs;
    }

}

StoriesFragment:

public class StoriesFragment extends Fragment {

    public StoriesFragment() {
        // Required empty public constructor
    }

    private ListView storiesListView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_stories, container, false);
    }

}
Sebastian
  • 3,548
  • 18
  • 60
  • 95

2 Answers2

3

You are missing to setupWithViewPager your TabLayout.

 mTabLayout.setupWithViewPager(mViewPager)

Regarding the problem of your text not to be appearing, try to move the code below straight after you setupWithViewPager

        //Adding the tabs using addTab() method
        tabLayout.addTab(tabLayout.newTab().setText("Stories"));
        tabLayout.addTab(tabLayout.newTab().setText("Collections"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
Victor Hugo Montes
  • 1,270
  • 1
  • 17
  • 28
  • 1
    Thanks for your reply. Adding that line after `tabLayout.addOnTabSelectedListener(this);` has the effect of removing the text from my tabs. – Sebastian Nov 04 '17 at 16:18
0

You should follow below two points.

If you're using a ViewPager together with this layout, you can call setupWithViewPager(ViewPager) to link the two together. This layout will be automatically populated from the PagerAdapter's page titles.

Secondly

_tablayoutOBJ.setupWithViewPager(_viewpagerOBJ); // After addOnTabSelectedListener .

For, Demo case you can visit Material Design working with Tabs.

IntelliJ Amiya
  • 74,896
  • 15
  • 165
  • 198