Develop Reference

When navigating from one fragment to another, the second fragment overlaps

On the click of a button I want to navigate from one fragment to another. The problem is that when I press the button the second fragment overlaps the other.
I searched for some answers but it doesn't seem to word in my case. I tried adding a background color but it still overlaps.
So after I click the button the following thing happens:
Here are my codes:
I gave the first fragment an ID:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.home.HomeFragment"
android:background="#FFF">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="1dip"
app:layout_constraintBottom_toTopOf="parent"
android:background="#FFF"/>
The ID of the button is: nextFragment
The code inside the class of the first fragment is:
nextFragment = v.findViewById(R.id.nextFragment);
nextFragment.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v){
Fragment fragment = new NotificationsFragment();
FragmentManager fragmentManager = getParentFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.fragment_container, fragment)
.addToBackStack(null)
.commit();
}
});
Hope i gave enough information, if not don't hesitate to ask for more! Thanks in advance.

The problem is that you are using fragment_container as the first fragment instead of the container for your first fragment.
In your MainActivity you have to load your first fragment inside that container. Not use it as a fragment.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if(savedInstanceState == null) {
Fragment firstFragment = new YourFirstFragment();
FragmentManager manager = getFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
transaction.replace(R.id.fragment_container, firstFragment);
transaction.commit();
}
}
After that, in your first fragment, when you will replace the fragment it will work great.

So the solution was simple.. I gave an Id to a framelayout inside the first fragment instead of to the root layout.
Now the next thing is that the tab on the bottom also has to change when the button is pressed.

Fragments overlapping on FrameLayout

I am trying to add multiple fragments to a FrameLayout. I need to add them one below another. But they are overlapping.
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
MainActivity.java
public class MainActivity extends FragmentActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
// Create instance of fragments
FragmentPrimaryList firstFrag = new FragmentPrimaryList();
FragmentSecondaryList secFrag = new FragmentSecondaryList();
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
// add fragment to the fragment container layout
fragmentTransaction.add(R.id.fragment_container,firstFrag);
fragmentTransaction.add(R.id.fragment_container,secFrag);
fragmentTransaction.commit();
}
}
They looks like this. How can I solve this?

Use the replace method instead of the add method.
The replace method hides the current fragment before adding new one, the add method simply adds the new fragment without disposing off the older fragment.
In order to retain the back stack, use the fragment transaction with backstack management.

I need to display both fragments at same time, one below another
You can try the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
Now add fragmments using:
fragmentTransaction.add(R.id.fragment_container1,firstFrag);
make sure you Fragment's layout_height = "wrap_content"

Add background to your fragments and make "android:clickable="true" to parent layout.

Do this way:
First fragment
FragmentPrimaryList firstFrag = new FragmentPrimaryList();
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
// add fragment to the fragment container layout
fragmentTransaction.add(R.id.fragment_container,firstFrag);
fragmentTransaction.commit();
second fragment
FragmentSecondaryList secFrag = new FragmentSecondaryList();
fragmentManager = getSupportFragmentManager();
fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.fragment_container,secFrag);
fragmentTransaction.commit();

How to add fragment inside a fragment of ViewPager with same id where each fragment added in view pager is same?

I am trying to add a fragment inside another fragment which is added in view pager. All fragment inside view pager are same. I am just viewing them with swipe. On button click, i add a fragment inside our main fragment by using add fragment. On doing this, this new fragment is being added to last fragment of view pager instead of current one.
Reason which seems to me is when we look for fragment, we still have last fragment active and that fragment adds this new fragment on top of it.
Everything works fine for first
public void onAddFragmentClick(View view) {
if (!isInfoShown) {
FragmentTransaction fragmentTransaction = this.getActivity().getSupportFragmentManager().beginTransaction();
fragment = new MainFragment();
fragmentTransaction.replace(R.id.fragment, fragment, "detail fragment");
fragmentTransaction.commit();
isInfoShown = true;
} else {
FragmentTransaction fragmentTransaction = this.getActivity().getSupportFragmentManager().beginTransaction();
fragmentTransaction.remove(fragment);
fragmentTransaction.commit();
isInfoShown = false;
}
}
Main Fragment which is added in viewpager is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.wedm.wedme.ui.fragment.PictureScreenFragment"
android:id="#+id/fragment"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal|top" />
</FrameLayout>
</RelativeLayout>

For nested fragments you should use the child fragment manager of the fragment where you want to add fragments. Hope this helps.

How can I add a fragment from within a viewpager that covers the viewpager tabs

Currently I have a viewpager setup according to the documentation. Within the first fragment tab I have setup a recycler view that contains a list of cardviews. Within each cardview I have a button which should open a new fragment. I would like this new fragment to overlap the action bar tabs (something similiar to how facebook comments work when you click the comment button). I am not sure how to get it working. I created an extra framelayout and relative layout above my viewpager hoping that it would overlap, however this doesn't seem to work. How can I have my new fragment cover the action bar tabs as well? I am not asking how to replace the current viewpager fragment if that makes sense.
I filled the new fragment with a red background, the result after envoking the onclick listener is shown here: http://i.imgur.com/yHYpzGr.png
In my onclick listener I have:
FragmentManager fragmentManager = activity.getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.container, commentFragment,"comment_fragment_tag");
fragmentTransaction.commit();
My main activity layout that contains the viewpager:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/main_activity">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</FrameLayout>

Try this .. hope it works
FragmentManager fragmentManager = activity.getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.container, commentFragment,"comment_fragment_tag");
fragmentTransaction.commit();
or
Fragment fr = new FragmentTwo() ;
FragmentManager fm = getFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
ft.replace(R.id.container, fr);
ft.commit();
hear fr is the new fragment that would be replaced

Changing Fragment

I recently modified my ActionBar as to have two tabs, corresponding to two Fragments respectively.
Let's say my first tab is the Main Page, the second my About Page.
The About Page is static.
The Main Page changes. Let's say, for question's sake, that the Main Page has this single button in the center of the screen. I want it in such a way that when the user clicks the button, the page changes to another screen with text. This is easily done with Activities using Intent. I don't know how to do this with Fragments.
In sum, what is the best practice switching Fragments inside a tab?

Consider using fragment's method getChildFragmentManager().
So your way to go.
In you first tab
Create nested fragment whitch will display button.
MainPage.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
</LinearLayout>
class MainPage extends Fragment(){
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FragmentTransaction ft = getChildFragmentManager().beginTransaction();
ft.replace(R.id.fragment_container, new ButtonFragment(), ButtonFragment.class.getName());
ft.commit();
((Button)getActivity().findViewById(R.id.your_button)).setOnClickListener(new OnClickListener(){
public void onClick(View v){
FragmentTransaction ft = getChildFragmentManager().beginTransaction();
ft.replace(R.id.fragment_container, new TextFragment(), TextFragment.class.getName());
ft.addToBackStack(TextFragment.class.getName());
ft.commit();
}
})
}
public boolean onBackPressed(){
FragmentManager mn = getChildFragmentManager();
if(mn.getBackStackEntryCount()>0)
mn.popBackStack(man.getBackStackEntryAt(0).getName(), FragmentManager.POP_BACK_STACK_INCLUSIVE);
}
class ButtonFragment extends Fragment(){
.....
public void onCreateView(Bundle savedinstance){
//inflate you view with button here
}