Using SupportMapFrament in a two pane layout gives duplicate layout error

Issue

I'm using a ListView which drives a detail view. The List view and Detail view have their own activities. The detail view displays a map in a smaller layout. The code for map fragment is as follows:

<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="150dp" android:id="@+id/details_emap_container"
        android:background="@drawable/back_rounded_rectangle_border_black"
        android:padding="2dp"
        >
    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
              android:tag="details_map_short"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              class="com.google.android.gms.maps.SupportMapFragment"
              />
    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rightArrowMap" android:src="@drawable/right_arrow_black"
            android:layout_alignParentRight="true" android:layout_centerVertical="true"
            android:layout_marginRight="10dp"/>
</RelativeLayout>

The first time I click on a list item when in a two pane layout on a tablet, it works fine. But on subsequently selecting any other list item, following error is thrown:

android.view.InflateException: Binary XML file line #159: Error inflating class fragment
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:688)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:724)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:727)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:727)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:727)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:479)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:391)
        at com.xxxx.android.activity.fragments.EventDetailFragment.onCreateView(EventDetailFragment.java:97)
        at android.support.v4.app.Fragment.performCreateView(Fragment.java:1460)
        at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:911)
        at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1088)
        at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:682)
        at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1444)
        at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:429)
        at android.os.Handler.handleCallback(Handler.java:587)
        at android.os.Handler.dispatchMessage(Handler.java:92)
        at android.os.Looper.loop(Looper.java:132)
        at android.app.ActivityThread.main(ActivityThread.java:4123)
        at java.lang.reflect.Method.invokeNative(Native Method)
        at java.lang.reflect.Method.invoke(Method.java:491)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:841)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:599)
        at dalvik.system.NativeStart.main(Native Method)
        Caused by: java.lang.IllegalArgumentException: Binary XML file line #159: Duplicate id 0xffffffff, tag details_map_short, or parent id 0x0 with another fragment for com.google.android.gms.maps.SupportMapFragment
        at android.support.v4.app.FragmentActivity.onCreateView(FragmentActivity.java:285)
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:660)
        ... 22 more

The EventDetailFragment looks like this:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    Log.e(TAG, "onCreateView was called!");
    // If activity recreated (such as from screen rotate), restore
    // the previous article selection set by onSaveInstanceState().
    // This is primarily necessary when in the two-pane layout.
    if (savedInstanceState != null) {
        mCurrentPosition = savedInstanceState.getInt(ARG_POSITION);
        mCurrEventId = savedInstanceState.getString(EVENT_ID);
    }

    // Inflate the layout for this fragment
    detailsView = inflater.inflate(R.layout.fragment_event_detail, container, false);

    mMapFragment = (SupportMapFragment)getFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

    // We can't be guaranteed that the map is available because Google Play services might
    // not be available.
    //setUpMapIfNeeded();  //do this later in onStart

    return detailsView;

}

The code in List activity to display the detail activity or fragment when an item is slected:

@Override
public void onItemSelected(int index) {
    Log.d(TAG, "Item Selected is : " + index);
    if(findViewById(R.id.event_details_container) != null) {
        // In two-pane mode, show the detail view in this activity by
        // adding or replacing the detail fragment using a
        // fragment transaction.
        Log.d(TAG, "Two pane layout navigation executed");
        Bundle arguments = new Bundle();
        arguments.putInt(EventDetailFragment.ARG_POSITION, index);
        EventDetailFragment fragment = new EventDetailFragment();
        fragment.setArguments(arguments);
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.event_details_container, fragment).commit();
    }
    else {
        // In single-pane mode, simply start the detail activity
        // for the selected item ID.
        Log.d(TAG, "Single pane layout navigation - creating new Activity to display!");
        getSupportFragmentManager().executePendingTransactions();
        Intent detailIntent = new Intent(this, EventDetailActivity.class);
        detailIntent.putExtra(EventDetailFragment.ARG_POSITION, index);
        startActivity(detailIntent);
    }

}

I'm not able to figure out why this doesn't work when in two pane layout? And why only the MapFragment seems to throw the error? This was all working just fine until I added the SupportMapFragment. Any help/ideas will be appreciated!

PS: The code has to be supported for API level 10 onwards.

Solution

I finally found the correct fix for this. Since I was using maps in a Fragment in a two pane layout; I had to programmatically construct the map instead of defining in xml. This is demonstrated in the maps example ProgrammaticDemoActivity in android SDK (googleplayservices). Below is excerpt from the example, this is called from onCreateView when called from a Fragment (or onCreate if you're calling from an Activity):

// It isn't possible to set a fragment's id programmatically so we set a tag instead and
// search for it using that.
mMapFragment = (SupportMapFragment) getSupportFragmentManager()
        .findFragmentByTag(MAP_FRAGMENT_TAG);

// We only create a fragment if it doesn't already exist.
if (mMapFragment == null) {
    // To programmatically add the map, we first create a SupportMapFragment.
    mMapFragment = SupportMapFragment.newInstance();

    // Then we add it using a FragmentTransaction.
    FragmentTransaction fragmentTransaction = getSupportFragmentManager()
            .beginTransaction();
    fragmentTransaction.add(android.R.id.content, mMapFragment, MAP_FRAGMENT_TAG);
    fragmentTransaction.commit();
}

The reason this is so because by default the map fragment will have it's own life cycle and not tied to the view life cycle. So if you define it in xml the map fragment is not destroyed but the view is destroyed. This causes an error when you try to inflate the fragment again since the map is already present! See this for more info: https://developers.google.com/maps/documentation/android/reference/com/google/android/gms/maps/MapFragment

Answered By - cracked_all