Unintentionally Overlapping Android Views

Question

My xml file uses the android DrawerLayout. It shows the Toolbar and RecyclerView upon opening the app which is what I want, but when I open the drawer and click an option, the RecyclerView and fragment that was clicked are overlapping.

My code

<?xml version="1.0" encoding="utf-8"?>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/robot_chooser_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame2">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/robot_recycler_view"
        android:paddingTop="5dp"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:id="@+id/robot_empty_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:textSize="20sp"
        android:text="@string/no_robots"
        android:elevation="3dp"
        android:layout_gravity="center"
        android:visibility="gone"
        android:gravity="center" />
    </FrameLayout>

</LinearLayout>

<ListView
    android:id="@+id/left_drawer2"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#eee"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:listSelector="@android:color/darker_gray" />

</android.support.v4.widget.DrawerLayout>

[IMG] http://i63.tinypic.com/157fbps.png[/IMG]

I'm bringing the fragment to the front using this line in my main activity

fragmentManager.beginTransaction().replace(R.id.content_frame2, fragment).commit();

Answer 1

Your problem is that the activity has multiple containers:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content_frame2">

<android.support.v7.widget.RecyclerView
    android:id="@+id/robot_recycler_view"
    android:paddingTop="5dp"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<TextView
    android:id="@+id/robot_empty_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:textSize="20sp"
    android:text="@string/no_robots"
    android:elevation="3dp"
    android:layout_gravity="center"
    android:visibility="gone"
    android:gravity="center" />
</FrameLayout>

You are loading your fragment in the FrameLayout, but you still have the RecyclerView. You should only have a FrameLayout in the activity XML, and your fragment will load the RecyclerView, TextView or whatever you want in there. As it is now, you seem to be loading your fragment in the FrameLayout, while leaving the RecyclerView in place, which causes the overlap.

Your layout should be like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/profileDrawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout 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.support.v7.widget.Toolbar
            android:id="@+id/robot_chooser_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <FrameLayout
            android:id="@+id/content_frame2"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <ListView
        android:id="@+id/left_drawer2"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#eee"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:listSelector="@android:color/darker_gray" />

</android.support.v4.widget.DrawerLayout>