Android UI Doubles after Configuration Change

Question

I have an issue where the UI of a fragment doubles after a configuration change such that changing from light mode to dark mode and then scrolling down on the fragment's scroll view produces the image below. The UI will hover over each other producing a dizzying effect

The layout is as such:

 <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

           <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            .
            .
            .
           </RelativeLayout>
           <include
             android:id="@+id/distance_filter"
             layout="@layout/fragment_some_layout" />
        </LinearLayout>
 </ScrollView>

The host activity of the fragment has this method defined in its onCreate()

DistanceFragment mFragment = new DistanceFragment();
mFragment.setArguments(getIntent().getExtras());
getSupportFragmentManager().beginTransaction().add(binding.rootContainer.getId(), mFragment).commit();

Interestingly using replace instead of add removes the bug but replaces the UI

Answer 1

Okay, I have resolved the issue but am unsure about the underlying cause. To start, it would be best to start here: Android: fragments overlapping issue

The solution in my case was simply setting a null check for savedInstanceState to prevent another fragment from being added. Why the activity overlaps the fragment, remains a mystery.

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
DistanceFragment mFragment = new DistanceFragment();
mFragment.setArguments(getIntent().getExtras());

if (savedInstanceState == null){        
getSupportFragmentManager().beginTransaction().add(binding.rootContainer.getId(), mFragment).commit();
      }
}