How to save state of layout in fragment android

Question

I am working with tab layout with view pager and have ran into a problem, and I am not sure how to solve this, I have searched online but haven't found anything useful to work with.

I wasn't able to take video, so instead took screenshots:

Scenario of these screen shots:

I am on tab 1,
I enter in a name and press enter button
layout 1 visiblity is view.Gone and layout 2 is view.visible
I swipe/click to tab 2
I swipe/click to tab 3
when I swipe/click to tab 1
I expect layout visiblity to be view.visible and layout 1 to be view.gone
instead the app does not save the state at which I left
and goes back showing layout 1

The problem: I have 3 tabs, currently tab 2 and 3 are empty and I am working on tab 1. For tab 1, I have put two layouts and am using visibility function to show/hide tabs based on if-else statement. First layout contains a edittext field with a button and for time being the second layout of tab 1 is empty. The if-else statement checks if the user has written in their name in layout 1 and if so, it will make visibility of layout 1 View.GONE and make tab 2 View.VISIBLE.

However, when the user has written in a correct name and the app has validated it, it goes to layout 2 but when user goes to either by swipe or by click tab 2 or 3 and then go back to tab 1, layout 1 comes to top again and layout 2 is gone.

What I want to do is, if the app has validated and is showning layout 2 in tab 1, then I want the app to save this state and if the user changes tabs and come back to tab 1, I want the layout 2 to be shown and not 1.

My layout for tab 1 is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/layout1"
        android:visibility="gone">

        <EditText
            android:id="@+id/entered"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:textColor="#fff"
            android:background="?attr/colorPrimary"
            android:text="Welcome"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/layout2"
        android:visibility="visible">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="1dp"
            android:orientation="vertical">

        </LinearLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="100dp"
            android:orientation="vertical">

            <EditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:textColor="#000000"
                android:hint="Your Name"/>

            <Button
                android:id="@+id/enter"
                android:textColor="#fff"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:background="?attr/colorPrimary"
                android:text="Enter" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

The if statement I have written to validate user input, currently it will only proceed to layout 2, if the text is 'name':

if (name.getText().toString().equals("name")){
                layout1.setVisibility(View.GONE);
                layout2.setVisibility(View.VISIBLE);
            }else {
                layout1.setVisibility(View.VISIBLE);
                layout2.setVisibility(View.GONE);

            }

Sorry about the lengthy post, I wasn't sure best way of explaining my problem. In case my post isn't clear, what I want to do is save the state of fragment layouts in tab 1 so when user changes tabs e.g. to tab 2 or 3 and comes back to tab 1, I want the layout that was shown when they left tab 1 to be shown.

If my question/post is not clear please let me know and thanks in advance, I hope I have explained myself properly.

EDITED:

Global variable:

public MenuItem  settings;

  if (name.getText().toString().equals("name")){
                    layout1.setVisibility(View.GONE);
                    layout2.setVisibility(View.VISIBLE);
                    settings.setEnabled(true);
                }else {
                    layout1.setVisibility(View.VISIBLE);
                    layout2.setVisibility(View.GONE);
                     settings.setEnabled(false);

                }

EDITED 2

public class FragmentA extends Fragment {

    public boolean shouldShowItem = false;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        if (name.getText().toString().equals("name")){
            layout1.setVisibility(View.GONE);
            layout2.setVisibility(View.VISIBLE);
            shouldShowItem = true;
        }else {
            layout1.setVisibility(View.VISIBLE);
            layout2.setVisibility(View.GONE);
            shouldShowItem = false;

        }


        return inflater.inflate(R.layout.fragmenta, container, false);

    }

    @Override
    public boolean onPrepareOptionsMenu (Menu menu) {
        if (shouldShowItem)
            menu.getItem(item_index).setEnabled(false);
        return true;
    }

Answer 1

You can use

ViewPager.setOffscreenPageLimit(int offset)

In your case, you want to specify 2, so that when you are on the third page, the first one is not destroyed, and vice-versa.

mViewPager = (ViewPager)findViewById(R.id.pager);
mViewPager.setOffscreenPageLimit(2);

Regarding the menu:

Take a look at the API

public boolean onPrepareOptionsMenu (Menu menu)

Prepare the Screen's standard options menu to be displayed. This is called right before the menu is shown, every time it is shown. You can use this method to efficiently enable/disable items or otherwise dynamically modify the contents.

So you should handle that from the Activity.

@Override
 public boolean onPrepareOptionsMenu (Menu menu) {
     if (shouldShowItem)
         menu.getItem(item_index).setEnabled(false);
     return true;
 }

On changes, you need to call

invalidateOptionsMenu()

and the the menu will be redraw

Answer 2

give Memory to Your ViewPager: 1.

MyAdapter mAdapter= new MyAdapter(getActivity().getSupportFragmentManager());
  mAdapter.contents.add(new Fragment1());
  mAdapter.contents.add(new Fragment2());
  mAdapter.contents.add(new Fragment3());
  mPager.setAdapter(mAdapter);

2. This is adapter for your pager

class MyAdapter extends FragmentStatePagerAdapter {
        String[] pageTitle = {"Dummy 1", "Dummy 2", "Dummy 3"};

        public JantriPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        ArrayList<Fragment> contents = new ArrayList<>();

        @Override
        public Fragment getItem(int position) {
            return contents.get(position);
        }

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

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

3. Now create three fragment name

   class Fragment1 extends Fragment{

   } . .

4. Now your state is automatically saved