View pager click functions enables when click on tabLayout

Question

In my view i have two viewpager

ViewPager viewPager // this is to show images of cars
ViewPager vehicleDetailsViewPager // this is to show cars details

and also i have one tablayout

TabLayout tabLayout

this tablayout i have 3 menus like Exterior,Interior and System & Functions

My issue is when i click on each tab in my tablayout it automatically changes my images in the first viewPager

My activity page

public class VehicleDetailsActivity extends AppCompatActivity {
    ViewPager viewPager;
    CirclePageIndicator circlePageIndicator;
    ViewPager.SimpleOnPageChangeListener pagerSyncronizer;
    List<Car> carsList=new ArrayList<>();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.vehicle_details_activity);
        viewPager = findViewById(R.id.carImageViewPager);
        viewPager.setOffscreenPageLimit(5);
        circlePageIndicator = findViewById(R.id.circlePageIndicator);
        pagerSyncronizer = getPagerSynchronizer();
        prepareCarsList();

        viewPager.setAdapter(new ViewPageAdapter(getSupportFragmentManager(), carsList));
        circlePageIndicator.setViewPager(viewPager);
        viewPager.setCurrentItem(0);

        circlePageIndicator.setOnPageChangeListener(pagerSyncronizer);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("Exterior"));
        tabLayout.addTab(tabLayout.newTab().setText("Interior"));
        tabLayout.addTab(tabLayout.newTab().setText("System & Functions"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);


        final ViewPager vehicleDetailsViewPager = (ViewPager) findViewById(R.id.vehicleDetailsViewPager);
        final DeatilsFragmentPageAdapter deatilsFragmentPageAdapter = new DeatilsFragmentPageAdapter
                (getSupportFragmentManager(), getApplicationContext(),tabLayout.getTabCount());
        vehicleDetailsViewPager.setAdapter(deatilsFragmentPageAdapter);
        vehicleDetailsViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(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) {
            }
        });



    }
    /*
     * for sync the viewpage item with page indicator to indicate
     */
    private ViewPager.SimpleOnPageChangeListener getPagerSynchronizer() {
        return new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                viewPager.setCurrentItem(position, true);
            }
        };
    }

My Layout XML is

<LinearLayout
    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="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="15dp"
    android:id="@+id/RelativeLayout"
    android:orientation="vertical">
    <TextView
        android:id="@+id/txtCarName"
        android:text="Aston Martin DB8"
        app:layout_constraintStart_toEndOf="@+id/vehicleImage"
        android:layout_height="30dp"
        android:layout_width="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_margin="15dp"
        style="@style/vehicleNameStyle"
        android:layout_alignParentTop="true"
        />
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/carImageViewPager"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/my_custom_background"
        android:layout_alignBottom="@+id/txtCarName"
        />
    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circlePageIndicator"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginTop="8dp"
        android:paddingTop="5dp"
        android:visibility="visible"
        app:fillColor="@color/colorPrimary"
        app:strokeColor="#000"
        android:layout_alignBottom="@+id/carImageViewPager"/>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"/>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vehicleDetailsViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

Can anyone please suggest where im doing wrong.Please see the attached image for better understanding of my issue. When i attaching tablayout with fragment, The xml content is not displaying in my view

Answer 1

Please change the view pager reference to your second view pager like below

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

You are using the first images showing view pager reference in tablayout click .

Try this way :)