Tablayout Imageview data disappeared after page change

Question

Tablayout Imageview data disappeared after page change , i have two imageview in each tab , the images is selected from the gallery is dissapared when i change tab, any idea how can i fix this

i also tried Tab content disappeared after change page

PagerAdapter

public class PagerAdapter extends FragmentStatePagerAdapter
    {
    final int pageCount = 3;
    private String tabTitles[] = new String[]{"Tab 1","Tab 2","Tab 3",};

    public PagerAdapter(@NonNull FragmentManager fm) {
        super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return new FirstFragment();
            case 1:
                return new SecondFragment();
            case 2:
                return new ThirdFragment();
            default:
                return null;
        }

    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }

    @Override
    public int getCount() {
        return pageCount;
    }
}

FirstFragment

public class FirstFragment extends Fragment implements View.OnClickListener{
    ImageView imageButton1;
    ImageButton imageButton2;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v= inflater.inflate(R.layout.fragment_first, container, false);
        imageButton1 = (ImageView) v.findViewById(R.id.firstimagebtn);
        imageButton2 = (ImageButton)v.findViewById(R.id.secondimagebtn);
        imageButton1.setOnClickListener(this::onClick);
        imageButton2.setOnClickListener(this::onClick);
        return v;
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.firstimagebtn:
                Intent intent = new Intent(Intent.ACTION_PICK);
                intent.setType("image/*");
                startActivityForResult(intent,0);
                break;
            case R.id.secondimagebtn:
                Intent intent2 = new Intent(Intent.ACTION_PICK);
                intent2.setType("image/*");
                startActivityForResult(intent2,1);
                break;
        }

    }
    @Override
    public void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch(requestCode) {
            case 0:
                if(resultCode == Activity.RESULT_OK){
                    Uri selectedImage = data.getData();
                    imageButton1.setImageURI(selectedImage);
                }
                break;
            case 1:
                if(resultCode == Activity.RESULT_OK){
                    Uri selectedImage = data.getData();
                    imageButton2.setImageURI(selectedImage);
                }
                break;
        }
    }

Answer 1

Since you use FragmentStatePagerAdapter, please keep in mind that:

This version of the pager is more useful when there are a large number of pages, working more like a list view. When pages are not visible to the user, their entire fragment may be destroyed, only keeping the saved state of that fragment. This allows the pager to hold on to much less memory associated with each visited page as compared to FragmentPagerAdapter at the cost of potentially more overhead when switching between pages.

In short, the ImageView's data on your FirstFragment disappeared because FirstFragment was destroyed when you switched to another tab/fragment as the nature of FragmentStatePagerAdapter

Now you can solve this problem simply by saving state for fragment properly

public class FirstFragment extends Fragment implements View.OnClickListener{
   ImageView imageButton1;
   ImageButton imageButton2;

   private static final String ARG_URI_IMAGE_1 = "image1Uri"
   private static final String ARG_URI_IMAGE_2 = "image2Uri"
   
   private String mUriImg1;
   private String mUriImg2; 

   @Override
   public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
       if (savedInstanceState != null) {
           mUriImg1 = savedInstanceState.getString(ARG_URI_IMAGE_1);
           mUriImg2 = savedInstanceState.getString(ARG_URI_IMAGE_2);
           if (mUriImg1 != null) {
               imageButton1.setImageURI(Uri.parse(mUriImg1))
           }
           if (mUriImg2 != null) {
               imageButton2.setImageURI(Uri.parse(mUriImg2))
           }
       }
   }

   @Override
   public void onSaveInstanceState(@NonNull Bundle outState) {
       if (mUriImg1 != null) {
           outState.putString(ARG_URI_IMAGE_1, mUriImg1);
       }
       if (mUriImg2 != null) {
           outState.putString(ARG_URI_IMAGE_2, mUriImg2);
       }
   }
   
   @Override
   public void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
       super.onActivityResult(requestCode, resultCode, data);
       switch(requestCode) {
           case 0:
               if(resultCode == Activity.RESULT_OK){
                   Uri uri = data.getData();
                   mUriImg1 = uri.toString();
                   imageButton1.setImageURI(uri);
               }
               break;
           case 1:
               if(resultCode == Activity.RESULT_OK){                  
                   Uri uri = data.getData();
                   mUriImg2 = uri.toString();
                   imageButton2.setImageURI(uri);
               }
               break;
       }
   }
}