SupportMapFragment issue in nested TabHost Fragment

Question

I have 1 FragmentActivity 1 main fragment and 2 tabshosted child fragment one is for listview another for map. I have 2 problems here. Fir

Answer 1

I've got exactly the same setup (a map and a list) and I can tell you it was very painful using the old tabbed navigation mode system which I believe you are. The tabbed nav mode for the action bar has been deprecated. You should use a FragmentPagerAdapter and a SlidingTabLayout from the current Android samples. Here is a reference YT video on the subject. For this example lets call the list / map objects 'Places'.

PlacesCollectionTabsFragment.java - instantiates the two fragments in a ViewPager.

public class PlacesCollectionTabsFragment extends Fragment {

static final String LOG_TAG = "PlacesCollectionTabsFragment";
private SlidingTabLayout mSlidingTabLayout;
private ViewPager mViewPager;

public enum TabTypes {
    LIST(0), MAP(1);
    private int mIndex;
    private TabTypes(int index) {
        mIndex = index;
    }
    public int getIndex() {
        return mIndex;
    }
}

public static PlacesCollectionTabsFragment instantiateWithSelectedTab(Context context, TabTypes tabType) {
    return instantiateWithSelectedTab(context, tabType, null);
}

public static PlacesCollectionTabsFragment instantiateWithSelectedTab(Context context, TabTypes tabType, Bundle args) {
    if(tabType != null) {
        if(args == null)
            args = new Bundle();

        args.putInt(Constants.Args.PLACES_SELECTED_TAB, tabType.getIndex());
    }

    return (PlacesCollectionTabsFragment) PlacesCollectionTabsFragment.instantiate(context, PlacesCollectionTabsFragment.class.getName(), args);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    MainActivity activity = (MainActivity)getActivity();
    activity.getDrawerToggle().setDrawerIndicatorEnabled(true);
    return inflater.inflate(R.layout.fragment_tab_pager, container, false);
}

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
    mViewPager.setAdapter(new PlacesDisplayTypePagerAdapter(getChildFragmentManager()));

    mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
    mSlidingTabLayout.setViewPager(mViewPager);
    mSlidingTabLayout.setHostingFragment(this);
    mSlidingTabLayout.setSelectedIndicatorColors(getActivity().getResources().getColor(R.color.pink));

    if(getArguments() != null)
    {
        int currentTab = getArguments().getInt(Constants.Args.PLACE_SELECTED_TAB);
        mViewPager.setCurrentItem(currentTab);
    }
}

class PlacesDisplayTypePagerAdapter extends FragmentPagerAdapter {

    public PlacesDisplayTypePagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public int getCount() {
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "List";
            case 1:
                return "Map";
            default:
                return "List";
        }
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 0) {
            return new PlacesListFragment();
        } else
            return PlacesMapFragment.newInstance(getArguments());
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
        Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
    }

}

public void onPageSelected(int position) {
    MainActivity a = (MainActivity)getActivity();
    switch (position){
        case 0:
            a.setTitle("List of places");
            break;
        case 1:
            a.setTitle("Places on map");
            break;
    }
}
}

fragment_tab_pager.xml

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

    <com.myapp.views.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"/>
</LinearLayout>

SlidingTabLayout.java - the next two classes are virtually identical to the official sample code.

public class SlidingTabLayout extends HorizontalScrollView {

private PlacesCollectionTabsFragment mHostFragment;
public void setHostingFragment(PlacesCollectionTabsFragment placesCollectionTabsFragment) {
    mHostFragment = placesCollectionTabsFragment;
}

/**
 * Allows complete control over the colors drawn in the tab layout. Set with
 * {@link #setCustomTabColorizer(TabColorizer)}.
 */
public interface TabColorizer {

    /**
     * @return return the color of the indicator used when {@code position} is selected.
     */
    int getIndicatorColor(int position);

    /**
     * @return return the color of the divider drawn to the right of {@code position}.
     */
    int getDividerColor(int position);

}

private static final int TITLE_OFFSET_DIPS = 24;
private static final int TAB_VIEW_PADDING_DIPS = 16;
private static final int TAB_VIEW_TEXT_SIZE_SP = 12;

private int mTitleOffset;

private int mTabViewLayoutId;
private int mTabViewTextViewId;

private ViewPager mViewPager;
private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;

private final SlidingTabStrip mTabStrip;

public SlidingTabLayout(Context context) {
    this(context, null);
}

public SlidingTabLayout(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    // Disable the Scroll Bar
    setHorizontalScrollBarEnabled(false);
    // Make sure that the Tab Strips fills this View
    setFillViewport(true);

    mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

    mTabStrip = new SlidingTabStrip(context);
    addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
}

/**
 * Set the custom {@link TabColorizer} to be used.
 *
 * If you only require simple custmisation then you can use
 * {@link #setSelectedIndicatorColors(int...)} and {@link #setDividerColors(int...)} to achieve
 * similar effects.
 */
public void setCustomTabColorizer(TabColorizer tabColorizer) {
    mTabStrip.setCustomTabColorizer(tabColorizer);
}

/**
 * Sets the colors to be used for indicating the selected tab. These colors are treated as a
 * circular array. Providing one color will mean that all tabs are indicated with the same color.
 */
public void setSelectedIndicatorColors(int... colors) {
    mTabStrip.setSelectedIndicatorColors(colors);
}

/**
 * Sets the colors to be used for tab dividers. These colors are treated as a circular array.
 * Providing one color will mean that all tabs are indicated with the same color.
 */
public void setDividerColors(int... colors) {
    mTabStrip.setDividerColors(colors);
}

/**
 * Set the {@link android.support.v4.view.ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are
 * required to set any {@link android.support.v4.view.ViewPager.OnPageChangeListener} through this method. This is so
 * that the layout can update it's scroll position correctly.
 *
 * @see android.support.v4.view.ViewPager#setOnPageChangeListener(android.support.v4.view.ViewPager.OnPageChangeListener)
 */
public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
    mViewPagerPageChangeListener = listener;
}

/**
 * Set the custom layout to be inflated for the tab views.
 *
 * @param layoutResId Layout id to be inflated
 * @param textViewId id of the {@link android.widget.TextView} in the inflated view
 */
public void setCustomTabView(int layoutResId, int textViewId) {
    mTabViewLayoutId = layoutResId;
    mTabViewTextViewId = textViewId;
}

/**
 * Sets the associated view pager. Note that the assumption here is that the pager content
 * (number of tabs and tab titles) does not change after this call has been made.
 */
public void setViewPager(ViewPager viewPager) {
    mTabStrip.removeAllViews();

    mViewPager = viewPager;
    if (viewPager != null) {
        viewPager.setOnPageChangeListener(new InternalViewPagerListener());
        populateTabStrip();
    }
}

/**
 * Create a default view to be used for tabs. This is called if a custom tab view is not set via
 * {@link #setCustomTabView(int, int)}.
 */
protected TextView createDefaultTabView(Context context) {
    TextView textView = new TextView(context);
    textView.setGravity(Gravity.CENTER);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
    textView.setTypeface(Typeface.DEFAULT_BOLD);

    //Set tabs to take up entire screen width
    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();
    Point size = new Point();
    if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB_MR2) {
        display.getSize(size);
    }
    else
    {
        size.set(display.getWidth(), display.getHeight());
    }
    textView.setWidth(size.x / 2);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        // If we're running on Honeycomb or newer, then we can use the Theme's
        // selectableItemBackground to ensure that the View has a pressed state
        TypedValue outValue = new TypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                outValue, true);
        textView.setBackgroundResource(outValue.resourceId);
    }

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
        // If we're running on ICS or newer, enable all-caps to match the Action Bar tab style
        textView.setAllCaps(true);
    }

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    textView.setPadding(padding, padding, padding, padding);

    return textView;
}

private void populateTabStrip() {
    final PagerAdapter adapter = mViewPager.getAdapter();
    final View.OnClickListener tabClickListener = new TabClickListener();

    for (int i = 0; i < adapter.getCount(); i++) {
        View tabView = null;
        TextView tabTitleView = null;

        if (mTabViewLayoutId != 0) {
            // If there is a custom tab view layout id set, try and inflate it
            tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                    false);
            tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
        }

        if (tabView == null) {
            tabView = createDefaultTabView(getContext());
        }

        if (tabTitleView == null && TextView.class.isInstance(tabView)) {
            tabTitleView = (TextView) tabView;
        }

        tabTitleView.setText(adapter.getPageTitle(i));
        tabView.setOnClickListener(tabClickListener);

        mTabStrip.addView(tabView);
    }
}

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();

    if (mViewPager != null) {
        scrollToTab(mViewPager.getCurrentItem(), 0);
    }
}

private void scrollToTab(int tabIndex, int positionOffset) {
    final int tabStripChildCount = mTabStrip.getChildCount();
    if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
        return;
    }

    View selectedChild = mTabStrip.getChildAt(tabIndex);
    if (selectedChild != null) {
        int targetScrollX = selectedChild.getLeft() + positionOffset;

        if (tabIndex > 0 || positionOffset > 0) {
            // If we're not at the first child and are mid-scroll, make sure we obey the offset
            targetScrollX -= mTitleOffset;
        }

        scrollTo(targetScrollX, 0);
    }
}

private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
    private int mScrollState;

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        int tabStripChildCount = mTabStrip.getChildCount();
        if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
            return;
        }

        mTabStrip.onViewPagerPageChanged(position, positionOffset);

        View selectedTitle = mTabStrip.getChildAt(position);
        int extraOffset = (selectedTitle != null)
                ? (int) (positionOffset * selectedTitle.getWidth())
                : 0;
        scrollToTab(position, extraOffset);

        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
                    positionOffsetPixels);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        mScrollState = state;

        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mTabStrip.onViewPagerPageChanged(position, 0f);
            scrollToTab(position, 0);
        }

        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageSelected(position);
        }

        mHostFragment.onPageSelected(position);
    }

}

private class TabClickListener implements View.OnClickListener {
    @Override
    public void onClick(View v) {
        for (int i = 0; i < mTabStrip.getChildCount(); i++) {
            if (v == mTabStrip.getChildAt(i)) {
                mViewPager.setCurrentItem(i);
                return;
            }
        }
    }
}

}

SlidingTabStrip.java

class SlidingTabStrip extends LinearLayout {

private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 2;
private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 8;
private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;

private static final int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;
private static final byte DEFAULT_DIVIDER_COLOR_ALPHA = 0x20;
private static final float DEFAULT_DIVIDER_HEIGHT = 0.5f;

private final int mBottomBorderThickness;
private final Paint mBottomBorderPaint;

private final int mSelectedIndicatorThickness;
private final Paint mSelectedIndicatorPaint;

private final int mDefaultBottomBorderColor;

private final Paint mDividerPaint;
private final float mDividerHeight;

private int mSelectedPosition;
private float mSelectionOffset;

private SlidingTabLayout.TabColorizer mCustomTabColorizer;
private final SimpleTabColorizer mDefaultTabColorizer;

SlidingTabStrip(Context context) {
    this(context, null);
}

SlidingTabStrip(Context context, AttributeSet attrs) {
    super(context, attrs);
    setWillNotDraw(false);

    final float density = getResources().getDisplayMetrics().density;

    TypedValue outValue = new TypedValue();
    context.getTheme().resolveAttribute(android.R.attr.colorForeground, outValue, true);
    final int themeForegroundColor =  outValue.data;

    mDefaultBottomBorderColor = setColorAlpha(themeForegroundColor,
            DEFAULT_BOTTOM_BORDER_COLOR_ALPHA);

    mDefaultTabColorizer = new SimpleTabColorizer();
    mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR);
    mDefaultTabColorizer.setDividerColors(setColorAlpha(themeForegroundColor,
            DEFAULT_DIVIDER_COLOR_ALPHA));

    mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
    mBottomBorderPaint = new Paint();
    mBottomBorderPaint.setColor(mDefaultBottomBorderColor);

    mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);
    mSelectedIndicatorPaint = new Paint();

    mDividerHeight = DEFAULT_DIVIDER_HEIGHT;
    mDividerPaint = new Paint();
    mDividerPaint.setStrokeWidth((int) (DEFAULT_DIVIDER_THICKNESS_DIPS * density));
}

void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) {
    mCustomTabColorizer = customTabColorizer;
    invalidate();
}

void setSelectedIndicatorColors(int... colors) {
    // Make sure that the custom colorizer is removed
    mCustomTabColorizer = null;
    mDefaultTabColorizer.setIndicatorColors(colors);
    invalidate();
}

void setDividerColors(int... colors) {
    // Make sure that the custom colorizer is removed
    mCustomTabColorizer = null;
    mDefaultTabColorizer.setDividerColors(colors);
    invalidate();
}

void onViewPagerPageChanged(int position, float positionOffset) {
    mSelectedPosition = position;
    mSelectionOffset = positionOffset;
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    final int height = getHeight();
    final int childCount = getChildCount();
    final int dividerHeightPx = (int) (Math.min(Math.max(0f, mDividerHeight), 1f) * height);
    final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null
            ? mCustomTabColorizer
            : mDefaultTabColorizer;

    // Thick colored underline below the current selection
    if (childCount > 0) {
        View selectedTitle = getChildAt(mSelectedPosition);
        int left = selectedTitle.getLeft();
        int right = selectedTitle.getRight();
        int color = tabColorizer.getIndicatorColor(mSelectedPosition);

        if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {
            int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
            if (color != nextColor) {
                color = blendColors(nextColor, color, mSelectionOffset);
            }

            // Draw the selection partway between the tabs
            View nextTitle = getChildAt(mSelectedPosition + 1);
            left = (int) (mSelectionOffset * nextTitle.getLeft() +
                    (1.0f - mSelectionOffset) * left);
            right = (int) (mSelectionOffset * nextTitle.getRight() +
                    (1.0f - mSelectionOffset) * right);
        }

        mSelectedIndicatorPaint.setColor(color);

        canvas.drawRect(left, height - mSelectedIndicatorThickness, right,
                height, mSelectedIndicatorPaint);
    }

    // Thin underline along the entire bottom edge
    canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);

    // Vertical separators between the titles
    int separatorTop = (height - dividerHeightPx) / 2;
    for (int i = 0; i < childCount - 1; i++) {
        View child = getChildAt(i);
        mDividerPaint.setColor(tabColorizer.getDividerColor(i));
        canvas.drawLine(child.getRight(), separatorTop, child.getRight(),
                separatorTop + dividerHeightPx, mDividerPaint);
    }
}

/**
 * Set the alpha value of the {@code color} to be the given {@code alpha} value.
 */
private static int setColorAlpha(int color, byte alpha) {
    return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
}

/**
 * Blend {@code color1} and {@code color2} using the given ratio.
 *
 * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend,
 *              0.0 will return {@code color2}.
 */
private static int blendColors(int color1, int color2, float ratio) {
    final float inverseRation = 1f - ratio;
    float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
    float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
    float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
    return Color.rgb((int) r, (int) g, (int) b);
}

private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer {
    private int[] mIndicatorColors;
    private int[] mDividerColors;

    @Override
    public final int getIndicatorColor(int position) {
        return mIndicatorColors[position % mIndicatorColors.length];
    }

    @Override
    public final int getDividerColor(int position) {
        return mDividerColors[position % mDividerColors.length];
    }

    void setIndicatorColors(int... colors) {
        mIndicatorColors = colors;
    }

    void setDividerColors(int... colors) {
        mDividerColors = colors;
    }
}
}

Now for our actual tabbed content, I won't go into the list fragment, what you've got in your question looks okay for starters, just know my list here is called the PlacesListFragment.java. As for the PlacesMapFragment, it's too big for Stack Overflow so here is a link, eventually I'll put this online somewhere :) Importantly PlacesMapFragment extends a regular old Fragment, the SupportMapFragment is created programmatically, there has been several well documented bugs in the past when doing it via xml.

fragment_places_map.xml, a place to put custom map controls etc.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">

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

Finally from your activity all you need to do is instantiate the PlacesCollectionTabsFragment, something like this:

Fragment fragment = PlacesCollectionTabsFragment.instantiateWithSelectedTab(mContext, PlacesCollectionTabsFragment.TabTypes.LIST);
fragmentManager.beginTransaction().replace(R.id.fragmentContainer, fragment, fragment.getClass().getSimpleName()).setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE).commit();