Button inside fragment overlap with next fragment's button

Question

The signup page of my app is divided into three fragments. FragmentA, FragmentB and FragmentC which is attached to same activity. On clicking the next button which is present in FragmentA it will call FragmentB and same is for FragmentB and FragmentC. As I move forward the buttons of the previous fragment overlaps the current one. Below is my code. How can I avoid this situation?

MainActivity.class

public class MainActivity extends AppCompatActivity {


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.signup_page);

    init();
 }


private void init() {
    ViewPager2 viewPager = findViewById(R.id.signup_pager);
    List<Fragment> fragmentList = new ArrayList<Fragment>();
    FragmentA aFragment = new FragmentA();
    FragmentB bFragment = new FragmentB();
    fragmentList.add(aFragment);
    fragmentList.add(bFragment);
    SignupFragmentPagerAdapter signupFragmentPagerAdapter = new SignupFragmentPagerAdapter(this,fragmentList);
    viewPager.setUserInputEnabled(false);
    viewPager.setAdapter(signupFragmentPagerAdapter);

}

}

FragmentA.class

public class FragmentA extends Fragment {
    EditText et_name;
    Spinner sp_user_type;
    Button bt_next;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fraga,container,false);
        et_name = view.findViewById(R.id.editTextTextPersonName);
        sp_user_type = view.findViewById(R.id.user_spinner);
        bt_next = view.findViewById(R.id.button8);

        bt_next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentB bFragment = new FragmentB();
                FragmentManager manager = getParentFragmentManager();
                FragmentTransaction transaction = manager.beginTransaction();
                transaction.replace(R.id.frag_a, bFragment);
                transaction.addToBackStack(null);
                transaction.commit();
            }
        });


        return view;
    }
}

FragmentB.class

public class FragmentB extends Fragment {
   
    Button bt_next;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragb,container,false);
        
        bt_next = view.findViewById(R.id.button9);

        bt_next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentC cFragment = new FragmentC();
                FragmentManager manager = getParentFragmentManager();
                FragmentTransaction transaction = manager.beginTransaction();
                transaction.replace(R.id.frag_b, Fragment);
                transaction.addToBackStack(null);
                transaction.commit();
            }
        });


        return view;
    }
}

Answer 1

Cause of your problem:

You are making fragment transaction (from A to B) within Fragment A itself; and not through the placeholder of these fragments (which is in your case the ViewPager itself; So the MainActivity still sees that the ViewPager is at the first page and therefore shows Fragment A in the background.

You have two options to solve this:

• First: Since you're disable page scrolling; I don't see any use to the ViewPager .. so you can just have a fragment placeholder in the main activity, and make fragment transaction on this placeholder.
• Second: if you have a need to the ViewPager, instead of making fragment transaction, you can use viewPager.setCurrentItem(position) and set the position to the target fragment according to the order you add them in the adapter. You can do that from your fragment when you hit the button using:

((MainActivity)requireActivity()).myViewPager.setCurrentItem(position)