using differnet Fragements with the same layout inside a ViewPager

Question

in my app i have a ViewPager with pages where each of them show a list. when i started i directly added the ListFragement to the ViewPager. in order to change the layout of each page (for example adding a ViewText below each list) i later created a fragement with an own layout file that contains this listFragement, which i add to the ViewPager

this is how this layout (for each page looks)

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

<FrameLayout
    android:id="@+id/tab_fragment"
    android:layout_width="match_parent"
    android:layout_height="0sp"
    android:layout_weight="1" >
</FrameLayout>

<LinearLayout
    android:id="@+id/message_canvas"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/lightgreen"
    android:orientation="horizontal"
    android:paddingBottom="6sp"
    android:paddingTop="6sp"
    android:visibility="visible" >

    <TextView
        android:id="@+id/message"
        android:layout_width="0sp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:contentDescription="@string/emptyString"
        android:gravity="center_horizontal"
        android:text="@string/emptyString"
        android:textAlignment="center"
        android:textColor="@color/green"
        android:textStyle="bold" />
</LinearLayout>

this is the layout for the ViewPager

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

<LinearLayout
    android:id="@+id/main_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="horizontal" >
</LinearLayout>

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

this is how i add each of the ListFragement to its parent Fragement (with the same layout) (in this case the contact list)

public class FragmentTabContacts extends FragmentTab{

@Override
protected Fragment getFragment() {
    return new ListFragmentContactlist();
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    this.fragment = getFragment();
    View view = inflater.inflate(R.layout.tab_fragement, null);
    messageCanvas = (ViewGroup)view.findViewById(R.id.message_canvas);      
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.add(R.id.tab_fragment, this.fragment);
    fragmentTransaction.commit();       
    return view;
}
}

this is the adapter for the ViewPager

public class FragmentAdapter extends FragmentPagerAdapter {
    /**
     * list of {@link NinjaListFragment} used for all tabs
     */
    private List<ITabContainer> fragments;

    public FragmentAdapter(FragmentManager fm, List<ITabContainer> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public int getCount() {
        return this.fragments.size();
    }

    @Override
    public Fragment getItem(int position) {
        return (Fragment) fragments.get(position);
    }

    @Override
    public int getItemPosition(Object object) {
        return fragments.indexOf(object);
    }

}

and this is the method i wrote inside the ViewPager to set the new Fragements to it and also the corresponsing tabs

/**
 * adds the {@link ViewGroup} representing the tab to the {@value #mapTabs} for generating the tabs
 * @param inflater the {@link LayoutInflater} used to inflate the tab
 * @param tabs the {@link ViewGroup} containing the inflated tabs.
 * @param tabContainer the fragment with the interface {@link ITabContainer} used as content for the tab added to {@link #fragments}
 * @param imageId the id of the image to be shown on the tab
 * @param onClickListener the {@link View.OnClickListener} to receive the tab clicks
 */
private void addTab(LayoutInflater inflater, ViewGroup tabs, ITabContainer tabContainer, int imageId, View.OnClickListener onClickListener) {
    inflater.inflate(R.layout.main_tab, tabs);
    int index = tabs.getChildCount() - 1;
    ImageView ivTab = (ImageView) tabs.getChildAt(index);
    ivTab.setTag(String.valueOf(index));
    ivTab.setImageResource(imageId);
    ivTab.setOnClickListener(onClickListener);
    mapTabs.put(index, ivTab);
    fragments.add(tabContainer);
}

and this is how i call this method in the onCreate method of the ViewPager

       addTab(inflater, vgTabs, new FragmentTabContacts(), R.drawable.ic_tab_contacts, onClickListener);
    addTab(inflater, vgTabs, new FragmentTabHistory(), R.drawable.ic_tab_history, onClickListener);
    addTab(inflater, vgTabs, new ListFragmentGroups(), R.drawable.ic_tab_groups, onClickListener);
    addTab(inflater, vgTabs, new FragmentTabFavorits(), R.drawable.ic_tab_favorits, onClickListener);

because naturally all of the fragements with the same layout contain the same id (android:id="@+id/tab_fragment") for the Framelayout where i add the ListFragement, it seems that the ViewPager has a problem identifying each of them. i only completed the first 2 pages that way (the 4th tab contains another ViewPager and this works), but the result is that the first page shows now the content of the second one, while the second page is empty.

i want to have a seperate TextView for each page because i want to store different text inside each page, and i dont want to copy the same layout (just with different ids) 4 times (in case there is no other solution for it).and i dont want to put that TextView inside the main PageView layout and refresh the content after each tab switch.

what can i do to reuse the same layout for each ListFragement of each page?

Answer 1

meanwhile i found a simple workaround. i created 4 different layouts (with 4 different ids for the fragement) for all 4 pagesand include the same redundant parts in each of them

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

<fragment
    android:id="@+id/list_history"
    android:name="at.happyninja.addressbook.fragments.ListFragmentHistory"
    android:layout_width="match_parent"
    android:layout_height="0sp"
    android:layout_weight="1" />

<include layout="@layout/tab_message" />
<include layout="@layout/tab_keyboardview" />