java - Unable to replace/navigate fragments

Question

I am trying to navigate from one fragment to another. These two fragments are 100% different, there is no ViewPager or something like that to connect them. Here is the code.

fragment_view1.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:id="@+id/firstView">

    <TextView
        android:id="@+id/viewOneText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="92dp"
        android:layout_marginTop="182dp"
        android:text="First View"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/viewOneBtn"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/viewOneText"
        android:layout_below="@+id/viewOneText"
        android:layout_marginTop="17dp"
        android:text="Click Here" />

  <include layout = "@layout/drop_down"
            android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_alignParentBottom="true"/>


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

custom_view.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:id="@+id/customFragment" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="174dp"
        android:text="Custom Fragment"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

FirstView.java (uses fragment_view1.xml)

    package com.example.fragmenttest;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

public class FirstView extends DropDownMenu
{
    private TextView firstText;
    private Button btn;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {


        View view = inflater.inflate(R.layout.fragment_view1,container,false);


        firstText = (TextView)view.findViewById(R.id.viewOneText);
        btn = (Button)view.findViewById(R.id.viewOneBtn);

        btn.setOnClickListener(new ButtonEvent());
        return view;

    }

    private class ButtonEvent implements OnClickListener
    {

        @Override
        public void onClick(View v)
        {
            // Create new fragment and transaction
            Fragment newFragment =  new CustomView();
            FragmentTransaction transaction = getFragmentManager().beginTransaction();

            // Replace whatever is in the fragment_container view with this fragment,
            // and add the transaction to the back stack
            transaction.replace(R.id.fragment_view, newFragment);
            transaction.addToBackStack(null);

            // Commit the transaction
            transaction.commit();
        }

    }


}

CustomView.java (uses custom_view.xml)

package com.example.fragmenttest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

public class CustomView extends Fragment
{
    private TextView secondText;
    private Button secondViewBtn;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.custom_view,container,false);

        return view;

    }


}

In FirstView.java, when I click on the button, I need to move to the Fragment CustomView. But instead moving, it simply replaces everything in CustomView on top of FirstView. Below images will explain it better.

FirstView alone

CustomView alone

When the button is FirstView clicked

Why it is happening like this?

Answer 1

You are trying to replace firstView with the new fragment, but firstView is not a fragment, its' a RelativeLayout.

You cannot replace a fragment defined statically in the layout file. You can only replace fragments that you added dynamically via a FragmentTransaction.

None of your Layout contains fragment in layout.

<fragment
        android:id="@+id/fragment1"
        android:layout_width="march_parent"
        android:layout_height="match_parent"></fragment>

A new Fragment will replace an existing Fragment that was previously added to the container.

Take look on this.