Fragments overlapping each other

Question

I have an action bar with 3 tabs, each tab opens a fragment. The third tab, "Catalog", has a list: enter image description here

When I click on an item it opens another fragment, which is not part of the action bar:

public void onClick(View v) {
    switch (v.getId())
    {
    case R.id.category1:    
        Fragment cosmeticsFragment = new ActivityCosmetics();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();

        transaction.replace(android.R.id.content, cosmeticsFragment);
        transaction.addToBackStack(null);

        transaction.setTransition(1);

        transaction.commit();
        break;
        ...

This is what it looks like after that: enter image description here

From this point, if I go to other tab and then return to the Catalog tab, I see the 2 previous fragments overlapping each other:

enter image description here

How do I prevent it from happening?

score 5 · Answer 1 · answered Apr 10 '13 at 10:13

You can manage your fragments by searching them by tag. When adding fragment to backstack add TAG name

transaction.addToBackStack("myCustomFragmentTag");

If you want to destroy Fragment anywhere in application :

Fragment previousInstance = getFragmentManager().findFragmentByTag("myCustomFragmentTag");
                if (previousInstance != null)
                    transaction.remove(previousInstance);

You can try override some behavior so this line of code 'll destroy initialized last Fragment

getFragmentManager().popBackStack();

I tried to use it as follows: `transaction.addToBackStack("CategoryFragment");` and then tried to use the rest of the code in onResume and onTabReselected methods. But I still saw these fragments overlapping... — Igal, Apr 10 '13 at 12:35

score 5 · Answer 2 · answered Jan 04 '16 at 09:50

5

Setting a background to fragment layout would fix this.

answered Jan 04 '16 at 09:50

Asad Haider

59
1
2

This should be a comment. – ρяσѕρєя K Jan 30 '16 at 10:32
1

android:background="?android:colorBackground" – Dinesh Rajan Feb 13 '16 at 19:42
also you have to add below so clicks wont get passed to the old fragment ==> android:clickable="true" – Dinesh Rajan Feb 13 '16 at 19:43
4

adding a background to the fragment will not be the correct solution. Its is just an hack – Saran Sankaran Nov 24 '17 at 12:02

score 1 · Answer 3 · edited May 23 '17 at 11:55

1

According to this question : Android: fragments overlapping issue

all you need is to just set a background color to your in XML file

Solve this problem.

edited May 23 '17 at 11:55

Community

1
1

answered Jan 21 '16 at 10:32

Milad Metias

123
2
8

score 0 · Answer 4 · answered May 17 '13 at 12:11

You can try like this for tabs..

   public class Tabs extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tabs);
    Resources res = getResources(); // Resource object to get Drawables
    TabHost tabHost = getTabHost();  // The activity TabHost
    TabHost.TabSpec spec;  // Resusable TabSpec for each tab
   // Intent intent;  // Reusable Intent for each tab
    // Create an Intent to launch an Activity for the tab (to be reused)
    Intent intent1 = new Intent().setClass(this, Social.class);
    // Initialize a TabSpec for each tab and add it to the TabHost
    spec = tabHost.newTabSpec("app_name").setIndicator("Practice",
                      res.getDrawable(R.drawable.tab_social))
                  .setContent(intent1);
    tabHost.addTab(spec);
    tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.bbgg);
    // Do the same for the other tabs
    Intent intent2 = new Intent().setClass(this, Web.class);
    spec = tabHost.newTabSpec("application").setIndicator("Application",
                      res.getDrawable(R.drawable.tab_web))
                  .setContent(intent2);
    tabHost.addTab(spec);
    tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.bbgg);
    Intent intent3 = new Intent().setClass(this, Catalog.class);
    spec = tabHost.newTabSpec("toplinks").setIndicator("Top Links",
                      res.getDrawable(R.drawable.tab_catalog))
                  .setContent(intent3);
    tabHost.addTab(spec);
    tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.bbgg);
    tabHost.setCurrentTab(0);
}
}

In your layout xml

    <TabHost 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 

  <LinearLayout 
android:id="@+id/LinearLayout01" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
android:orientation="vertical">
  <TabWidget 
android:id="@android:id/tabs" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content"></TabWidget>
 <FrameLayout 
android:id="@android:id/tabcontent" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"></FrameLayout>
 </LinearLayout>
 </TabHost>

Fragments overlapping each other

4 Answers4

Linked