NavigationView and Toolbar be overlaid by content

Question

I'm trying to implement material navigation drawer using

android.support.v4.widget.DrawerLayout
android.support.v7.widget.Toolbar
android.support.design.widget.NavigationView

The problem is both NavigationView & Toolbar always be overlaid by FrameContent. A FrameContent just a fragment.

*NOTE: I had tried LinearLayout replace for RelativeLayout as container, but not work.

activity_layout.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@android:id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"/>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_alignParentTop="true"/>
</RelativeLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"/></android.support.v4.widget.DrawerLayout>

Fragment.xml

<FrameLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/></FrameLayout>

ActivityMain.java

public class MainActivity extends AppCompatActivity{

protected Toolbar mToolbar;
protected NavigationView mNavigationView;
protected DrawerLayout mDrawerLayout;
protected FrameLayout container;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.material_activity_layout);

    this.mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(this.mToolbar);

    this.mNavigationView = (NavigationView) findViewById(R.id.navigation_view);

    this.mNavigationView.inflateHeaderView(R.layout.nav_header);
    this.mNavigationView.inflateMenu(R.menu.drawer);

    this.mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
    ActionBarDrawerToggle defaultActionBarDrawerToggle = new ActionBarDrawerToggle(
            this,
            this.mDrawerLayout,
            this.mToolbar,
            R.string.app_name,
            R.string.app_name) {
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
        }
    };

    this.mDrawerLayout.setDrawerListener(defaultActionBarDrawerToggle);

    defaultActionBarDrawerToggle.syncState();

    this.mToolbar.setTitle("Test Toolbar");
    this.mToolbar.setBackgroundColor(Color.BLUE);

    getFragmentManager().beginTransaction().add(android.R.id.content, new InFragment(), "fragment").commit();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    return true;
}

public static class InFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment, container, false);
    }
}

}

Here the result

Neristance Neristance · Accepted Answer · 2015-08-27T08:05:15

You should not override @android:id/content because it cause some odd behaviour so just introduce a new id like @+id/fragmentcontainer and use it.

When you are adding an fragment with android.R.id.content and there is already some content it will be placed above the other content.

Also change the order that toolbar is before the rest of the content like the framelayout etc.

Hope it helps

Edit: I did adapt my old answer since it was not 100% correct.

NavigationView and Toolbar be overlaid by content

2 Answers