title: Replacing Layouts using Fragments?
body: <p>relatively new to all of this and this is another noob question that I would be grateful for, I've been trying to work on a new task. Currently, there is an ImageButton called Japanese on this page, and when clicked, I would like it to replace the current ScrollView layout with a new layout showing some new contents. The activity should remain the same after all as I am trying to just replace the ScrollView layout, shouldn't it? I've been thinking of a way to use fragments to achieve this but have no clue on how to do it. </p>
  
  <p>The only example I can think of is Spotify's interface, if you are on the homepage and you click an image, it 'replaces' that layout to show some new songs or something, but doesn't affect the bottom navigation. </p>
  
  <p>I've viewed these videos so far but am not sure if they are the right solution: <a href="https://www.youtube.com/watch?v=FF-e6CnBwYY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=FF-e6CnBwYY</a></p>
  
  <p><a href="https://i.stack.imgur.com/yACkw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yACkw.png" alt="This is what I&#39;m trying to achieve."></a></p>
  
  <p>This is my code so far.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout 
  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"
  xmlns:tools="http://schemas.android.com/tools"&gt;
  
  &lt;android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:background="#000"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"&gt;
  
      &lt;TextView
          android:id="@+id/toolbartitle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:text="Home"
          android:textColor="@android:color/white"
          android:textSize="32sp"
          android:textStyle="bold" /&gt;
  
  &lt;/android.support.v7.widget.Toolbar&gt;
  
  &lt;android.support.design.widget.BottomNavigationView
      android:id="@+id/the_bottom_navigation"
      android:layout_width="0dp"
      android:layout_height="75dp"
      android:layout_gravity="bottom"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:menu="@menu/bottomnavigationmenu"&gt;
  
  &lt;/android.support.design.widget.BottomNavigationView&gt;
  
  
  &lt;ScrollView
      android:id="@+id/scrollView2"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginBottom="75dp"
      android:layout_marginTop="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/toolbar"
      app:layout_constraintVertical_bias="0.0"&gt;
  
      &lt;android.support.constraint.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"&gt; 
  
       [content here]
  
      &lt;/android.support.constraint.ConstraintLayout&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p></p>