Develop Reference

View pager click functions enables when click on tabLayout

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

Because you have used first viewPager instance inside OnTabSelectedListener's onTabSelected. Try using vehicleDetailsViewPager inside onTabSelected instead of viewPager
#Override
public void onTabSelected(TabLayout.Tab tab) {
vehicleDetailsViewPager.setCurrentItem(tab.getPosition());
}

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 :)

Inflated tab items in Tab Layout does not match parent in android

I have gone through these but does not seems to work
working with
android.support.design.widget.TabLayout
needs to set custom views to each child tab as a match parent to child size
pragmatically give a size
View v = LayoutInflater.from(this).inflate(R.layout.layout_two, null);
v.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tabLayout.getTabAt(0).setCustomView(v);
this works as a match parent because there is no background but once add a inflate view issue comes
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
though about the tabIndicator as well
setting its height to app:tabIndicatorHeight="0dp" or adding android:tabStripEnabled="false" does not help.
here is a picture with boundaries which clearly shows the small gap like padding(blue bar is my TabLayout with two tabs )
left one is inflated
right one is normal .setIcon
any help to make inflated one match parent with no gaps ?
Here is my code
XML
<android.support.design.widget.CoordinatorLayout
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.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="30dp">
//------- INSIDE THIS I HAVE A TAB
<android.support.v7.widget.Toolbar
android:background="#drawable/capture"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
/>
//------ HERE comes THE TAB That I DEAL
<android.support.design.widget.TabLayout
android:tabStripEnabled="false"
app:tabIndicatorHeight="0dp"
android:id="#+id/tab_layout"
android:scrollbars="none"
android:layout_below="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:tabTextColor="#d3d3d3"
android:minHeight="?attr/actionBarSize"
android:orientation="vertical" >
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:background="#467"
android:id="#+id/viewpager"
android:layout_below="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
myClass
public class LayoutExampleActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout_example);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPagerAdaptor(viewPager);
tabLayout.setupWithViewPager(viewPager);
setTabs();
}
private void setupViewPagerAdaptor(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentOne(), "First");
adapter.addFragment(new GalleryFragment(), "Second");
// adapter.addFragment(new FragmentOne(), "Third");
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 addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
public void setTabs() {
tabLayout.getTabAt(0).setCustomView(R.layout.layout_one);
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
}
}

Set tabPaddingStart and tabPaddingEnd attributes.
like this:
<android.support.design.widget.TabLayout
...
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp" >
This question might be duplicated.
see: Cannot remove Padding from Tabs when using Custom views with Tab Layout

Swiping the view pager fragment will not move the tabs

I followed these tutorial Android TabLayout Example using ViewPager and Fragments
Android TabLayout Example
But if I swipe the fragment the view pager will not move.
I am getting this result output I got
I followed the above tutuorial only no changes, but when we swipe the fragment the tabs will not shift. Please help me. Thanks in advance.
This is the activity_main.xml
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- our toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<!-- our tablayout to display tabs -->
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:layout_width="match_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

The pages on the viewpager is swiping, that's why it's showing "Tab 3" on page. This is happening due to swiping properties of ViewPager. But the tab is not changing accordingly, that's why is it showing on TAB1. Because there is no link established between tablayout and viewpager.
If you're using a ViewPager together with this tab layout, you can call setupWithViewPager(ViewPager) to link the two together, described here.
So no need to call addTab().
mTabLayout = (TabLayout)findViewById(R.id.tabLayout);
mViewPager = (ViewPager)findViewById(R.id.pager);
//mTabLayout.addTab(mTabLayout.newTab().setText("Tab1"));
//mTabLayout.addTab(mTabLayout.newTab().setText("Tab2"));
//mTabLayout.addTab(mTabLayout.newTab().setText("Tab3"));
//mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
Pager pager = new Pager(getSupportFragmentManager(),3);
mViewPager.setAdapter(pager);
mTabLayout.setupWithViewPager(mViewPager);
This tablayout will be automatically populated from the PagerAdapter's page titles. For this in,
class Pager extends FragmentStatePagerAdapter{...
#Override
public CharSequence getPageTitle(int position) {
super.getPageTitle(position);
switch (position){
case 0:
return "Tab1";
case 1:
return "Tab2";
case 2:
return "Tab3";
default:
return null;
}
}

viewPager.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) {
}
});

Android | stop TabLayout reload/refresh my Fragments

I've a similar tab layout, with 4 tabs.
When I go from tab 0 to tab 2 and then I come back to tab 0, Fragment0 is reloaded.. Same problem when I go from a tab to another "away" tab.
I would to load Fragment only first time and re-use them, without reloading.
This is a part of my code (I've using this tutorial):
MyActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if(getSupportActionBar()!=null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = MyActivity.this.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(ContextCompat.getColor(MyActivity.this, R.color.colorPrimaryDark));
}
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setupWithViewPager(viewPager);
setupTabIcons(); //I have only icon, not text.
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(MyFragment.newInstance(0));
adapter.addFragment(MyFragment.newInstance(1));
adapter.addFragment(new DifferentFragment());
adapter.addFragment(new TestFragment());
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = 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 addFragment(Fragment fragment) {
mFragmentList.add(fragment);
}
#Override
public CharSequence getPageTitle(int position) {
return null;
}
}
my_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

As you can see in the Documentation setOffscreenPageLimit
Inside your function setupViewPager(ViewPager viewPager) add this:
viewPager.setOffscreenPageLimit(limitNumberOfPages); //before setAdapter
viewPager.setAdapter(adapter);
And the limitNumberOfPages is an int that contains the amount of pages that can be scrolled without reloading the fragments. If you have 4 tabs, you should use:
int limitNumberOfPages = 3;
The default number for this property is 1.

I solved it by myself
Simple, use:
viewPager.setOffscreenPageLimit(numberOfPages);
From reference: Set the number of pages that should be retained to either side of the current page in the view hierarchy in an idle state.
In my case, I need 3 pages that should be retained.

ViewPager holds Fragments left and/or right of the selected Tab.
This is needed for fast animating tab change.
You can keep references of your Fragments in Your Activity, but this references can be null.

cannot change tabs in TabLayout

I am new to android programming and I am trying to change the tab on the touch of tab header text. Here is my code
activity_main
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/test_image"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:scaleType="centerCrop" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
/>
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Mainactivity.java
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
Output for this application is a tablayout with fragments as tabs which contain cardview. Now when I touch the tab header I am able to switch to different tabs also I can switch tab by swiping the fragments with my finger.However when I add this
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
CharSequence _header = tab.getText();
Selected_Tab_Header = String.valueOf(_header);
if (Selected_Tab_Header == "Tab1") {
headerImage.setImageResource(R.drawable.someImage);
}
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
});
I cannot switch tab's anymore i.e when I touch the tab header though the code is fired(image changes) the tab is not switched however swiping the tab's with finger still works.Is there any thing missing from my code? or is there any other way to achieve this?

Dont forget viewPager.setCurrentItem(tab.getPosition()) in your onTabSelected:
public void onTabSelected(TabLayout.Tab tab) {
CharSequence _header = tab.getText();
Selected_Tab_Header = String.valueOf(_header);
if (Selected_Tab_Header == "Tab1") {
headerImage.setImageResource(R.drawable.someImage);
}
if (viewPager != null) {
viewPager.setCurrentItem(tab.getPosition());
}
}
Hope this helps!!