android: Replace fragment container inside a CoordinatorLayout - android

I have the following XML:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--I use this include as container with the FrameLayout below-->
<!--<include layout="#layout/content_main" />-->
<FrameLayout
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:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.improvemybrand.MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_input_add" />
and the problem is simple:
When I try to replace the container FrameLayout from my Coordinator, it does not work, it shows the new fragment but also keeps the old one, in my simple example, the TextView with Hello world will remains.
To replace, I'm using the following code:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.content_main, fragment);
transaction.commit();
Any ideas?

FragmentTransactions deal only with Fragments and their Views. The TextView you've defined in your layout is not (part of) a Fragment's View, so it will not be affected by a FragmentTransaction, and the Fragment in your snippet will just be added on top of it.
You have a few options. You could hide or remove the TextView yourself when performing the transaction. This might be preferable, if that simple TextView is all you need initially, and sticking it in a Fragment could be overkill. You could also simply set an opaque background on the Fragment's layout, which will effectively hide the TextView.
The probably best option, however, is to put the TextView in a layout for another Fragment which is loaded at startup. Subsequent transactions will then replace/remove it as you're expecting. Do note that any Fragment you wish to replace/remove at runtime must be loaded dynamically in your code. That is, they cannot be defined in <fragment> elements in your Activity's layout.

You should move TextView into Fragment's layout.
like this.
fragment_hello_world.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
/>
</LinearLayout>
HelloWorldFragment
public class HelloWorldFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_hello_world, container, false);;
}
}

Related

Replacing DrawerLayout's RelativeLayout with a Fragment's layout doesn't work but no error is shown [duplicate]

I have the following XML:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--I use this include as container with the FrameLayout below-->
<!--<include layout="#layout/content_main" />-->
<FrameLayout
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:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.improvemybrand.MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_input_add" />
and the problem is simple:
When I try to replace the container FrameLayout from my Coordinator, it does not work, it shows the new fragment but also keeps the old one, in my simple example, the TextView with Hello world will remains.
To replace, I'm using the following code:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.content_main, fragment);
transaction.commit();
Any ideas?
FragmentTransactions deal only with Fragments and their Views. The TextView you've defined in your layout is not (part of) a Fragment's View, so it will not be affected by a FragmentTransaction, and the Fragment in your snippet will just be added on top of it.
You have a few options. You could hide or remove the TextView yourself when performing the transaction. This might be preferable, if that simple TextView is all you need initially, and sticking it in a Fragment could be overkill. You could also simply set an opaque background on the Fragment's layout, which will effectively hide the TextView.
The probably best option, however, is to put the TextView in a layout for another Fragment which is loaded at startup. Subsequent transactions will then replace/remove it as you're expecting. Do note that any Fragment you wish to replace/remove at runtime must be loaded dynamically in your code. That is, they cannot be defined in <fragment> elements in your Activity's layout.
You should move TextView into Fragment's layout.
like this.
fragment_hello_world.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
/>
</LinearLayout>
HelloWorldFragment
public class HelloWorldFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_hello_world, container, false);;
}
}

Contents of my main activity over Laps my fragments [duplicate]

I have the following XML:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--I use this include as container with the FrameLayout below-->
<!--<include layout="#layout/content_main" />-->
<FrameLayout
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:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.improvemybrand.MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_input_add" />
and the problem is simple:
When I try to replace the container FrameLayout from my Coordinator, it does not work, it shows the new fragment but also keeps the old one, in my simple example, the TextView with Hello world will remains.
To replace, I'm using the following code:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.content_main, fragment);
transaction.commit();
Any ideas?
FragmentTransactions deal only with Fragments and their Views. The TextView you've defined in your layout is not (part of) a Fragment's View, so it will not be affected by a FragmentTransaction, and the Fragment in your snippet will just be added on top of it.
You have a few options. You could hide or remove the TextView yourself when performing the transaction. This might be preferable, if that simple TextView is all you need initially, and sticking it in a Fragment could be overkill. You could also simply set an opaque background on the Fragment's layout, which will effectively hide the TextView.
The probably best option, however, is to put the TextView in a layout for another Fragment which is loaded at startup. Subsequent transactions will then replace/remove it as you're expecting. Do note that any Fragment you wish to replace/remove at runtime must be loaded dynamically in your code. That is, they cannot be defined in <fragment> elements in your Activity's layout.
You should move TextView into Fragment's layout.
like this.
fragment_hello_world.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
/>
</LinearLayout>
HelloWorldFragment
public class HelloWorldFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_hello_world, container, false);;
}
}

Calling a fragment on top of viewpager overlaps each other

I have the following layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_bracket_activity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/activity_fragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/app_bar_bracket_activity"
layout="#layout/app_bar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundTint="#color/colorAccent"
app:tabMode="fixed"
app:tabMaxWidth="0dp"
app:tabGravity="fill"/>
<mypackage.NonSwipeViewPager
android:id="#+id/tabs_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The nonswipeviewpager was just a custom class where I inherited a viewpager to disable some stuff.
Anyway, I have a button on my app bar that needs to call a fragment that needs to cover the whole screen. I would call it and add a fragment on the frame layout. It worked before I added a viewpager for tab layouts. Now I'm not sure how to deal with the viewpager.
FragmentTransaction ft = mFM.beginTransaction();
mCustomFragment = CustomFragment.newInstance(mObject, mListOfObjects());
ft.replace(R.id.activity_fragment, mCustomFragment , "CustomFragment");
ft.addToBackStack(null);
ft.commit();
This is on my clicklistener of that button on the app bar.
Thoughts?
Views are drawn in the order they are defined in your XML. If you want a View on top of another view it should appear after it or you try to use:
https://developer.android.com/reference/android/view/View.html#bringToFront()

Floating action button will not disappear when going to another fragment

I built a project based on Scrolling Activity, and faced a strange issue. Consider the following scenario:
I click on fab button to go to another fragment but when the fragment displaces, the fab button will not disappear!
Can anybody know how to fix this problem?
Here is my XML of Scrolling Activity that I added to my frameLayout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="ir.apio.myapplication.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end" />
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
content_scrolling.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="ir.apio.myapplication.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/large_text" />
</android.support.v4.widget.NestedScrollView>
My fab ClickListener :
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.frame,new TestFragment())
.commit();
}
});
And also my TestFragment :
public static class TestFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_test,container,false);
return view;
}
}
Here is the screen-shot in the first place:
Here is screen-shot when going to the new fragment:
The reason you are still seeing the FAB is elevation, which refers to a views depth on the screen. It affects which elements are above or below one another and the shadows they cast(for example a FAB sits on top of the main content and casts a shadow).
The FAB by default will have some elevation, which you can override using the elevation attribute, eg app:elevation="4dp". The other elements will be at the 0dp level.
In your case, you've put the FrameLayout last in your layout file, and I presume that's where you are loading your fragment into. What this does is not actually replace your other content, but just cover it with the content of your FrameLayout.
The reason it doesn't cover the FAB, is because the FAB has some elevation and the FrameLayout doesn't. So although you've put your FrameLayout last and would normally expect that to be "on top", the FAB actually has a higher elevation which overrides that.
A quick fix, would be to give your floating action button app:elevation=0dp which would put it back on the same elevation level as everything else and the normal rules would apply, the FrameLayout is last and would be on top.
In reality, just putting a big frame covering the previous content is not usually the best thing to do and you would want to look at other ways to structure the app.
I had the same problem. I called the .hide() method on the FragmentTransaction and it worked for me.
fab.setOnClickListener {
val fragmentManager = fragmentManager
val fragmentTransaction = fragmentManager?.beginTransaction()
val fragment = YourFragment()
fragmentTransaction?.add(R.id.fragment_container, fragment)
fragmentTransaction?.addToBackStack(null)
fragmentTransaction?.hide(this)
fragmentTransaction?.commit()
}

Android replace fragment still displays some of the replaced fragment

I have a tab that contains a linear layout with a searchview and a listview. When the user clicks one of the search results, I want to replace that layout with another layout containing the details of the selection.
What happens when I replace the search fragment only the listview portion of the layout gets replaced; the searchview is still visible and active on the screen.
Here is my search layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<SearchView
android:id="#+id/public_calendar_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:iconifiedByDefault="false"
</SearchView>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:choiceMode="singleChoice" />
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center"/>
</LinearLayout>
Here is the detail layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="vertical" >
<Space
android:layout_width="0dip"
android:layout_height="20dip"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal" >
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".8"
android:text="#string/label_Name" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1" />
</LinearLayout>
.........
</LinearLayout>
And my code to replace the search fragment:
FragmentTransaction transaction = getFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack.
DetailFragment fragment = DetailFragment.newInstance(cal);
transaction.replace(R.id.search_layout, fragment);
transaction.addToBackStack(null);
transaction.commit();
Detail fragment creation:
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.detail_layout, container, false);
return v;
}
static DetailFragment newInstance(String cal) {
DetailFragment d = new DetailFragment();
return d;
}
What am I doing wrong? How can I get the entire search layout to be replaced.
Thanks!
I figured out my problem. Marco wasn't exactly right but he pointed me in the right direction.
The problem was the the container ID I was passing to the replace method was the ID of the fragment I was replacing, not the ID of the fragment container. This seems to explain why some of the original fragment controls were remaining after the replace - that entire fragment wasn't being replaced.
I changed it to get the fragment container view ID, and that worked! Here's the code:
transaction.replace(((ViewGroup)(getView().getParent())).getId(), fragment);
I found the answer for getting the container view ID of a fragment here, Get fragment's container view id.
I was using the correct ID, then also it wasnt going away. Turns out that you need to set the Background color to your needed color in new Fragment layout, like this.
<RelativeLayout 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"
android:background="#color/white_color">
To solve the problem, set the android:background property to “?android:windowBackground” in the fragment layout files.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground"
tools:context=".MainFragment">
...
</LinearLayout>
In Fragment_2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground"
tools:context=".SomeFragment">
...
</LinearLayout>
I was having the same problem, and the solution didn't work for me. Maybe this will help someone...
I had added a fragment inside the activity layout xml file. This caused a lot of issues.
Instead, add a frame layout in your xml file, and then programatically add and replace fragments. This causes the whole fragment to be replaced.
I had the same problem once, and this is my solution.
Try to do this, use FrameLayout instead of fragment in your layout file. Just like this:
<fragment android:id="#+id/your_fragment" />
Then, add your default fragment in activity method onCreate().
getFragmentManager().beginTransaction()
.add(R.id.your_fragment, YourFragment)
.commit();
Now, the old fragment can be replaced correctly, it looks great.
This worked for me, and I hope it helps you too.

Categories

Resources