Java – Cannot replace/navigate fragments

I’m trying to navigate from one fragment to another. The two fragments are 100% different and there is no ViewPager or anything 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 (using 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 (using 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 a button, I need to move to Fragment CustomView. But instead of moving, it simply replaces everything in the CustomView on top of the FirstView. The picture below will explain it better.

FirstView alone

CustomView alone

When the button is clicked by FirstView

Why is this?

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

You cannot replace a statically defined fragment in a layout file. You can only replace fragments that are dynamically added through FragmentTransactions.

None of your layouts contain fragments in the layout.

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

The new fragment replaces the existing fragment previously added to the container.

Look at this