Fragment and transparent background in transition

Question

Okay what I am trying to implement is the following behavior from ET-Money android app: On clicking December 2016 spinner , there's a view that slides down the screen and making background view/layout visibility dark faded .

What I've done so far is created a fragment(with transparent dark background) which overlaps the current activity layout and added a slide transition on click.

But this is not exact behavior I require because this way the whole dark transparent layout of fragment SLIDES in on the current activity , and what I need is background layout to fade to black and not slide in along with the fragment layout. (As in the original app , just the date selection view in white background slides in the activity , the background fades simultaneously)

How can i achieve the required behavior ?

MainActivity :

public class MainActivity extends AppCompatActivity {

    public Button clickme;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        final android.app.Fragment fragment = this.getFragmentManager().findFragmentById(R.id.menuFragment);
        this.getFragmentManager().beginTransaction().hide(fragment).commit();

        clickme = (Button) findViewById(R.id.clickme);
        clickme.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Toast.makeText(getApplicationContext(), "clicked", Toast.LENGTH_SHORT).show();
                FragmentManager fragmentManager = getFragmentManager();
                android.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.setCustomAnimations(R.animator.slide_up, 0);
                fragmentTransaction.show(fragment).commit();

            }
        });


    }
}

activity_main.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"

    tools:context="com.example.svatts.testapp.MainActivity">

    <FrameLayout
        android:id="@+id/scene_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/back"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/clickme"
                android:layout_width="40dp"
                android:layout_height="50dp"
                android:text="click me" />
        </FrameLayout>


        <fragment
            android:id="@+id/menuFragment"
            android:name="com.example.svatts.testapp.MyFrag"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal" />
    </FrameLayout>


</RelativeLayout>

MyFrag.java :

public class MyFrag extends Fragment {

    Button button ;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.firstfrag,container,false);

        button = (Button)view.findViewById(R.id.butt);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // strart other fragment
                Toast.makeText(getActivity(),"clicked here",Toast.LENGTH_SHORT).show();
            }
        });

        return view;
    }
}

firstfrag.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#aa000000">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="THIS IS TEST BRP" />

    <TextView
        android:id="@+id/uo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:text="THIS IS UUOO" />

    <Button
        android:id="@+id/butt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/uo"
        android:text="Click Me" />
</RelativeLayout>

Answer 1

Thanks to the only comment by fisher3421 , finally got the required behavior by using DialogFragment.

Following is the working code :

MainActivity :

public class MainActivity extends AppCompatActivity {

    public Button clickme;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        clickme = (Button) findViewById(R.id.clickme);
        clickme.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Toast.makeText(getApplicationContext(), "clicked", Toast.LENGTH_SHORT).show();

                FragmentManager  fm = getSupportFragmentManager();
                // FragmentTransaction ft = fm.beginTransaction();
                MyFrag dFragment = new MyFrag();
                // Show DialogFragment
                dFragment.show(fm, "Dialog Fragment");
            }
        });


    }

}

MyFrag.java (DialogFragment)

public class MyFrag extends DialogFragment {

    Button button ;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.firstfrag, container,
                false);
        getDialog().setTitle("DialogFragment Tutorial");

       // getDialog().setCanceledOnTouchOutside(true);
        // Do something else
        return rootView;
    }

@Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
    final Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.getWindow().getAttributes().windowAnimations = R.style.detailDialogAnimation;
    return dialog;
}

    @Override
    public void onStart()
    {
        super.onStart();

        // safety check
        if (getDialog() == null)
            return;

        int dialogWidth = 700; // specify a value here
        int dialogHeight = 600 ; // specify a value here

        getDialog().getWindow().setLayout(dialogWidth, dialogHeight);

        // ... other stuff you want to do in your onStart() method
    }

}

anim_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="100"

        android:fromYDelta="-300"

        android:toYDelta="0" />

</set>

anim_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="100"

        android:fromYDelta="0"

        android:toYDelta="-300" />

</set>