Android navigation drawer main screen overlapped with another layout

Question

I have a navigation drawer app, working fine, then I go to add a "main" screen to application_main and now it gets another layout overlapped with it.

The overlapping screens look like:

I can't find why they are both being rendered, and both are "functional".... as in, all buttons work for both layouts.

Not sure what would be useful to post (MainActivity, which xml, etc... so just ask)

(I'd hope what's overlapping would be obvious).

MainActivity.java

package com.hourtracker;

import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.InterstitialAd;

import java.util.Calendar;

import static com.hourtracker.NavigationDrawerFragment.NavigationDrawerCallbacks;

public class MainActivity extends ActionBarActivity implements NavigationDrawerCallbacks {

    /**
     * Fragment managing the behaviors, interactions and presentation of the
     * navigation drawer.
     */
    private NavigationDrawerFragment mNavigationDrawerFragment;
    /**
     * Used to store the last screen title. For use in
     * {@link #restoreActionBar()}.
     */
    private CharSequence mTitle;

    /**
     * For the weekly big ad.
     */
    private final InterstitialAd mInterstitialAd = new InterstitialAd(this);

    private boolean mConfigChanged = false;
    @Override
    public Object onRetainCustomNonConfigurationInstance() {
        mConfigChanged = true;
        return super.onRetainCustomNonConfigurationInstance();
    }

    @Override
    protected void onDestroy() {
        if (!BuildConfig.FLAVOR.equals("pro")) {
            super.onDestroy();
            if (mConfigChanged) {
                mConfigChanged = false;
            } else {
                if (Calendar.getInstance().get(Calendar.DAY_OF_WEEK) == Calendar.WEDNESDAY) {
                    if (mInterstitialAd.isLoaded()) {
                        mInterstitialAd.show();
                    }
                }
            }
        }
    }

    private void initPrefs() {
        SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
        sp.edit().putBoolean("navigation_drawer_learned", false)
                .putBoolean("initial_setup_done", false)
                .putBoolean("paid_lunch", false)
                .putBoolean("fixed_lunch", false)
                .putString("withholding", "0")
                .putString("pay_rate_curr", "0")
                .putString("pre_tax_curr", "0")
                .putString("post_tax_curr","0")
                .apply();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if((Calendar.getInstance().get(Calendar.DAY_OF_WEEK) == Calendar.WEDNESDAY) &&
                (!BuildConfig.FLAVOR.equals("pro"))) {
            mInterstitialAd.setAdUnitId("ia-mno-tstupidenoughtoleavethis/here:)");

            // Create an ad request.
            AdRequest.Builder adRequestBuilder = new AdRequest.Builder();
            mInterstitialAd.loadAd(adRequestBuilder.build());
            // Set an AdListener.
            mInterstitialAd.setAdListener(new AdListener() {
                @Override
                public void onAdLoaded() {
                    Toast.makeText(MainActivity.this, "The interstitial is loaded", Toast.LENGTH_SHORT).show();
                }
            });
        }

        mNavigationDrawerFragment = (NavigationDrawerFragment) getSupportFragmentManager()
                .findFragmentById(R.id.navigation_drawer);
        mTitle = getTitle();

        // Set up the drawer.
        mNavigationDrawerFragment.setUp(R.id.navigation_drawer,
                (DrawerLayout) findViewById(R.id.drawer_layout));

        // Do initial setup if first run
        SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
        boolean mFirstSetup = sp.getBoolean("initial_setup_done", false);
        if(!mFirstSetup) {
            initPrefs();
             Intent intent = new Intent(this, SettingsActivity.class);
            startActivity(intent);
            sp.edit().putBoolean("initial_setup_done", true).apply();
        }
    }

    @Override
    public void onNavigationDrawerItemSelected(int position) {
        // update the main content by replacing fragments
        FragmentManager fragmentManager = getSupportFragmentManager();
        switch(position) {
        case 0:
            fragmentManager
                .beginTransaction()
                .replace(R.id.frame_container,
                        new Entry_Fragment()).commit();
            break;
        case 1:
        fragmentManager
                .beginTransaction()
                .replace(R.id.frame_container,
                        new Week_Fragment()).commit();
            break;
        case 2:
        fragmentManager
                .beginTransaction()
                .replace(R.id.frame_container,
                        new AllFragment()).commit();
            break;
        }
    }

    public void restoreActionBar() {
        ActionBar actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setTitle(mTitle);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (!mNavigationDrawerFragment.isDrawerOpen()) {
            // Only show items in the action bar relevant to this screen
            // if the drawer is not showing. Otherwise, let the drawer
            // decide what to show in the action bar.
            getMenuInflater().inflate(R.menu.main, menu);
            restoreActionBar();
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            Intent intent = new Intent(this, SettingsActivity.class);
            startActivity(intent);
        }
        return super.onOptionsItemSelected(item);
    }
}

activity_main.xml

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hourtracker.MainActivity" >

    <!--
         As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions.
    -->

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

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="So far this week, you have worked"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:textSize="20dp"
                android:textIsSelectable="false" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Large Text"
                android:id="@+id/textView2"
                android:layout_gravity="center_horizontal"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Hours"
                android:id="@+id/textView3"
                android:layout_gravity="center_horizontal" />

            <AnalogClock
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/analogClock"
                android:layout_gravity="center_horizontal" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Continue"
                android:id="@+id/button"
                android:layout_gravity="center_horizontal" />
        </LinearLayout>
    </FrameLayout>

    <!--
         android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         If you're not building against API 17 or higher, use
         android:layout_gravity="left" instead.
    -->
    <!--
         The drawer is given a fixed width in dp and extends the full height of
         the container.
    -->

    <fragment
        android:id="@+id/navigation_drawer"
        android:name="com.hourtracker.NavigationDrawerFragment"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        tools:layout="@layout/fragment_navigation_drawer" />

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

frag_nav_drawer

<ListView 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:background="#cccc"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    tools:context="com.hourtracker.NavigationDrawerFragment" />

entry_fragment.xml

<RelativeLayout
    android:id="@+id/entryLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:minWidth="350dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hourtracker.MainActivity$PlaceholderFragment" >

    <TextView
        android:id="@+id/allDateLabel"
        android:layout_gravity="left"
        android:text="@string/date"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:paddingRight="5dp" />

    <TextView
        android:id="@+id/allDateText"
        android:layout_gravity="left"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/allDateLabel"
        android:layout_toRightOf="@+id/allDateLabel" />

    <Button
        android:id="@+id/dateButton"
        style="?android:attr/buttonStyleSmall"
        android:layout_gravity="right"
        android:text="@string/change"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/allDateLabel"
        android:layout_alignParentEnd="true"
        android:background="@drawable/round_corner_button"
        android:minHeight="30dp"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/startLabel"
        android:layout_gravity="left"
        android:text="@string/start_time"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/allDateLabel"
        android:layout_marginTop="10dp"
        android:paddingTop="20dp"
        android:paddingRight="5dp" />

    <TextView
        android:id="@+id/startText"
        android:layout_gravity="left"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/startLabel"
        android:layout_alignBaseline="@+id/startLabel" />

    <Button
        android:id="@+id/startButton"
        style="?android:attr/buttonStyleSmall"
        android:layout_gravity="right"
        android:text="@string/change"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/startLabel"
        android:layout_alignParentRight="true"
        android:background="@drawable/round_corner_button"
        android:minHeight="30dp"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/endLabel"
        android:layout_gravity="left"
        android:text="@string/end_time"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/endDateText"
        android:layout_marginTop="10dp"
        android:paddingTop="20dp"
        android:paddingRight="5dp" />

    <TextView
        android:id="@+id/endText"
        android:layout_gravity="left"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/endLabel"
        android:layout_alignBaseline="@+id/endLabel" />

    <Button
        android:id="@+id/endButton"
        style="?android:attr/buttonStyleSmall"
        android:layout_gravity="right|end"
        android:text="@string/change"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/endText"
        android:layout_alignParentRight="true"
        android:background="@drawable/round_corner_button"
        android:minHeight="30dp"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/hoursField"
        android:layout_gravity="left|center_vertical"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/submitButton"
        android:textSize="25sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/submitButton"
        android:layout_gravity="right|top"
        android:text="@string/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_corner_button"
        android:layout_alignTop="@+id/lunchCheck"
        android:layout_toRightOf="@+id/hoursField"
        android:minHeight="30dp"
        android:textColor="#ff00ee00"
        android:textStyle="bold" />

    <CheckBox
        android:id="@+id/lunchCheck"
        android:layout_gravity="right|center_vertical"
        android:checked="true"
        android:text="@string/lunch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/endLabel"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="false"
        android:layout_marginTop="20dp" />

    <Button
        android:id="@+id/deleteButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/delete"
        android:background="@drawable/round_corner_button"
        android:layout_alignTop="@+id/submitButton"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:minHeight="30dp"
        android:textColor="#ffff0000"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="End Date"
        android:id="@+id/endDateText"
        android:layout_below="@+id/startLabel"
        android:layout_marginTop="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:id="@+id/endDateButton"
        style="?android:attr/buttonStyleSmall"
        android:layout_gravity="right|end"
        android:text="@string/change"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/endDateText"
        android:layout_alignParentRight="true"
        android:background="@drawable/round_corner_button"
        android:minHeight="30dp"
        android:textColor="@android:color/black" />


    <com.google.android.gms.ads.AdView
        android:id="@+id/adViewE"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        ads:adSize="SMART_BANNER"
        ads:adUnitId=""/>

</RelativeLayout>

Answer 1

You could set

android:clickable="true"
android:background="#FFF" // Something opaque

for the RelativeLayout in entry_fragment.xml. The clickable="true" will make the lower elements of the previous layout non-clickable and the background="#FFF" will hide them visually. However, it's not a very elegant solution, and Mike's answer should work in most cases.

Answer 2

The reason you're getting the overlayed effect is because you've defined static Views in the FrameLayout container you're using for the FragmentTransactions.

One option is to move those Views to a layout for a Fragment that is loaded into the container on startup. I believe this to be the preferred option.

Another option is to change the background colors of each of your Fragments' layouts' root Views to a solid color, as they are transparent by default.

Answer 3

Try to set a background for your layouts.

android:background="#ffffff"