Fragments goes one behind the other

Question

i made a 2 fragment layout one for the login screen and the other for the Register screen and in the main screen i put a fragment for login screen and a button if the user want to register he click in that button and the register fragment appears to him and the login fragment disappear the problem is after i press the register button in the main screen the login screen appears to be behind the register screen here's a photo for it login behind Register i don't know what's the problem or i misunderstanding the fragments i don't know here's the onclick method on the MainActity class

  @Override
                        public void onClick(View view) {
                            String mytxt = inversebutton.getText().toString();
                            Fragment fragmentSign = new Signin();
                            Fragment fragmentregister = new Register();
                            if(mytxt.equals("Register")){  // call signin frame
                                android.support.v4.app.FragmentManager fragmentManager= getSupportFragmentManager();
                                fragmentManager.beginTransaction().replace(R.id.fragmentplace ,fragmentregister).commit();
                                inversebutton.setText("SignIn");
                            }else{ // call register fra
                                android.support.v4.app.FragmentManager fragmentManager= getSupportFragmentManager();
                                fragmentManager.beginTransaction().replace(R.id.fragmentplace ,fragmentSign).commit();
                                inversebutton.setText("Register");
                            }
                        }
                    });

here's the activitymain.xml

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.example.abdelmagied.myapplication.MainActivity"
        android:background="#222">

        <fragment
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:name="com.example.abdelmagied.myapplication.Signin"
            android:id="@+id/fragmentplace"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <Button
            android:text="Register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/reverse"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="16dp" />

    </RelativeLayout>

here's the register_fragment class

  public class Register extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_register, container, false);
}

here's the signin fragment class

public class Register extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_register, container, false);
}

here's the fragment_register.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.abdelmagied.myapplication.Register"
        android:background="#090"
        android:id="@+id/registerfragment">

        <!-- TODO: Update blank fragment layout -->

        <TextView
            android:text="Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="32dp"
            android:layout_marginStart="32dp"
            android:layout_marginTop="49dp"
            android:id="@+id/textView" />

        <TextView
            android:text="Password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView"
            android:layout_alignLeft="@+id/textView"
            android:layout_alignStart="@+id/textView"
            android:layout_marginTop="61dp"
            android:id="@+id/textView3" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:layout_alignParentTop="true"
            android:layout_alignLeft="@+id/Rbutton"
            android:layout_alignStart="@+id/Rbutton"
            android:layout_marginTop="30dp"
            android:id="@+id/registerN" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:ems="10"
            android:layout_below="@+id/registerN"
            android:layout_alignRight="@+id/registerN"
            android:layout_alignEnd="@+id/registerN"
            android:layout_marginTop="36dp"
            android:id="@+id/Rpassword" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:ems="10"
            android:id="@+id/RRpassword"
            android:layout_alignBaseline="@+id/textView4"
            android:layout_alignBottom="@+id/textView4"
            android:layout_alignLeft="@+id/Rbutton"
            android:layout_alignStart="@+id/Rbutton" />

        <Button
            android:text="Register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Rbutton"
            android:layout_below="@+id/textView4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="57dp" />

        <TextView
            android:text="Rpassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView4"
            android:layout_centerVertical="true"
            android:layout_alignLeft="@+id/textView3"
            android:layout_alignStart="@+id/textView3" />
    </RelativeLayout>

here's the fragment_signin.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.abdelmagied.myapplication.Signin"
        android:background="#878"
        android:id="@+id/signinfragment">

        <!-- TODO: Update blank fragment layout -->

        <TextView
            android:text="Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="55dp"
            android:layout_marginStart="55dp"
            android:id="@+id/sn"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="46dp" />

        <TextView
            android:text="Password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sn"
            android:layout_alignLeft="@+id/sn"
            android:layout_alignStart="@+id/sn"
            android:layout_marginTop="79dp"
            android:id="@+id/textView2" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:layout_above="@+id/textView2"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:id="@+id/sname" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:ems="10"
            android:layout_alignBottom="@+id/textView2"
            android:layout_alignLeft="@+id/sname"
            android:layout_alignStart="@+id/sname"
            android:id="@+id/signpassword" />

        <Button
            android:text="SignIn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Sbuton"
            android:layout_below="@+id/signpassword"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="51dp" />
    </RelativeLayout>

Answer 1

Rather than taking fragment tag in xml,it would be good for taking just a layout by giving its id and replace it by fragment transaction dynamically

In your layout, change it by taking simple Relative or Linear layout and must give that layout background,remove that fragment tag and replace fragment by java coding according to you need

and then replace it at start of your class in onCreate() method by->`

getSupportFragmentManager().beginTransaction().replace(R.id.fragmentplace, new Your_frag(), Constant.FragmentTags.fragmentTag).commit();

Answer 2

I think you should use DialogFragment which are here for those kind of popups in front of others.

You use it like that

DialogFragment registerFragment = RegisterFragment.newInstance(0);
registerFragment.show(getFragmentManager().beginTransaction(), "RegisterPopup");

And your fragment will be of class DialogFragment. Usually you pop a Dialog starting like that. Then depending on what you want many options are possible.

public class RegisterFragment extends DialogFragment {
    ...        

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        ...
    }
}

And you can find the example on the Android Developer DialogFragment