I have trouble finding a good example on how to swipe between fragments with help of bottom navigatiom bar. Since FragmentStatePagerAdapter is deprecated and a new ViewPager2 is now recommended instead of the old ViewPager I want to use ViewPager2 and FragmentStateAdapter in my code instead. I have found an example of how to combine BottomNavigationBar and ViewPager here and I want to do something similar. My code have many similarities to the one in the example with the only difference that I have my code in a fragment instead of an activity. Here is a picture of how my FrontendFragment display look like. I can switch between the views using the bottomnavigationbar but I also want to be able to swipe between the views. Can someone help me or at least direct me on the right way? Here is my code:
FragmentPagerAdapter Class:
public class FragmentPagerAdapter extends FragmentStateAdapter {
private static final int mFragmentCount = 5;
public FragmentPagerAdapter(#NonNull Fragment fragment) {
super(fragment);
}
#NonNull
#Override
public Fragment createFragment(int position) {
switch (position){
case 0:
return new HomeFragment();
case 1:
return new SearchFragment();
case 2:
return new AddFragment();
case 3:
return new MessageFragment();
case 4:
return new ProfileFragment();
}
return null;
}
#Override
public int getItemCount() {
return mFragmentCount;
}
}
FrontendFragment Class:
public class FrontendFragment extends Fragment implements BottomNavigationView.OnNavigationItemSelectedListener{
private BottomNavigationView mBottomNavigationView;
private ViewPager2 mViewPager2;
private FragmentPagerAdapter mFragmentPagerAdapter;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View v = inflater.inflate(R.layout.fragment_frontend, container, false);
loadFragment(new HomeFragment());
mBottomNavigationView = v.findViewById(R.id.bottomNavigationBar);
mBottomNavigationView.setOnNavigationItemSelectedListener(this);
return v;
}
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
Fragment selectedFragment = null;
switch (item.getItemId()) {
case R.id.home_icon:
selectedFragment = new HomeFragment();
break;
case R.id.search_icon:
selectedFragment = new SearchFragment();
break;
case R.id.add_icon:
selectedFragment = new AddFragment();
break;
case R.id.message_icon:
selectedFragment = new MessageFragment();
break;
case R.id.profile_icon:
selectedFragment = new ProfileFragment();
break;
}
return loadFragment(selectedFragment);
}
private boolean loadFragment(Fragment selectedFragment) {
if(selectedFragment != null){
MainActivity.sFm.beginTransaction().replace(R.id.relLayoutMiddle, selectedFragment).commit();
return true;
}
return false;
}
}
Thanks in advance!
As I'm already using BottomNav with ViewPager2 in one of my app, I can help.
Your code is partially correct which means your FragmentPagerAdapter is fine, but not your FrontEndFragment.
See, the FragmentPagerAdapter has to be set to a ViewPager2 as
//this here is the FrontEndFragment
mViewPager2.setAdapter(new FragmentPagerAdapter(this));
Then, You don't have to do the FragmentTransaction at all, you just have to change the ViewPager2's current item position through the BottomNavigationBar as
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.home_icon:
mViewPager2.setCurrentItem(0);
break;
case R.id.search_icon:
mViewPager2.setCurrentItem(1);
break;
case R.id.add_icon:
mViewPager2.setCurrentItem(2);
break;
case R.id.message_icon:
mViewPager2.setCurrentItem(3);
break;
case R.id.profile_icon:
mViewPager2.setCurrentItem(4);
break;
}
return false;
}
This is all, you don't have to deal with Fragments at all apart from the FragmentPagerAdapter. Also, don't forget to remove the loadFragment(new HomeFragment()); which is not required, nor the function loadFragment() is required.
(Optional), Furthermore, if you want to disable the Swipe Action of the ViewPager2 and want the Fragments to be selected based on the Selected BottomNav item only, then you can set setUserInputEnabled() property of ViewPager2 as false.
Next, to set the BottomNavigationBar's item as selected based on the swipe of the ViewPager2, what you've to do is,
Create a global var
MenuItem previousMenuItem;
Then, set a default item (first) to be selected of BottomNav on activity start as
mBottomNavigationView.getMenu().getItem(0).setChecked(true);
Finally, set an OnPageSelected() callback on ViewPager2 to update the selected Menu Item as:
mViewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
#Override
public void onPageSelected(int position) {
super.onPageSelected(position);
if (previousMenuItem != null) {
previousMenuItem.setChecked(false);
}
else {
mBottomNavigationView.getMenu().getItem(0).setChecked(false);
}
mBottomNavigationView.getMenu().getItem(position).setChecked(true);
previousMenuItem = mBottomNavigationView.getMenu().getItem(position);
}
#Override
public void onPageScrollStateChanged(int state) {
super.onPageScrollStateChanged(state);
}
});
What you're doing here is that you're setting default item to previousMenuItem and then on swiping to a different page, deselecting the previousMenuItem and selecting the new one, which means updating the BottomNav based on ViewPager's current item. This is the complete code you require to acheive your objective.
If you want to swipe between views, a simple solution would be to store all views in your parent view, but set all layouts for views except the initial view to android:visibility="gone". Make sure to set the initial view layout to android:visibility="visible" though. Now on you button clicks, you will have to implement onClick such that they turn on/ off view visibilities accordingly. For example, store views in order and control them via array index. But the whole thing you're trying to do is generally not a good design pattern in my opinion.
Why don't you load another Activity onClick instead of crowding your single activity? This will cause load time issues. Even if the views are non-visible, it's just an overall hassle to maintain all that in one place.
Related
Background
I have an android app using fragments. I'm using a separate FragmentPagerAdapter (i.e. as a separate class, outside MainActivity).
MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.MainActivity);
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(mViewPager);
}
SectionsPagerAdapter.java
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new frag1();
case 1:
return new frag2();
case 2:
return new frag3();
case 3:
return new frag4();
case 4:
return new frag5();
default:
return null;
}
}
#Override
public int getCount() {
return 5;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Name1";
case 1:
return "Name2";
case 2:
return "Name3";
case 3:
return "Name4";
case 4:
return "Name5";
}
return null;
}
The Issue
I need to refresh the view of, say, fragment #3 from fragment#2 (the ultimate goal is for changes the user initiates on fragment #2 to be visible as soon as the user proceeds to fragment#3. I have tried to detach/attach fragment #3 itself as soon as it is visible, like this:
#Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
if (isVisibleToUser) {
getFragmentManager().beginTransaction().detach(this).attach(this).commit();
}
Unfortunately, a) this has a penalty in performance, as there is a "stutter" during navigation; b) it doesn't work reliably. Some things (the texts of some buttons) are not refreshed, for some reason I can't figure out.
In any case, I have discovered that the only 100% reliable method for forcing a refresh/redraw is to restart the activity (for example through an onClickListener on a Save button the user needs to press on the previous fragment, #2). But this restarts the Activity on fragment #1
My Question
How can I restart the activity on this specific fragment (#3), considering the fact I'm using a separate FragmentPagerAdapter?
I've studied several other questions/answers, for example this: https://stackoverflow.com/a/36064344
but how can I implement something like this (putting extras on the intent call) when the FragmentPagerAdapter is on a separate class? Alternatively, is there something else I can do to refresh the fragment view?
If you need extra info or code, let me know and I'd be glad to add clarification.
EDIT:
I managed to find another solution that so far seems to be working as intended. I added the following code on the onClickListener of the Save button on fragment #2
frag3 f3 = new frag3();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragmentContainer, f3);
ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
ft.commit();
However, I'm still interested in my original question (how to start an activity on a specific fragment when using a separate FragmentPagerAdapter), so if you have any ideas about that, I'm all ears.
Well, wasn't that simple...
this.recreate(); not only restarts the activity but it also remembers the fragment position.
Just in case someone else needs this, when you're working from fragments you need to use it this way:
First declare the activity which contains the fragment in question. E.g.
public class frag1 extends Fragment {
...
Activity mactivity;
#Override
public void onAttach(Activity MainActivity) {
super.onAttach(MainActivity);
mactivity = MainActivity;
}
Then instead of getActivity().recreate(); simply use mactivity.recreate();
my SlidingTabLayout restarts my fragment dashboard activity when switching from fragment tags to fragment dashboard, or position 4 to 0.
Here is the code that I have written so far, can anyone shed some light on the situation ?
public class SectionsPagerAdapter extends FragmentStatePagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
//2 steps creating a fragment, create the fragment class and create the UI for it
Fragment fragment = null;
//we dont want it to return our place holder Fragment instead we want to switch bewtween 3
//create a switch case based on the position applied or the fragment selected
switch (position) {
case HOME:
fragment = Dashboard.newInstance("","");
break;
case TAGS:
fragment = Tags.newInstance("","");
break;
case MY_RECENT:
fragment = MyPosts.newInstance("","");
break;
case TOP:
fragment = Top.newInstance("", "");
break;
}
return fragment;
}
#Override
public int getCount() {
// Show 3 total pages.
return 4;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Home";
case 1:
return "Top";
case 2:
return "Recent";
case 3:
return "Tags";
}
return null;
}
}
You have to load all fragment in one time, you should call this method
int size=4;
viewPager.setOffscreenPageLimit(size);
after set adapter, size is the no of fragment which you want to load first time
First of all I would like to thank the stackoverflow community. Thanks to you I solved so much problems! Usually I bang my head over the wall for hours and I find the solution here (98% percent of the time). This time I would like to share my problem.
This is the first app I'm developing. I have one activity (is this bad?). My app structure is the following: Nav drawer which contains four items - two viewpagers and two static fragments. The viewpagers contains lists with data and if you click on one of the items from the list you are present with a detail page which again is a viewpager. When you are on the detail page you can click and advance to other fragment. The problem is that when I advance to the other fragment onSavedInstance is not called for the viewpagerdetails and I can't retain the fragment state. onSavedInstance will be called if I pass to the FragmentPagerAdapter getFragmentManager(), instead of getChildFragmentManager(), but if I do this when I navigate back, the viewpager items are blank. I have tried using FragmentStatePagerAdapter, but when I click back from the 'other fragment' to return to viewpager details the app crashes with the following error: Fragment no longer exists for key f0: index 0. I have looked over the internet, but I didn't found a working solution. Some say that the problem is from the adapter, but I tried this solution and it didn't work. Also I want to manually retain my fragment state, please don't offer me the fix with the configchanges in the app manifest. I have tried to call onSavedInstanceState from the onStop method, but when I return to the fragment the saved state is empty. Should I implement this with a static variable in my mainActivity?
FragmentPagerAdapter:
public class DetailsSlideAdapter extends FragmentPagerAdapter {
private String[] navMenuTitles;
private FragmentManager manager;
private FragmentTransaction mCurTransaction = null;
private Resources res;
public DetailsSlideAdapter(FragmentManager fm, Resources res) {
super(fm);
this.manager = fm;
navMenuTitles = res.getStringArray(R.array.detailTabs);
this.res = res;
}
#Override
public int getCount() {
return 3;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
DetailsInfo info = new DetailsInfo();
return info;
case 1:
DetailsCast cast = new DetailsCast();
return cast;
case 2:
DetailsOverview overview = new DetailsOverview();
return overview;
default:
return null;
}
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return navMenuTitles[0];
case 1:
return navMenuTitles[1];
case 2:
return navMenuTitles[2];
default:
return navMenuTitles[1];
}
}
Viewpager details:
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
// Get the ViewPager and set it's PagerAdapter so that it can display items
DetailsSlideAdapter = new DetailsSlideAdapter(getChildFragmentManager(), getResources());
mViewPager = (ViewPager) rootView.findViewById(R.id.DetailsPager);
mViewPager.setOffscreenPageLimit(3);
mViewPager.setAdapter(DetailsSlideAdapter);
// Give the SlidingTabLayout the ViewPager, this must be done AFTER the ViewPager has had
// it's PagerAdapter set.
mSlidingTabLayout = (DetailsSlidingTabLayout) rootView.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setViewPager(mViewPager);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tabSelected));
}
If other code is needed I will post it. Thanks.
EDIT using FragmentStateAdapter:
App crashes: Fragment no longer exists for key f0: index 0. On the internet people say that the problem is from the adapter, but I tried this solution and it didn't work. Code:
public class DetailsSlideAdapter extends FragmentStatePagerAdapter {
private String[] navMenuTitles;
private FragmentManager manager;
private FragmentTransaction mCurTransaction = null;
private Resources res;
SparseArray<Fragment> registeredFragments = new SparseArray<Fragment>();
public DetailsSlideAdapter(FragmentManager fm, Resources res) {
super(fm);
this.manager = fm;
navMenuTitles = res.getStringArray(R.array.detailTabs);
this.res = res;
}
#Override
public int getCount() {
return 3;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
DetailsInfo info = new DetailsInfo();
return info;
case 1:
DetailsCast cast = new DetailsCast();
return cast;
case 2:
DetailsOverview overview = new DetailsOverview();
return overview;
default:
return null;
}
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return navMenuTitles[0];
case 1:
return navMenuTitles[1];
case 2:
return navMenuTitles[2];
default:
return navMenuTitles[1];
}
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Fragment fragment = (Fragment) super.instantiateItem(container, position);
registeredFragments.put(position, fragment);
return fragment;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
registeredFragments.remove(position);
super.destroyItem(container, position, object);
}
public Fragment getRegisteredFragment(int position) {
return registeredFragments.get(position);
}
Have you seen this? FragmentStatePagerAdapter
From the Docs:
Implementation of PagerAdapter that uses a Fragment to manage each
page. This class also handles saving and restoring of fragment's
state.
I have this weird issue with the viewPager. When I swipe from one fragment to the next and then swipe back, the layout is correct, but when pressing an element (Listview item for example), the previous java code still did not update with the view. I don't know if I can explain this any better, as it works when I play with the swipe until the fragment works like its supposed to. here is my code:
Main.Java:
public class Main extends FragmentActivity {
SectionsPagerAdapter mAdapter;
ViewPager mViewPager;
// for alert transitions
AlertDialog dialog;
// share button
private ShareActionProvider mShareActionProvider;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// set up button
getActionBar().setDisplayHomeAsUpEnabled(true);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
// Create the adapter that will return a fragment for each of the three
// primary sections of the app.
mAdapter = new SectionsPagerAdapter(
getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mAdapter);
mViewPager.setPageTransformer(true, new DepthPageTransformer());
}
#Override
public void onBackPressed() {
if (mViewPager.getCurrentItem() == 0) {
// If the user is currently looking at the first step, allow the system to handle the
// Back button. This calls finish() on this activity and pops the back stack.
super.onBackPressed();
} else {
// Otherwise, select the previous step.
mViewPager.setCurrentItem(mViewPager.getCurrentItem() - 1);
}
}
}
SectionsPagerAdapter.java:
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new Important();
case 1:
return new Propositions();
case 2:
return new Information();
}
return null;
}
#Override
public int getCount() {
// Show 3 total pages.
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return ("Important Dates").toUpperCase(l);
case 1:
return ("Props").toUpperCase(l);
case 2:
return ("Information").toUpperCase(l);
}
return null;
}
}
The Fragments all use the onCreateView() method.
Thanks in advance for your help!
Maybe a late response, but I've experienced the same issue.
The problem was the DepthPageTransformer you are using from the Android Developers example for PageTransformer.
There is a bug with stacking fragments and layer priority, I assume. By fixing the custom PageTransformer will fix your "swipe back" issue. Or if you don't mind the animation, just remove your custom PageTransformer and use the default animation (by adding nothing).
I have this problem with Google's Navigation Drawer where starting the activity specified in the first case (case 0) in my selectItem method breaks and returns to the previous activity.
private class DrawerItemClickListener implements ListView.OnItemClickListener {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
selectItem(position);
}
}
private void selectItem(int position) {
switch(position) {
case 0:
// Placing any startActivity here will load the activity
// but immediately return to the calling activity.
parent.startActivity(new Intent(parent, Dashboard.class));
break;
case 1:
parent.startActivity(new Intent(parent, Card.class));
break;
}
}
But if I put mDrawerLayout.closeDrawer(mDrawerList); or any other code, it'll work normally.
There are no errors reported when the called activity is closed and no exception is thrown. Any thoughts?
I tried reproducing this and it will not resolve parent. Do you have it declared somewhere else ?
What class are you using this in both Activities and Fragments can use startActivity() without the need for parent.startActivity()
Can you post the complete class?
This works for ok for me.
private void selectItem(int position) {
switch (position) {
case 0:
// goto home screen
Log.d(TAG, "Showing Home");
startActivity(new Intent(this, SettingsActivity.class));
break;
case 1:
// Show Editor
Log.d(TAG, "Showing Editor");
break;
default:
break;
}
}