Update a TextView in a ViewPager from another Fragment

Question

I am trying to update a TextView in a Fragment clicking on a button on another Fragment.

Actually I implemented the callback function to the Activity and it does work, since the Logcat reports that the text in the TextView has been changed. The problem is the Textview shown in the first fragment is not updated to the new value! It's like the Fragment needs to be updated or something...

Here's the ActionBarTabsPager activity code:

import java.util.ArrayList;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentManager.OnBackStackChangedListener;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.ActionBar.Tab;
import android.support.v4.app.SupportActivity;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.TextView;

/**
 * Demonstrates combining the action bar with a ViewPager to implement a tab UI
 * that switches between tabs and also allows the user to perform horizontal
 * flicks to move between the tabs.
 */
public class ActionBarTabsPager extends FragmentActivity implements SecondFragment.OnButtonClickedXListener{
    ViewPager  mViewPager;
    TabsAdapter mTabsAdapter;
    FragmentManager fm;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.actionbar_tabs_pager);



        if (savedInstanceState == null) {
             Fragment newFragment = new FirstFragment();
             FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
             ft.add(R.id.abs__custom, newFragment, "FirstFragment").commit();

             Fragment newFragment2 = new FirstFragment();
             FragmentTransaction ft2 = getSupportFragmentManager().beginTransaction();
             ft2.add(R.id.abs__custom, newFragment2, "SecondFragment").commit();
        }
        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        ActionBar.Tab tab1 = getSupportActionBar().newTab().setText("Fragment 1");
        ActionBar.Tab tab2 = getSupportActionBar().newTab().setText("Fragment 2");
        //ActionBar.Tab tab3 = getSupportActionBar().newTab().setText("Fragment 1");
        //ActionBar.Tab tab4 = getSupportActionBar().newTab().setText("Fragment 2");

        mViewPager = (ViewPager)findViewById(R.id.pager);
        mTabsAdapter = new TabsAdapter(this, getSupportActionBar(), mViewPager);

            mTabsAdapter.addTab(tab1, FirstFragment.class);
            mTabsAdapter.addTab(tab2, SecondFragment.class);//LoaderCursorSupport.CursorLoaderListFragment.class);
            //mTabsAdapter.addTab(tab3, FirstFragment.class);//LoaderCustomSupport.AppListFragment.class);
            //mTabsAdapter.addTab(tab4, SecondFragment.class);//LoaderThrottleSupport.ThrottledLoaderListFragment.class);


        if (savedInstanceState != null) {
            getSupportActionBar().setSelectedNavigationItem(savedInstanceState.getInt("index"));
        }



    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt("index", getSupportActionBar().getSelectedNavigationIndex());
    }

    /**
     * This is a helper class that implements the management of tabs and all
     * details of connecting a ViewPager with associated TabHost.  It relies on a
     * trick.  Normally a tab host has a simple API for supplying a View or
     * Intent that each tab will show.  This is not sufficient for switching
     * between pages.  So instead we make the content part of the tab host
     * 0dp high (it is not shown) and the TabsAdapter supplies its own dummy
     * view to show as the tab content.  It listens to changes in tabs, and takes
     * care of switch to the correct paged in the ViewPager whenever the selected
     * tab changes.
     */
    public class TabsAdapter extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener, ActionBar.TabListener {
        private final Context mContext;
        private final ActionBar mActionBar;
        private final ViewPager mViewPager;
        private final ArrayList<String> mTabs = new ArrayList<String>();

        public TabsAdapter(FragmentActivity activity, ActionBar actionBar, ViewPager pager) {
            super(activity.getSupportFragmentManager());
            mContext = activity;
            mActionBar = actionBar;
            mViewPager = pager;
            mViewPager.setAdapter(this);
            mViewPager.setOnPageChangeListener(this);
        }

        public void addTab(ActionBar.Tab tab, Class<?> clss) {
            mTabs.add(clss.getName());
            mActionBar.addTab(tab.setTabListener(this));
            notifyDataSetChanged();
        }

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

        @Override
        public Fragment getItem(int position) {
            return Fragment.instantiate(mContext, mTabs.get(position), null);
        }


        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            mActionBar.setSelectedNavigationItem(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }

        @Override
        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            mViewPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabReselected(Tab tab, FragmentTransaction ft) {
        }

        @Override
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        }
    }

    @Override
    public void OnButtonClickedX(View v) {

        if (v==findViewById(R.id.button1)){
            Log.i("TRIGGERED","TRIGGERED");

            FirstFragment ff = (FirstFragment) getSupportFragmentManager().findFragmentByTag("FirstFragment");

            View root = ff.getView();
            TextView tv = (TextView) root.findViewById(R.id.textView1);
            Log.i("Text before Edit",""+tv.getText());
            tv.setText("MODIFIED");
            Log.i("Text after Edit",""+tv.getText());




        }
        // TODO Auto-generated method stub

    }





}

FirstFragment:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstFragment extends Fragment {
    int mNum;


    /**
     * Create a new instance of FirstFragment, providing "num"
     * as an argument.
     */
    static FirstFragment newInstance(int num) {

        FirstFragment f = new FirstFragment();

        // Supply num input as an argument.
        Bundle args = new Bundle();
        args.putInt("num", num);
        f.setArguments(args);

        return f;
    }

    /**
     * When creating, retrieve this instance's number from its arguments.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mNum = getArguments() != null ? getArguments().getInt("num") : 1;
    }

    /**
     * The Fragment's UI is just a simple text view showing its
     * instance number.
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.myfrag1, container, false);
        return v;
    }




}

SecondFragment:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.SupportActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;

public  class SecondFragment extends Fragment {
    int mNum;
    OnButtonClickedXListener mListener;

    /**
     * Create a new instance of CountingFragment, providing "num"
     * as an argument.
     */
    static SecondFragment newInstance(int num) {
        SecondFragment f = new SecondFragment();

        // Supply num input as an argument.
        Bundle args = new Bundle();
        args.putInt("num", num);
        f.setArguments(args);

        return f;
    }

    /**
     * When creating, retrieve this instance's number from its arguments.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mNum = getArguments() != null ? getArguments().getInt("num") : 1;
    }

    /**
     * The Fragment's UI is just a simple text view showing its
     * instance number.
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.myfrag2, container, false);
        View button1 = v.findViewById(R.id.button1);
        button1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                mListener.OnButtonClickedX(v);
                // TODO Auto-generated method stub

            }
        });



        return v;
    }

    public interface OnButtonClickedXListener{
        public void OnButtonClickedX(View v);
    }

    @Override
    public void onAttach(SupportActivity activity) {
        // TODO Auto-generated method stub
        super.onAttach(activity);
        try {
            mListener = (OnButtonClickedXListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString() + " must implement OnButtonClickedXListener");
        }
    }

}

myfrag1.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:orientation="vertical" >



    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="No String"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

myfrag2.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >


    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="Button" />

</LinearLayout>

EDIT:

Even changing to 0 the ContainerViewId in ft.add() doesn't impact at all in final rendering. SO I guess the rendering is managed by

mTabsAdapter.addTab(tab1, FirstFragment.class);
mTabsAdapter.addTab(tab2, SecondFragment.class);

The issue is still the same, anyway.

Here's actionbar_tabs_pager.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Roque

Answer 1

SOLVED!

Overriding instantiateItem() in TabsAdapter and adding the ViewPager as ContainerViewID in the FragmentTransaction made it!

Here's the functioning whole FragmentActivity!

import java.util.ArrayList;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentManager.OnBackStackChangedListener;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.ActionBar.Tab;
import android.support.v4.app.SupportActivity;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.TextView;

/**
 * Demonstrates combining the action bar with a ViewPager to implement a tab UI
 * that switches between tabs and also allows the user to perform horizontal
 * flicks to move between the tabs.
 */
public class ActionBarTabsPager extends FragmentActivity implements SecondFragment.OnButtonClickedXListener{
    ViewPager  mViewPager;
    TabsAdapter mTabsAdapter;
    FragmentManager fm;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.i("ONCREATE START","ONCREATE START");


        setContentView(R.layout.actionbar_tabs_pager);


        if (savedInstanceState == null) {


            Fragment newFragment = new FirstFragment();
            Fragment newFragment2 = new SecondFragment();

            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.add(R.id.pager, newFragment, "FirstFragment");
            ft.add(R.id.pager, newFragment2, "SecondFragment");
            ft.commit();


       }

        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        ActionBar.Tab tab1 = getSupportActionBar().newTab().setText("Fragment 1");
        ActionBar.Tab tab2 = getSupportActionBar().newTab().setText("Fragment 2");
        //ActionBar.Tab tab3 = getSupportActionBar().newTab().setText("Fragment 1");
        //ActionBar.Tab tab4 = getSupportActionBar().newTab().setText("Fragment 2");

        mViewPager = (ViewPager)findViewById(R.id.pager);
        mTabsAdapter = new TabsAdapter(this, getSupportActionBar(), mViewPager);

            mTabsAdapter.addTab(tab1, FirstFragment.class);
            mTabsAdapter.addTab(tab2, SecondFragment.class);//LoaderCursorSupport.CursorLoaderListFragment.class);
            //mTabsAdapter.addTab(tab3, FirstFragment.class);//LoaderCustomSupport.AppListFragment.class);
            //mTabsAdapter.addTab(tab4, SecondFragment.class);//LoaderThrottleSupport.ThrottledLoaderListFragment.class);



        if (savedInstanceState != null) {
            getSupportActionBar().setSelectedNavigationItem(savedInstanceState.getInt("index"));
        }

        Log.i("ONCREATE END","ONCREATE END");

    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        Log.i("onSaveInstanceState START","onSaveInstanceState START");
        super.onSaveInstanceState(outState);
        outState.putInt("index", getSupportActionBar().getSelectedNavigationIndex());
        Log.i("onSaveInstanceState END","onSaveInstanceState END");

    }

    /**
     * This is a helper class that implements the management of tabs and all
     * details of connecting a ViewPager with associated TabHost.  It relies on a
     * trick.  Normally a tab host has a simple API for supplying a View or
     * Intent that each tab will show.  This is not sufficient for switching
     * between pages.  So instead we make the content part of the tab host
     * 0dp high (it is not shown) and the TabsAdapter supplies its own dummy
     * view to show as the tab content.  It listens to changes in tabs, and takes
     * care of switch to the correct paged in the ViewPager whenever the selected
     * tab changes.
     */
    public class TabsAdapter extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener, ActionBar.TabListener {
        private final Context mContext;
        private final ActionBar mActionBar;
        private final ViewPager mViewPager;
        private final ArrayList<String> mTabs = new ArrayList<String>();
        private FragmentTransaction mCurTransaction = null;


        public TabsAdapter(FragmentActivity activity, ActionBar actionBar, ViewPager pager) {
            super(activity.getSupportFragmentManager());
            mContext = activity;
            mActionBar = actionBar;
            mViewPager = pager;
            mViewPager.setAdapter(this);
            mViewPager.setOnPageChangeListener(this);


        }

        public void addTab(ActionBar.Tab tab, Class<?> clss) {
            Log.i("addTab","addTab");

            mTabs.add(clss.getName());
            mActionBar.addTab(tab.setTabListener(this));
            notifyDataSetChanged();
        }

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

        @Override
        public Object instantiateItem(View container, int position) {
            if (mCurTransaction == null) {
                mCurTransaction = getSupportFragmentManager().beginTransaction();
            }
            // TODO Auto-generated method stub
            Fragment fragment = getItem(position);

            if (fragment!=null){
                Log.i("Fragment Found!","Fragment Found! "+fragment.getTag());
                mCurTransaction.attach(fragment);
                }


            return fragment;//super.instantiateItem(container, position);
        }

        @Override
        public Fragment getItem(int position) {
            Log.i("getItem","getItem");

            if (position==0)
                {Log.i("position=0","position=0");
                return getSupportFragmentManager().findFragmentByTag("FirstFragment");}

            else if (position==1)
            {Log.i("position=1","position=1");
                return getSupportFragmentManager().findFragmentByTag("SecondFragment");}

            else return null;//Fragment.instantiate(mContext, mTabs.get(position), null);

        }


        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            mActionBar.setSelectedNavigationItem(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }

        @Override
        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            mViewPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabReselected(Tab tab, FragmentTransaction ft) {
        }

        @Override
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        }


    }

    @Override
    public void OnButtonClickedX(View v) {

        if (v==findViewById(R.id.button1)){
            Log.i("TRIGGERED","TRIGGERED");

            FirstFragment ff = (FirstFragment) getSupportFragmentManager().findFragmentByTag("FirstFragment");

            View root = ff.getView();
            TextView tv = (TextView) root.findViewById(R.id.textView1);
            Log.i("Text before Edit",""+tv.getText());
                  tv.setText("MODIFIED");
                  Log.i("Text after Edit",""+tv.getText());




        }
        // TODO Auto-generated method stub

    }





}

Thanks to vbsteven!

Roque

Answer 2

I assume the Fragments you are seeing on screen are not the Fragments you manually add with the tags "FirstFragment" and "SecondFragment" but instead the fragments that are added by the getItem method of your TabsAdapter.

If you look at its implementation, it instantiates new Fragments.

    @Override
    public Fragment getItem(int position) {
        return Fragment.instantiate(mContext, mTabs.get(position), null);
    }

These newly created Fragments are added to the FragmentManager with custom tags generated in FragmentPagerAdapter (which TabsAdapter extends)

Delanadelancey

I commented out the FragmentTransaction, and in fact the UI is correctly created. SO probably the getItem() is called when mTabsAdapter.addTab(tab1, FirstFragment.class); mTabsAdapter.addTab(tab2, SecondFragment.class); is called. So how can I get back the instance of FirstFragment and SecondFragment without having them re-creating an instance? – Roque

You'll have to override the instantiateItem/getItem methods so they use your fragments instead of creating new ones. You are probably better of by creating a new subclass of PagerAdapter (look at the source of FragmentPagerAdapter for reference) that takes into account existing fragments. – Delanadelancey

Answer 3

My guess is that this is case of "overlapping" fragments - not uncommon to those trying out Fragments for the first time. Everytime you re-display a Fragment (display a Fragment, show another, then go back to the first fragment you displayed), you're creating a new Fragment behind the visible fragment. The "mirror fragment" remains on top, blocking your view to the fragment behind it. Only by scrolling that fragment will you see that the fragment behind really does get updated.

Most of the time it's just a case of you repeating what you did in XML in your FragmentActivity. Post your layout xml's so the fragment pros can diagnose your problem better.

Ovovitellin

I don't think is a Layout issue since the fragments are not declared in xml, they're all added from source.. probably there's something in TabsAdapter, but I can't figure this out.. – Roque

Answer 4

Please post actionbar_tabs_pager.xml as well.

Don't know if it solves your issues but in this part of your code you add FirstFragment() for both fragments...

Fragment newFragment = new FirstFragment();
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.add(R.id.abs__custom, newFragment, "FirstFragment").commit();

Fragment newFragment2 = new FirstFragment();
FragmentTransaction ft2 = getSupportFragmentManager().beginTransaction();
ft2.add(R.id.abs__custom, newFragment2, "SecondFragment").commit();

...and you could write it more simple like that:

FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.add(R.id.abs__custom, newFragment, "FirstFragment");
ft.add(R.id.abs__custom, newFragment2, "SecondFragment");
ft.commit();

Applesauce

It doesn't solve the problem, however thanks for pointing this out. it turned out that even assigning "0" to the ft.add() function for the layout, as in 'ft.add(0, newFragment, "FirstFragment");' doesn't impact on the rendering. I guess 'mTabsAdapter.addTab(tab1, FirstFragment.class);' is what renders the layout, not the transaction. – Roque

And where in the xml have you defined "R.id.abs__custom"? – Applesauce

R.id.abs__custom.xml is not relevant, please take a look at the edit! – Roque