Scrollable tabs with multiple Activities

Question

I am trying to create an app that has scrollable tabs for navigation. After trying all weekend to implement this feature, I've basically exhausted all my options. What I am trying to do is described in this picture: .

I have tried:

• Tab class that implements FragmentPagerAdapter within main activity
• Separate Fragments
• Intents
• ViewPager

The farthest I was able to get was with separate fragments and a TabsAdapter class that implements FragmentPagerAdapter within the main activity as well as ViewPager. However I was unable to figure out a way to attach the corresponding activity to the fragment in order to update the UI (calculator-type app) with the elements I needed to output.

How should I implement such a solution? It would be greatly appreciated for someone to point me in the right direction.

Answer 1

You will want to use fragments, and a ViewPager, with a single Activity. I have a demo of how to do this simply here : https://github.com/lt-tibs1984/InterfaceDemo

you can download the zip file and import it into your IDE.

The basic idea is that an Activity with tabbed navigation holds 3 fragments. you can swipe through the tabs, or use the tab itself for navigation.

This also illustrates communication between the fragments and activity via an interface.

Update

So i thought I would explain a little more about this project and what its actually doing.

private final static String [] m_fragmentClasses = {"com.divshark.interfacedemo.fragments.Fragment1","com.divshark.interfacedemo.fragments.Fragment2","com.divshark.interfacedemo.fragments.Fragment3"};
private final static String [] m_fragmentTitles = {"Fragment 1","Fragment 2", "Fragment 3"};

 private class MyViewPagerAdapter extends FragmentPagerAdapter{

    /**
     * @param fm the Activity's Fragment Manager
     */
    public MyViewPagerAdapter(FragmentManager fm) {
        // Call to the Super Class
        super(fm);
    }

    /* (non-Javadoc)
     * @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
     */
    @Override
    public Fragment getItem(int position) {
        // Fragment currentFragment to return
        Fragment currentFragment = null;

        // Loop through the Fragment Classes and Instantiate the Fragment at the current Position
        if((m_fragmentClasses != null) && (m_fragmentClasses.length > 0) && (position >= 0) && (position < m_fragmentClasses.length))
        {
            // Instantiate the current Fragment
            currentFragment = Fragment.instantiate(getBaseContext(), m_fragmentClasses[position]);
            currentFragment.setRetainInstance(true);
        }

        // Return the CurrentFragment
        return currentFragment;
    }

    /* (non-Javadoc)
     * @see android.support.v4.view.PagerAdapter#getCount()
     */
    @Override
    public int getCount() {
        // Return the Length of the Fragment Classes Array
        return m_fragmentClasses.length;
    }

}

This snippet of code is the most important part of this project for getting swipeable tabs. As you can see with the getItem() method override each fragment is being statically instantiated.

So when this adapter is instantiated in the Activity, all of the fragments are delegated through to the Adapter instead of the activity.

By default the base class FragmentPagerAdapter loads 3 fragments into memory: The current Fragment, 1 in front of it, and 1 behind it. By Calling setRetainInstance(true) on each fragment, we are telling the fragment to retain its state. This is only ideal for a small number of fragments, where as FragmentStatePagerAdapter should be used for a larger number of fragments since it will destroy fragments when they are no being used loading less data into memory.

Hope this helps you understand the code a little bit better. If you have any more questions feel free to ask.

Update 2

your onCreateView() method should only return the inflated layout like so:

/*
 * (non-Javadoc)
 * 
 * @see
 * android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater,
 * android.view.ViewGroup, android.os.Bundle)
 */
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    // Inflate the layout from the XML Resource
    return inflater.inflate(R.layout.fragment_layout_1, container, false);
}

then create all UI elements as Member variables of your class that extends Fragment and get a reference to them like so

option 1:

inside your onViewCreated() method which is called immediately after onCreateView()

option 2:

inside your onActivityCreated()

in my example i do it in onViewCreated() and get a reference to them like so

/* (non-Javadoc)
 * @see android.support.v4.app.Fragment#onViewCreated(android.view.View, android.os.Bundle)
 */
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onViewCreated(view, savedInstanceState);

    m_textFragment1 = (TextView) getView().findViewById(R.id.textViewFragment1);
    m_btnFragment1 = (Button) getView().findViewById(R.id.btnFragment1);
    m_btnFragment1.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // Communicate with The Parent Activity
            m_callBack.SendMessageToParent(FRAGMENT_TAG);

        }

    });
}