View pager fragments and Tabs are out of sync android - android

In my project I have a tab layout and a fragments viewpager. When I load the fragments and tabs the tab index and the displayed fragment is out of sync, and also when I swipe back and forth the fragments are not in sync with the tabs. I checked the getItem(int position) and the getTitle(int position) methods both have the same position number and the corresponding entries in the ArrayList<Fragments> and the ArrayList<String> (for tab headings) are correct but some how the tabs display is out of sync with the view pager.
Here is my fragmentPagerAdapter.java
public class DetailsFragmentPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
private ArrayList<String> titles;
public DetailsFragmentPagerAdapter(FragmentManager fm) {
super(fm);
fragments = new ArrayList<>();
titles = new ArrayList<>();
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return titles.size();
}
#Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
public void setFragment(Fragment fragment, String title) {
fragments.add(fragment);
titles.add(title);
notifyDataSetChanged();
}
}
this is activity on create.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_details);
tabLayout = (TabLayout) findViewById(R.id.detailsTabs);
viewPager = (ViewPager) findViewById(R.id.viewPager);
new GetCategoriesAsync2().execute();
}
the async task's doInBackground is calling is preparing arraylist
and the onPostExecute
#Override
protected void onPostExecute(Void aVoid) {
int size = lists.size();
ArrayList<Fragment> fragments = new ArrayList<>(size);
ArrayList<String> titles = new ArrayList<>(size);
for (int i = 0; i < lists.size(); i++) {
ArrayList<String> x = lists.get(i);
titles.add(x.remove(0));
fragments.add(DetailsListFragment.newInstance(x));
}
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentPagerAdapter = new DetailsFragmentPagerAdapter(fragmentManager);
fragmentPagerAdapter.setFragments(fragments,titles);
viewPager.setAdapter(fragmentPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
progressDialog.dismiss();
}
I am using design support library 23.0.1 and the build target is 23.
how can I fix this tab layout out of sync?

if you use a TabLayout, you need to connect it to the adapter
If you're using a ViewPager together with this layout, you can use
setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs
using the given PagerAdapter's page titles. You should also use a
TabLayout.TabLayoutOnPageChangeListener to forward the scroll and
selection changes to this layout like so:
ViewPager viewPager = ...;
TabLayout tabLayout = ...;
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout));

Try this, it worked for me
public class DetailsFragmentPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragments= new ArrayList<Fragment>();
private final List<String> titles= new ArrayList<String>();
public DetailsFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return fragments.size();
}
#Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
public void setFragment(Fragment fragment, String title) {
fragments.add(fragment);
titles.add(title);
}
}
And Change
fragmentPagerAdapter.setFragments(fragments,titles); To
for (int i=0;i<fragments.size();i++)
{
adapter.setFragments(fragments.get(i),titles.get(i));
}

Check this out
it's a demo app that uses a TabLayout with a ViewPager
https://github.com/chrisbanes/cheesesquare
and if you don't know the number of the fragments that you will have in the ViewPager
your pageadapter should extends FragmentStatePagerAdapter
https://developer.android.com/reference/android/support/v4/app/FragmentStatePagerAdapter.html

Related

ArrayList shows it's size is 0 even after adding elements to it

I have an ArrayList to store instances of fragments. This ArrayList named 'listofFragInstances' is global. I have added values to this ArrayList in setUpViewPager() method.
But while using it in another method outside the setUpViewPager() method, it's size shows zero on using debugger, while it's size inside the setUpViewPager() method is as expected. What's the problem?
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.audit_form_activity);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
button = (Button) findViewById(R.id.button);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
viewPager.setOffscreenPageLimit(no_of_categories);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
// Outside Loop
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
// Get the JSON Data from DataSource
try {
JSONObject pageObj = new JSONObject(page);
JSONArray auditQuestionsArray = pageObj.getJSONArray("AuditQuestions");
int auditQuestionsArrayLength = auditQuestionsArray.length();
no_of_categories = auditQuestionsArrayLength;
// Outer-Loop Through the CategoryNames to Create Fragments for each CategoryName.
for (int i = 0; i < no_of_categories; i++) {
JSONObject auditQuestionsArrayObject = auditQuestionsArray.getJSONObject(i);
category = auditQuestionsArrayObject.getString("categoryName");
Tab1 myFrag = Tab1.newInstance(category);
listOfFragInstances.add(myFrag);
adapter.addFrag(myFrag, category);
}
viewPager.setAdapter(adapter);
} catch (JSONException e) {
e.printStackTrace();
}
}
public void activity_saveAll()
{
for (int i=0; i<listOfFragInstances.size(); i++)
{
listOfFragInstances.get(i).saveAnswers();
}
}
Please help!
The problem you are facing is that the ViewPager handles the lifecycle of the Fragments meaning that the instance you store in the ArrayList may not be the same as the one being used by the ViewPager.
The recommendation in not to keep instances of the Fragment and let the ViewPager do its job. To be honest, I have never been able to live with this. To overcome you problem you need to extend the FragmentManager and replace the instance in the ArrayList when the ViewPager changes it internally.
This is one I use.
The relevant code is public Object instantiateItem(ViewGroup container, int position) which replaces the Fragment in the ArrayList when a new Fragment is instantiated. This is not my authoring, I got it from another question here in SO but can't remember which one.
To get the right current fragment instance use public Fragment getCurrentIntance(int position).
It may be obvious but just in case, don't keep references to the Fragments outside of this class because you can't know if they are current or not.
public class MySimplePagerAdapter extends FragmentStatePagerAdapter {
protected final List<Fragment> fragmentList = new ArrayList<>();
protected final List<String> fragmentTitleList = new ArrayList<>();
protected final HashMap<Integer,Fragment> currentInstances = new HashMap<>();
protected FragmentManager fm;
public MySimplePagerAdapter(FragmentManager manager) {
super(manager);
this.fm = manager;
}
#Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
#Override
public int getCount() {
return fragmentList.size();
}
//Method to add Tab fragment and Tab name
public void addFragment(Fragment fragment, String title) {
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
#Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
#Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Fragment createdFragment = (Fragment) super.instantiateItem(container, position);
currentInstances.put(position, createdFragment);
// save the appropriate reference depending on position
return createdFragment;
}
public Fragment getCurrentIntance(int position){
return currentInstances.get(position);
}
}

ViewPager Not Synched with TabLayout

I have a ViewPager and Tablayout that shows nth number of items. The Tabs are populated with the correct page titles and the ViewPager contained Fragments display the correct fine except that the selected Tab is not synched with the ViewPager current item.
The selected Tab position is 1 less than the position of viewpager current item. Here is the Viewpager adapter.
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
public ViewPagerAdapter(FragmentManager fm){
super(fm);
}
#Override
public Fragment getItem(int position) {
Recipe selectedRecipe = getRecipeList().get(position);
return RecipeDetailFragment.newInstance(selectedRecipe.getId);
}
#Override
public int getCount() {
return .getRecipeList().size();
}
#Override
public CharSequence getPageTitle(int position) {
Recipe selectedRecipe = .getRecipeList().get(position);
String title = selectedRecipe.getTitle();
return title ;
}
#Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
Here is how I setup the ViewPager
private void setupViewPager() {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
}
Here is what the output looks like
Edit 1:
I think the problem have to do with how the getItem method of the ViewPager is being called, here is log of left and right scroll for10 items
instead of using static variable in fragment you can use,
public function in fragment like below.
add
#Override
public Fragment getItem(int position) {
Recipe selectedRecipe = getRecipeList().get(position);
RecipeDetailFragment receiptFRagment= new ReceiptFragment();
receiptFragment.setData(selectedRecipe.getId);
return receiptFragment;
}
instead of this
#Override
public Fragment getItem(int position) {
Recipe selectedRecipe = getRecipeList().get(position);
return RecipeDetailFragment.newInstance(selectedRecipe.getId);
}
Add public function in fragment,
public void setData(int id){
this.id= id;
}
Finally, this is how I synched the ViewPager selected item with the Tablayout selected tab.
void selectPage(final int pageIndex){
new Handler().postDelayed(
new Runnable() {
#Override public void run() {
tabLayout.setSmoothScrollingEnabled(true);
tabLayout.setScrollPosition(pageIndex, 0f, true);
}
}, 100);
}
Then I called this method from two places, first when I setup Viewpager
recipePosition = getIntent().getIntExtra(Constants.RECIPE_POSITION, 0);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
if (recipePosition > 0){
recipePosition--;
}
viewPager.setCurrentItem(recipePosition,true);
selectPage(recipePosition);
And then second in the setItem
Recipe selectedRecipe = getRecipeList().get(position);
RecipeDetailFragment receiptFRagment= new ReceiptFragment();
receiptFragment.setData(selectedRecipe.getId);
selectPage(position);
return receiptFragment;
Its works, I still could not understand why these are not synched by default!

Android add fragment and tab after load?

I have a FragmentActivity with two Fragments in it and a sliding tab layout:
String titles[] = new String[] {"Tab One", "Tab Two"};
int numTabs = titles.length;
EventAdapter adapter = new EventAdapter(getSupportFragmentManager(), titles, numTabs);
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
SlidingTabLayout sliding_tabs = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
sliding_tabs.setDistributeEvenly(true);
sliding_tabs.setViewPager(pager);
With the FragmentPagerAdapter:
private class EventAdapter extends FragmentPagerAdapter {
private List<String> titles;
private int numTabs;
public void addTab (String title) {
this.titles.add(title);
this.numTabs++;
this.notifyDataSetChanged();
}
public EventAdapter(FragmentManager fm, List<String> mTitles, int mNumTabs) {
super(fm);
this.titles = mTitles;
this.numTabs = mNumTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 2:
return new FragThree();
case 1:
return new FragTwo();
default:
return new FragOne();
}
}
#Override
public String getPageTitle(int position) {
return titles.get(position);
}
#Override
public int getCount() {
return numTabs;
}
}
Some time down the line, I would like to dynamically add the third tab to this layout. Is there a way to do this in code? As you can see, I already have the PagerAdapter set up to catch the third tab. I just need to load it in...
You need to add this method to your adapter EventAdapter :
public void addTab (String title) {
this.titles.add(title);
// this is the variable returned from getCount method
this.numbTabs++;
this.notifyDataSetChanged();
}
Main purpose is to add the tab and call notifydatasetchanged.
Now call addTab on this adapter's object and tab will be added.
after addTab do sliding_tab.setViewPager(this.pager);
Please accept if this solves the purpose.

Viewpager adapter not changing views

i have an activity with actionbarsherlock TabsNavigation (3 tabs) and when I press a tab i change the viewpager adapter of the corresponding fragment. it is working fine, the thing is that when I click on another tab besides the first created, the first page is always the one of that first tab. I tried to put invalidate() before changing the adapter, but it isnt working. anyone has any idea? here is the code:
public class Tabsteste2 extends SherlockFragmentActivity implements TabListener {
static AdapterOpiniao mOdapter;
static AdapterDados mDdapter;
static AdapterFoto mFdapter;
Bundle extras;
JSONParser jsonParser = new JSONParser();
SharedPreferences mPrefs;
static ViewPager mPager;
static int countopiniao;
static int countdados;
static int countfoto;
JSONArray perguntas = null;
PageIndicator mIndicator;
static ArrayList<HashMap<String, String>> opiniaolist;
static ArrayList<HashMap<String, String>> dadoslist;
static ArrayList<HashMap<String, String>> fotolist;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabsteste2);
opiniaolist = new ArrayList<HashMap<String, String>>();
dadoslist = new ArrayList<HashMap<String, String>>();
fotolist = new ArrayList<HashMap<String, String>>();
mPager = (ViewPager)findViewById(R.id.pager);
extras = getIntent().getExtras();
Boolean opiniaoflag = extras.getBoolean("opiniaoflag");
Boolean dadosflag = extras.getBoolean("dadosflag");
Boolean fotoflag = extras.getBoolean("fotoflag");
countdados= extras.getInt("countdados");
countopiniao=extras.getInt("countopiniao");
countfoto=extras.getInt("countfoto");
mPrefs = getSharedPreferences("mPrefs1",MODE_PRIVATE);
Log.d("countdados",""+countdados);
Log.d("countfoto",""+countfoto);
Log.d("countopiniao",""+countopiniao);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
if(opiniaoflag==true){
ActionBar.Tab opiniaotab = getSupportActionBar().newTab();
opiniaotab.setText("OpiniĆ£o");
opiniaotab.setTag("op");
opiniaotab.setTabListener(this);
mOdapter = new AdapterOpiniao(getSupportFragmentManager());
Log.d("Opiniao",""+opiniaotab.getTag());
getSupportActionBar().addTab(opiniaotab);
}if(dadosflag == true){
ActionBar.Tab dadostab = getSupportActionBar().newTab();
dadostab.setText("Dados");
dadostab.setTag("dd");
mDdapter = new AdapterDados(getSupportFragmentManager());
dadostab.setTabListener(this);
Log.d("Dados",""+dadostab.getTag());
getSupportActionBar().addTab(dadostab);
}
// mDdapter = new AdapterDados(getSupportFragmentManager());
if(fotoflag==true){
ActionBar.Tab fotostab = getSupportActionBar().newTab();
fotostab.setText("Fotos");
fotostab.setTag("ft");
mFdapter = new AdapterFoto(getSupportFragmentManager());
fotostab.setTabListener(this);
Log.d("Foto",""+fotostab.getTag());
getSupportActionBar().addTab(fotostab);
}
new getpergunta().execute();
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction transaction) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction transaction) {
if(tab.getTag().equals("op")){
mPager.invalidate();
mPager.setAdapter(mOdapter);
mIndicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}else if (tab.getTag().equals("dd")){
mPager.invalidate();
mPager.setAdapter(mDdapter);
mIndicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}else if(tab.getTag().equals("ft")){
mPager.invalidate();
mPager.setAdapter(mFdapter);
mIndicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction transaction) {
}
public static class AdapterOpiniao extends FragmentPagerAdapter {
public AdapterOpiniao(FragmentManager fm) {
super(fm);
}
#Override
public int getCount() {
return countopiniao;
}
#Override
public Fragment getItem(int position) {
return FragmentOpinioes.newInstance(position);
}
}
public static class AdapterDados extends FragmentPagerAdapter {
public AdapterDados(FragmentManager fm) {
super(fm);
}
#Override
public int getCount() {
return countdados;
}
#Override
public Fragment getItem(int position) {
return FragmentDados.newInstance(position);
}
}
public static class AdapterFoto extends FragmentPagerAdapter {
public AdapterFoto(FragmentManager fm) {
super(fm);
}
#Override
public int getCount() {
return countfoto;
}
#Override
public Fragment getItem(int position) {
return FragmentFotos.newInstance(position);
}
}
To solve your case, I used:
#Override
public void onTabSelected(Tab tab, FragmentTransaction transaction) {
this.mPager.setCurrentItem(tab.getPosition());
}
When a click on a tab, the view of the corresponding tab is automatically changed.
Edit: I must admit that I have some difficulties to really understand your code and what you are trying to do, so I add some more code to explain what i think you need.
In my optinion, only one adapter is necessary for the ViewPager, and then if I'm right, you would do so:
// I took some personal code for my example
private ViewPager mPager;
private PageIndicator mIndicator;
private TabsExampleSectionsAdapter mAdapter;
// Inside the onCreate method
this.mPager = (ViewPager) findViewById(R.id.pager);
this.mIndicator = new TabPageIndicator(this);
this.mAdapter = new TabsExampleSectionsAdapter(this.getSupportFragmentManager());
this.mPager.setAdapter(this.mAdapter);
this.mIndicator.setViewPager(this.mPager);
When everything is initialized, this is how to build tabs and pager views instructions (the two are related). Also, don't mind the Section class, it's a custom data model object which contains the tag data you need but it has nothing to do with actionbarsherlock.
private void buildTabs(Section[] sections) {
if (sections != null) {
for (Section section : sections) {
ActionBar.Tab sectionTab = getSupportActionBar().newTab();
sectionTab.setText(section.name);
sectionTab.setTabListener(this);
getSupportActionBar().addTab(sectionTab);
// The tag ("op" or "dd" in your case for example) is contained somewhere in the section object
this.mAdapter.getSections().add(section);
}
}
}
And finally, this is the view pager adapter. It will choose what type of fragment to return following the tags you defined for each tab position:
public class TabsExampleSectionsAdapter extends FragmentPagerAdapter {
private ArrayList<Section> mSectionsList = new ArrayList<Section>();
public TabsExampleSectionsAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
#Override
public Fragment getItem(int position) {
// Retrieving the cooresponding tag of position
Section section = this.mSectionsList.get(position % getCount());
// Here, you check the tag to know what type of fragment you must return
if (section.getTag().equals("dd")) {
return FragmentDados.newInstance(position);
} else if (section.getTag.equals("op")) {
return FragmentOp.newInstance(position);
}
}
#Override
public int getCount() {
return this.mSectionsList.size();
}
#Override
public CharSequence getPageTitle(int position) {
return this.mSectionsList.get(position % getCount()).name.toUpperCase();
}
public ArrayList<Section> getSections() {
return this.mSectionsList;
}
}
In conclusion, when everything is set up, changing views doesn't have to be done manually by changing adapters and calling invalidate(). You can return different type of fragments from your adapter with a simple condition. Then, by calling:
this.mPager.setCurrentItem(position);
it changes automatically the current view by passing in the adapter's getItem(position) method. Basically, you just have to coordinate your tab positions and your tags in order to get the right type of fragment.
Feel free to ask for more details.

Change initial page to be shown in ViewPagerIndicator

I have implemented the ViewPagerIndicator with ActionBarSherlock.
Now i would like to open a specific fragment inside the viewpager once the viewpager is created. Normally you should use setCurrentItem(pageid) or setViewPager(mPager, pageid);
But this doesn't work :( If I would like to open fragment 2 inside the viewpager, the
viewpager indicator shows that fragment 2 is shown, but in reality fragment one (standard) is shown in the viewpager.
I have the following code:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simple_tabs);
mAdapter = new ColofonFragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TabPageIndicator)findViewById(R.id.indicator);
String page = "";
page = getIntent().getStringExtra("page");
int pageid = 0;
if(page.equals("contact")) { pageid = 0; }
else if(page.equals("colofon")) { pageid = 1; }
else if(page.equals("disclaimer")) { pageid = 2; }
mIndicator.setViewPager(mPager, pageid); // Doesn't work...
//mIndicator.setCurrentItem(pageid); // Doesn't work...
}
class ColofonFragmentAdapter extends FragmentPagerAdapter implements TitleProvider {
ArrayList<Fragment> fragments = new ArrayList<Fragment>();
ArrayList<String> titels = new ArrayList<String>();
public ColofonFragmentAdapter(FragmentManager fm) {
super(fm);
fragments.add(new LayoutFragment(R.layout.colofon_contactgegevens));
titels.add("Contact");
fragments.add(new LayoutFragment(R.layout.colofon_colofon));
titels.add("Colofon");
fragments.add(new LayoutFragment(R.layout.colofon_disclaimer));
titels.add("Disclaimer");
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return fragments.size();
}
#Override
public String getTitle(int position) {
return titels.get(position);
}
}
Can you tell me which method I should use to change the initial page?
Thank you!
I think it was a bug caused by setCurrentItem()
https://github.com/JakeWharton/Android-ViewPagerIndicator/pull/76
It's solved ^^

Categories

Resources