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) {
}
});
Related
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 :)
I didn't find any relevant posts to this problem. I am trying to implement simple tabs (tab layout) with swipe using this tutorial. However, my fragment is appearing multiple times even when I click for the first time. Please find below the relevant code. Will appreciate any help provided.
FragmentPagerAdapter Implementation:
public class SectionsPageAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public SectionsPageAdapter(FragmentManager manager) {
super(manager);
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
}
Main Class:
SectionsPageAdapter mSectionsPageAdapter = new
SectionsPageAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter and add fragments.
ViewPager mViewPager = (ViewPager) findViewById(R.id.container);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mSectionsPageAdapter.addFragment(new TodayFragment(), "TAB1");
mSectionsPageAdapter.addFragment(new WeeklyFragment(), "TAB2");
mSectionsPageAdapter.addFragment(new PhotosFragment(), "TAB3");
mViewPager.setAdapter(mSectionsPageAdapter);
tabLayout.setupWithViewPager(mViewPager);
main.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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".DetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Fragments are one liner so I don't think there is any problem there. Please find below 2 screenshots taken 1) onLoading activity 2) after clicking on tab2 for 1st time.
Can you share with us the layout code for your second fragment? Id like to see if the lack of a solid background may be causing the issue.
List of components in my app is following :
TabLayout - Tab1, Tab2, Tab3.
Fragments for Tabs - Tab1.xml & class, Tab2.xml & class, Tab3.xml & class.
ViewPager to show Fragments on tabs.
So, when app starts as i debugged the startup process, it works like following :
it calls 'Tab1.class',
then it calls 'Tab2.class',
and when swipe from 'Tab1' to 'Tab2', it calls 'Tab3.class'.
and when swipe from 'Tab2' to 'Tab3', it calls nothing.
on reverse swiping :
when swipe from 'Tab3' to 'Tab2', it calls 'Tab1.class'.
then when swipe from 'Tab2' to 'Tab1', it calls nothing.
Questions :
So, why does it do that?
How can i call ONLY 'tab1.class' when app starts on 'tab1'?
How can i call ONLY 'tab2.class' when i swipe from 'tab1' to 'tab2'?
MainActivity.java
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
PagerAdapter pagerAdapter = new FixedTabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
}
class FixedTabsPagerAdapter extends FragmentPagerAdapter {
public FixedTabsPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
switch (position)
{
case 0:
return new Tab1();
case 1:
return new Tab2();
case 2:
return new Tab3();
default:
return null;
}
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position)
{
case 0:
return getString(R.string.tab1);
case 1:
return getString(R.string.tab2);
case 2:
return getString(R.string.tab3);
default:
return null;
}
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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="vwc.com.newconcept.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
app:tabMode="scrollable"
app:tabGravity="center"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>
</android.support.design.widget.AppBarLayout>
</android.support.v4.widget.DrawerLayout>
Please Do Tell Solution For This Problem.
setOffscreenPageLimit
Set the number of pages that should be retained to either side of the current page in the view hierarchy in an idle state. Pages beyond this limit will be recreated from the adapter when needed.
Hope this helps.
ViewPager mViewpager = (ViewPager)findView....
mViewPager.setOffscreenPageLimit(3);
ViewPager is intented to work in that way to avoid lag in animations while switching from one fragment to other fragment, it will load atleast one extra fragment alongside your Visible Fragment by which it makes sure there is scope to swipe.
because, while swiping view pager has capability to show two fragments simultaneously hence loads the one extra always, without two pages view pager is useless.
For Refresh Fragment When Fragment Visible
#Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
if (getFragmentManager() != null) {
getFragmentManager()
.beginTransaction()
.detach(this)
.attach(this)
.commit();
}
}
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!!
I have gone through lot of answers in SO and didn't get any proper solution to implement the Tabs in Toolbar without Viewpager.
I have gone through the SlidingTabsBasic example available in sdk samples, however, that didn't meet my requirements.
Please help me to implement the Tabs in Toolbar without Viewpager.
Please don't suggest me to use Viewpager, because my app should not support that as per the UI.
Now, we have android support design library to implement the Tabs using android.support.design.widget.TabLayout. Here is the snapshot of code. Hope this will help for someone.
public class MainActivity extends AppCompactActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
//load fragment or do whatever you want
Fragment fragment = new MyFragment();
getFragmentManager()
.beginTransaction().replace(R.id.containerLayout, fragment).commit();
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
activity_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<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/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/containerLayout">
</LinearLayout>
Please help me to implement the Tabs in Toolbar without Viewpager.
The Toolbar class does not support any form of tabs, with or without a ViewPager.
If you want a tabbed UI, and you do not want to use ViewPager, you are welcome to use FragmentTabHost or create your own tab UI yourself.