Tabs Indicator not moving with tabs or fragment while we scroll ,it was working properly when we click on tab in Tablayout without actionbar

Question

package net.simplifiedcoding.androidtablayout.Activity;

import android.content.Context;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Adapter;
import android.widget.Button;
import android.widget.Toast;

import com.astuetz.PagerSlidingTabStrip;

import net.simplifiedcoding.androidtablayout.Adapter.Pager;
import net.simplifiedcoding.androidtablayout.R;

import java.util.Vector;

//Implementing the interface OnTabSelectedListener to our MainActivity
//This interface would help in swiping views
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
    Context context;
    //#
    final int[] icons = new int[]{R.drawable.homeicon, R.drawable.searchicoon, R.drawable.uploadicon, R.drawable.usericon};
    //This is our tablayout
    private TabLayout tabLayout;

    //This is our viewPager
    private ViewPager viewPager;
    Button optionmenu;

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





        // getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);





        //Adding toolbar to the activity
        //Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        //setSupportActionBar(toolba
        //Initializing the tablayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        viewPager = (ViewPager) findViewById(R.id.pager);
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

       final PagerSlidingTabStrip tabStrip=(PagerSlidingTabStrip)findViewById(R.id.pagerslidingtabstrip);
        //tabStrip.setViewPager(Pager);
        //Adding the tabs using addTab() method
        tabLayout.addTab(tabLayout.newTab().setText(""));
        tabLayout.addTab(tabLayout.newTab().setText(""));
        tabLayout.addTab(tabLayout.newTab().setText(""));
        tabLayout.addTab(tabLayout.newTab().setText(""));

        tabLayout.getTabAt(0).setIcon(icons[0]);
        tabLayout.getTabAt(1).setIcon(icons[1]);
        tabLayout.getTabAt(2).setIcon(icons[2]);
        tabLayout.getTabAt(3).setIcon(icons[3]);

        tabLayout.getTabAt(0).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
        tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);




        //Initializing viewPager


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

        //Adding adapter to pager
        viewPager.setAdapter(adapter);
        //tabLayout.setupWithViewPager(viewPager);
       // tabStrip.setOnPageChangeListener((ViewPager.OnPageChangeListener) this );
        viewPager.setCurrentItem(0);


        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//tabLayout.setupWithViewPager(viewPager);
                //tabLayout.setScrollIndicators(position);
                //tabStrip.setViewPager(viewPager);
                //tabLayout.setScrollIndicators(position);

            }
            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        tabLayout.setOnTabSelectedListener(this);

    }







    @Override
    public void onTabSelected(TabLayout.Tab tab) {
       viewPager.setCurrentItem(tab.getPosition());
       // super.onTabSelected(tab);
        tab.getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);

        //int tabIconColor = ContextCompat.getColor(context, R.color.tabselectedIconcolor);
        //tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);

    }

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

    }


    }

<LinearLayout
    android:id="@+id/main_layout"
    android:orientation="vertical"
    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:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activity.MainActivity">

    <!-- our toolbar -->
    <!-- our tablayout to display tabs  -->
    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@color/colorPrimary">
    </Toolbar>
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_marginTop="4dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#ffffff"
        app:tabIndicatorHeight="3dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    <!-- View pager to swipe views -->

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="fill_parent">
    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/pagerslidingtabstrip"
        android:layout_width="match_parent"
        android:layout_height="0dip" />
    </android.support.v4.view.ViewPager>

H
</LinearLayout>

this is my layout file .When i used Tabsrtip.setupwithviewpager it shows error in rosource file. or the application unfortunately stopped. I used tablayout.setupwithviewpager it also shows error . Beloy is my java file.

Answer 1

Use :

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @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) {

        }
    });

In your case this viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {... is wrong.

Answer 2

Sync your tablayout with viewpager by add this line

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
viewPager = (ViewPager) findViewById(R.id.pager);
Pager adapter = new Pager(getSupportFragmentManager(),tabLayout.getTabCount());


 viewPager.setAdapter(adapter);
tabLayout .setupWithViewPager(viewPager );

and override getPageTitle function in ViewPager adapter

    @Override
    public CharSequence getPageTitle(int position) {
      return tabText[position];
    }
     @Override
    public int getCount() {
      return 2;
    }


    tabText = new String[]{
            "Tab 1",
            "Tab 2"
    };

there is no need to add Tabs to tabLayout programmatically. when you sync it with viewpager it will pick the name of tabs from getpageTitle. and count of the tab from getCount

tabText is string array that contain the name of Tabs

to change icon of Tablayout when user chage tab. use that function in onPageSelected method of addOnPageChangeListener

//Method to set up tab layout icon
private void setUpTabIcon() {
    for (int i = 0; i < mTabLayout.getTabCount(); i++) {
        if (mTabLayout.getTabAt(i).isSelected())
            mTabLayout.getTabAt(i).setIcon(imageResId[i][1]);
        else
            mTabLayout.getTabAt(i).setIcon(imageResId[i][0]);

    }

}

this function will change the icon when page is selected or un-selected. use icon of 2 state one is default and one in pressed.