Android fragment screens overlap

Question

I've got an app that uses fragments. On one of my user's devices (the HTC One), the fragments overlap each other and his screen ends up looking like a mess:

I've tried to reproduce it on my own hardware, though it's not the HTC One. I've also tried using android version 4.1.2, which is the version he has and it works fine. Short of running out to buy an HTC One, does anyone have any suggestions?

When I add in the new fragment, I do this

 Fragment f = new MyFragment();
 FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction();
 ft.replace(R.id.mainContent, f);
 ft.addToBackStack(null);
 ft.commit();

My XML layout (trimmed up to relevant parts):

<RelativeLayout>
    <LinearLayout>
        <!-- My home screen content is here -->
    </LinearLayout>

    <!-- This is where the fragment gets placed -->
    <LinearLayout android:id="@+id/mainContent"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">
    </LinearLayout>
</RelativeLayout>

UPDATE

The fragment that gets added has this layout:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/app_bg"    
    tools:context=".DeviceListActivity" >

    <!-- snipped! (for brevity) -->
</RelativeLayout>

I've been playing around - I noticed if I remove the android:background I can reproduce the problem which leads me to believe that the HTC One is causing the fragment's background property to be ignored for some reason.

Answer 1

I have done...

my mainactivity layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:padding="10dp">

    <RelativeLayout
        android:id="@+id/registerContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/usernameEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:layout_marginTop="15dp"
            android:hint="USERNAME"
            android:textColorHint="#FFFFFF"
            android:textColor="#FFFFFF"
            android:background="@drawable/edittext_style"
            android:textAlignment="center"/>

        <EditText
            android:id="@+id/passEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:layout_marginTop="15dp"
            android:inputType="textPassword"
            android:hint="PASSWORD"
            android:textColorHint="#FFFFFF"
            android:textColor="#FFFFFF"
            android:textAlignment="center"
            android:background="@drawable/edittext_style"
            android:layout_below="@id/usernameEditText"/>


        <EditText
            android:id="@+id/phoneEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:layout_marginTop="15dp"
            android:inputType="phone"
            android:hint="PHONE NUMBER"
            android:textColorHint="#FFFFFF"
            android:textColor="#FFFFFF"
            android:background="@drawable/edittext_style"
            android:textAlignment="center"
            android:layout_below="@id/passEditText"/>

        <EditText
            android:id="@+id/emailEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:layout_marginTop="15dp"
            android:inputType="textEmailAddress"
            android:hint="EMAIL"
            android:textColorHint="#FFFFFF"
            android:textColor="#FFFFFF"
            android:background="@drawable/edittext_style"
            android:textAlignment="center"
            android:layout_below="@id/phoneEditText"/>

        <Button
            android:id="@+id/registerEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/emailEditText"
            android:text="REGISTER"
            android:layout_marginTop="20dp"
            android:background="#0b999b"
            android:textColor="#000000"
            android:textSize="18dp"/>


    </RelativeLayout>

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


</RelativeLayout>

fragment to overlap layout is otp_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textviewOTP"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Enter Your OTP"
            android:textColor="#0b999b"
            android:textStyle="bold"
            android:textSize="24dp"
            android:textAlignment="center"
            android:layout_marginTop="200dp"
            android:layout_marginBottom="5dp"/>

        <EditText
            android:id="@+id/otpEditText"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:padding="15dp"
            android:layout_marginTop="15dp"
            android:inputType="phone"
            android:hint="EX: 456789"
            android:textColorHint="#FFFFFF"
            android:textColor="#FFFFFF"
            android:background="@drawable/edittext_style"
            android:textAlignment="center"
            android:layout_below="@id/textviewOTP"/>

        <Button
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="ENTER"
            android:background="#0b999b"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/otpEditText"/>


    </RelativeLayout>

</LinearLayout>

what i have done is

        registerContainer.setVisibility(View.GONE);

        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        OTPFragment otpFragment = new OTPFragment();
            fragmentTransaction.add(R.id.otpfragmentcontainer, otpFragment);
            fragmentTransaction.commit();

which disable registerContainer and display my fragment layout

Answer 2

I have encountered similar situation and the following worked for me.

Check if the savedInstanceState if not-null, in that case, don't do the fragment transaction. It will resolve this issue.

if (homeFragment == null) {
    if (savedStateInstance != null) {
    homeFragment = (HomeFragment) fragmentManager.findFragmentByTag(HOME_FRAGMENT);
    return;
}
// tie new fragment
homeFragment = new HomeFragment();
homeFragment.setArguments(bundle);
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(homeFragment, HOME_FRAGMENT);
transaction.commit();
}

Hope this helps.

Answer 3

It turns out the problem was a resource issue, but it's not clear why...

The background I had was only in the ldpi folder; normally the higher densities will use any graphic available, however in this case, the device was ignoring that file. A bug? Dunno - in any case, the fix was to create a resource for the xxdpi folder matching the same name.

Answer 4

You can try changing the fragment container to a FrameLayout, and see if this still happens. Since you have a background on your Fragment, it should cover up the previous one. Not sure why this only happens on that device though.

<!-- This is where the fragment gets placed -->
<FrameLayout android:id="@+id/mainContent"
             android:layout_width="match_parent"
             android:layout_height="match_parent">