title: Replace one fragment with another, go back to previous fragment on toolbar back button press
body: <p>I have two fragments.</p>
  
  <p>The first fragment has a <code>Button</code> view that, on click, should open the second fragment. The title of the toolbar should change between the two fragments (from "First Fragment" to "Second Fragment"). The second fragment should have a "back button" (arrow left icon) in the toolbar that, on click, lets the user go back to the first fragment.</p>
  
  <p>How do I implement this?</p>
  
  <p>Additionally, is it possible to animate the transition between the two fragments to make it appear as though the second fragment opens in a new "window" (<a href="https://i.stack.imgur.com/hJdX0.gif" rel="nofollow noreferrer">something like this</a>)?</p>
  
  <p>Here is my activity class:</p>
  
  <pre><code>public class MainActivity extends AppCompatActivity {
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
          setSupportActionBar(toolbar);
  
          if (getSupportActionBar() != null) {
              getSupportActionBar().setDisplayHomeAsUpEnabled(true);
              getSupportActionBar().setDisplayShowHomeEnabled(true);
          }
  
          if (findViewById(R.id.fragment_container) != null) {
              if (savedInstanceState != null) {
                  return;
              }
  
              FirstFragment firstFragment = new FirstFragment();
  
              getSupportFragmentManager().beginTransaction()
                      .add(R.id.fragment_container, firstFragment).commit();
          }
      }
  }
  </code></pre>
  
  <p>Here is the activity layout:</p>
  
  <pre><code>&lt;LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"&gt;
  
      &lt;android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize" /&gt;
  
      &lt;FrameLayout
          android:id="@+id/fragment_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>Here is my first fragment class:</p>
  
  <pre><code>public class FirstFragment extends Fragment implements View.OnClickListener {
  
      public FirstFragment() {
          // Required empty public constructor
      }
  
      public static FirstFragment newInstance() {
          FirstFragment fragment = new FirstFragment();
  
          Bundle args = new Bundle();
          fragment.setArguments(args);
  
          return fragment;
      }
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          if (getArguments() != null) {
              //
          }
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
                               Bundle savedInstanceState) {
          View view = inflater.inflate(R.layout.fragment_first, container, false);
  
          Button openSecondFragmentButton = (Button) view.findViewById(R.id.openSecondFragmentButton);
          openSecondFragmentButton.setOnClickListener(this);
  
          return view;
      }
  
      @Override
      public void onClick(View v) {
          Fragment fragment = null;
  
          switch (v.getId()) {
              case R.id.openSecondFragmentButton:
                  // ?
                  break;
          }
      }
  
      @Override
      public void onAttach(Context context) {
          super.onAttach(context);
      }
  
      @Override
      public void onDetach() {
          super.onDetach();
      }
  }
  </code></pre>
  
  <p>Here is my first fragment's layout:</p>
  
  <pre><code>&lt;ScrollView
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:isScrollContainer="true"&gt;
  
      &lt;RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"&gt;
  
              &lt;Button
                  android:id="@+id/openSecondFragmentButton"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="Open Second Fragment" /&gt;
  
          &lt;/RelativeLayout&gt;
  
      &lt;/RelativeLayout&gt;
  
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>Here is my second fragment class:</p>
  
  <pre><code>public class SecondFragment extends Fragment {
  
      public SecondFragment() {
          // Required empty public constructor
      }
  
      public static SecondFragment newInstance() {
          SecondFragment fragment = new SecondFragment();
  
          Bundle args = new Bundle();
          fragment.setArguments(args);
  
          return fragment;
      }
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          if (getArguments() != null) {
              //
          }
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
                               Bundle savedInstanceState) {
          return inflater.inflate(R.layout.fragment_second, container, false);
      }
  
      @Override
      public void onAttach(Context context) {
          super.onAttach(context);
      }
  
      @Override
      public void onDetach() {
          super.onDetach();
      }
  }
  </code></pre>
  
  <p>And lastly, here is my second fragment's layout:</p>
  
  <pre><code>&lt;LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;GridView
          android:id="@+id/gridView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:numColumns="10" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>How can I achieve the results I'm looking for?</p>