Fragment not properly replacing

Question

I have implemented a MiniDrawer using the MaterialDrawer by Mike Penz.

It's properly working but when I try to replace the content of the frame with another fragment the content replaces but the old content stays there and both the element rest on the screen.

For better understanding you can see the image(red numbers are not part of screenshot) below

MainActivity.java:

package activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.danish.foveros.R;
import com.mikepenz.crossfader.Crossfader;
import com.mikepenz.crossfader.util.UIUtils;
import com.mikepenz.google_material_typeface_library.GoogleMaterial;
import com.mikepenz.materialdrawer.AccountHeader;
import com.mikepenz.materialdrawer.AccountHeaderBuilder;
import com.mikepenz.materialdrawer.Drawer;
import com.mikepenz.materialdrawer.DrawerBuilder;
import com.mikepenz.materialdrawer.MiniDrawer;
import com.mikepenz.materialdrawer.model.DividerDrawerItem;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import com.mikepenz.materialdrawer.model.ProfileDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IProfile;

import utils.CrossfadeWrapper;


public class MainActivity extends AppCompatActivity{
    Toolbar toolbar;
    private AccountHeader headerResult = null;
    private Drawer result = null;
    private MiniDrawer miniResult = null;
    private Crossfader crossFader;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar=(Toolbar)findViewById(R.id.toolbar);
        setTitle(R.string.app_name);
        final IProfile profile = new ProfileDrawerItem().withName("MD Danish Ansari").withEmail("ansarid567@gmail.com").withIcon(R.drawable.my_profile);

        headerResult=new AccountHeaderBuilder()
                .withActivity(this)
                .withHeaderBackground(R.drawable.header)
                .withTranslucentStatusBar(false)
                .addProfiles(profile)
                .withSavedInstance(savedInstanceState)
                .build();


        DrawerBuilder builder =new DrawerBuilder()
                .withActivity(this)
                .withToolbar(toolbar)
                .withTranslucentStatusBar(false)
                .withAccountHeader(headerResult)
                .addDrawerItems(
                        new PrimaryDrawerItem().withName(R.string.title_home).withIcon(GoogleMaterial.Icon.gmd_home).withIdentifier(1),
                        new PrimaryDrawerItem().withName(R.string.title_favourite).withIcon(GoogleMaterial.Icon.gmd_favorite).withIdentifier(2),
                        new PrimaryDrawerItem().withName(R.string.title_non_material).withIcon(GoogleMaterial.Icon.gmd_color_lens).withIdentifier(3),
                        new PrimaryDrawerItem().withName(R.string.title_web).withIcon(GoogleMaterial.Icon.gmd_web).withIdentifier(4),
                        new DividerDrawerItem(),
                        new PrimaryDrawerItem().withName(R.string.title_about).withIcon(GoogleMaterial.Icon.gmd_info).withIdentifier(5),
                        new PrimaryDrawerItem().withName(R.string.title_contact).withIcon(GoogleMaterial.Icon.gmd_contacts).withIdentifier(6)

                )
                .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem iDrawerItem) {
                        if(position==2)
                        {
                            Fragment fragment=new FavouriteFragment();
                            FragmentManager fragmentManager=getSupportFragmentManager();
                            FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
                            fragmentTransaction.replace(R.id.content_frame,fragment);
                            fragmentTransaction.commit();
                          result.closeDrawer();
                        }
                        return miniResult.onItemClick(iDrawerItem);
                    }
                })
                .withSavedInstance(savedInstanceState);

        result=builder.buildView();
        miniResult=new MiniDrawer().withDrawer(result).withAccountHeader(headerResult).withInRTL(true);
        //get the widths in px for the first and second panel
        int firstWidth = (int) UIUtils.convertDpToPixel(300, this);
        int secondWidth = (int) UIUtils.convertDpToPixel(72, this);

        //create and build our crossfader (see the MiniDrawer is also builded in here, as the build method returns the view to be used in the crossfader)
        crossFader = new Crossfader()
                .withContent(findViewById(R.id.crossfade_content))
                .withFirst(result.getSlider(), firstWidth)
                .withSecond(miniResult.build(this), secondWidth)
                .withSavedInstance(savedInstanceState)
                .build();

        //define the crossfader to be used with the miniDrawer. This is required to be able to automatically toggle open / close
        miniResult.withCrossFader(new CrossfadeWrapper(crossFader));

        //define a shadow (this is only for normal LTR layouts if you have a RTL app you need to define the other one
        crossFader.getCrossFadeSlidingPaneLayout().setShadowResourceLeft(R.drawable.material_drawer_shadow_left);


    }

}

activity_main.xml:

<RelativeLayout 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:gravity="center">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        tools:ignore="UnusedAttribute" />

    <FrameLayout
        android:id="@+id/crossfade_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Hello World"
            android:textSize="32sp" />
    </FrameLayout>
</RelativeLayout>

Ask if you need more information. Any help is appreciated.

mikepenz · Answer 1 · 2015-11-01T21:06:24.910

Your code shows that you have a FrameLayout which hosts the TextView. The FrameLayout is used for the Crossfader and will be the content area.

When you replace the the content area with the fragment you try to replace a non existing id. As far as i can see there is no content_frame within your layout.

I highly recommend that you place another FrameLayout within the crossfade_content which will later be replaced with the fragment.

EDIT

You should create a fragment_container within the FrameLayout with id crossfade_content which has no childs and you then simply set the first fragment, and you can then later replace this fragment with a different fragment.

So you will have some code like this:

result = new Drawer()
    .withActivity(this)
    .withToolbar(mToolbar)
    . withFireOnInitialOnClick(true)
    .addDrawerItems(
            new PrimaryDrawerItem().withName("FragmentA").withIdentifier(1),
          new PrimaryDrawerItem().withName("FragmentB").withIdentifier(2)
    )
    .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
        @Override
        public void onItemClick(View view, int position, IDrawerItem drawerItem) {
              if(drawerItem != null) {
                  Fragment f = null;
                  switch(drawerItem.getIdentifier) {
                  case 1:
                    f = FragmentA.newInstance();
                  break;
                  case 2:
                    f = FragmentA.newInstance();

                  break;
                  }

                  if (drawerItem instanceof Nameable) {
                    mToolbar.setTitle(MainActivity.this.getString(((Nameable) drawerItem).getNameRes()));
                  }
              }
            }
        }
    }).build();

this will set the first fragment upon launch because we set withFireOnInitialOnClick(true) which will fire for the first selected fragment. and afterwards you replace it with the correct fragment for the new selected item. so you have the whole fragment logic within the onItemClick listener

Fragment not properly replacing

1 Answers1