Can't wrap my head around Android Fragments

Question

I'm struggling to wrap my head around Fragments and Activities.

I'm writing an app which uses an ActionBar to navigate through "Featured Audio Items" List, and a List of "Programmes" which contain their own list of "Audio Items". I'm using ActionBarSherlock and the compatibility packages.

When you click on an ActionBar tab, it should display that activity/fragment. When you click on something in a list, it should open a new fragment/activity which displays that programme/audio item.

I have looked at various Demos/Samples and understand there are a few ways to do this.

My questions:

• What's the structure of the programme?
  • e.g. An activity for every fragment? One activity with many fragments?
• How do you navigate the fragments?
  • e.g. Intents?
• How do I have a persistent ActionBar across all activities?

Thanks for any help you can give

EDIT - Answering my own question:

So I've gone for this approach:

• Main Activity which initializes ActionBar, handles main Fragment Navigation.
• Each main Fragment has an onClickListener
• The onClickListener replaces the currently showing Fragment with a new one, initialized to show the right item

This is based off the ActionbarSherlock FragmentLayoutSupport demo I mention in the comments.

Main List Fragment snippet:

//public class ProgrammesFragment extends SherlockListFragment

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
    showDetails(id);
}

/**
 * Helper function to show the details of a selected item, either by
 * displaying a fragment in-place in the current UI, or starting a
 * whole new activity in which it is displayed.
 */
void showDetails(long index) {
    // Check what fragment is currently shown, replace if needed.
    ProgrammeFragment details = (ProgrammeFragment) getFragmentManager().findFragmentByTag(ProgrammeFragment.TAG);
    if (details == null || details.getShownIndex() != index) {
        // Make new fragment to show this selection.
        details = ProgrammeFragment.newInstance(index);

        // Execute a transaction, replacing any existing fragment
        // with this one inside the frame.
        FragmentTransaction ft = getFragmentManager().beginTransaction();
        ft.remove(getFragmentManager().findFragmentByTag(ProgrammesFragment.TAG));
        ft.add(android.R.id.content, details, ProgrammeFragment.TAG);
        ft.addToBackStack(null);
        ft.commit();
    }
}

Details Fragment snippet:

//public class ProgrammeFragment extends SherlockListFragment

/**
 * Create a new instance of ProgrammeFragment, initialized to
 * show the text at 'index'.
 */
public static ProgrammeFragment newInstance(long index) {
    ProgrammeFragment f = new ProgrammeFragment();

    // Supply index input as an argument.
    Bundle args = new Bundle();
    args.putLong("programme_id", index);
    f.setArguments(args);

    return f;
}

public long getShownIndex() {
    return getArguments().getLong("programme_id", 0);
}

The details fragment is using a LoaderManager on top of a SQL ContentResolver, and calls getShownIndex to build the conditions for the select query.

This works (for now), not sure about the memory usage or any of that kind of thing. But we'll see!

Seems SO is good for getting thoughts clearer in your mind so you can answer your own questions :P

Answer 1

In the onCreate of your main activity, you create and add all the tabs (one tab = 1 SherlockFragment class). In your main activity, you have to have an inner class that is a TabAdapter. In my example below, the TabAdapter is also a ViewPager, so you can swipe anywhere on the screen, left-right to switch between the tabs. Here's the main class:

import java.util.ArrayList;
import library.DatabaseHandler;
import library.UserFunctions;

import org.json.JSONObject;
import com.actionbarsherlock.R;
import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockFragment;
import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;

import android.app.AlertDialog;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.util.Log;
import android.view.View.OnClickListener;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.Toast;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

public class Polling extends SherlockFragmentActivity {
    private ViewPager mViewPager;
    private TabsAdapter mTabsAdapter;
    ActionBar bar;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mViewPager = new ViewPager(this);
        mViewPager.setId(R.id.pager);
        setContentView(mViewPager);
        bar = getSupportActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        bar.setDisplayShowTitleEnabled(false);
        bar.setDisplayShowHomeEnabled(false);

        mTabsAdapter = new TabsAdapter(this, mViewPager);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.login),
                LoginFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.economics),
                EconFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.elections),
                ElectionsFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.politics),
                PoliticsFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.science),
                ScienceFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.finance),
                FinanceFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.religion),
                ReligionFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.military),
                MilitaryFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.international),
                InternationalFragment.class, null); 
    }


    public static class TabsAdapter extends FragmentPagerAdapter
    implements ActionBar.TabListener, ViewPager.OnPageChangeListener {
        private final Context mContext;
        private final ActionBar mActionBar;
        private final ViewPager mViewPager;
        private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();

        static final class TabInfo {
            private final Class<?> clss;
            private final Bundle args;

            TabInfo(Class<?> _class, Bundle _args) {
                clss = _class;
                args = _args;
            }
        }

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

        public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args) {
            TabInfo info = new TabInfo(clss, args);
            tab.setTag(info);
            tab.setTabListener(this);
            mTabs.add(info);
            mActionBar.addTab(tab);
            notifyDataSetChanged();
        }

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

        public SherlockFragment getItem(int position) {
            TabInfo info = mTabs.get(position);
            return (SherlockFragment)Fragment.instantiate(mContext, info.clss.getName(), info.args);
        }

        public void onPageSelected(int position) {
            mActionBar.setSelectedNavigationItem(position);
        }
        public void onPageScrollStateChanged(int state) {}
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            mViewPager.setCurrentItem(tab.getPosition());
            //Log.v(TAG, "clicked");
            Object tag = tab.getTag();
            for (int i=0; i<mTabs.size(); i++) {
                if (mTabs.get(i) == tag) {
                    mViewPager.setCurrentItem(i);
                }
            }
        }
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {}
        public void onTabReselected(Tab tab, FragmentTransaction ft) {}
        public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {}
        public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {}
    }
}

Here's a fragment without any major UI (just an xml file with one TextView in it):

import com.actionbarsherlock.R;
import com.actionbarsherlock.app.SherlockFragment;

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

public class FinanceFragment extends SherlockFragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.financefragment, container, false);
    }
}

Another fragment with a temporary UI in onResume/onCreateView:

import com.actionbarsherlock.R;
import com.actionbarsherlock.app.SherlockFragment;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

public class EconFragment extends SherlockFragment {

    private TableLayout questionContainer;
    int pos = 0;
    private String[] titles = {"The first title ", "hallo1","hallo2", "hallo3",
            "hallo4", "hallo5","hallo6", "hallo7","hallo8", "hallo9"};

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Log.v("Econ", "onCreateView");
        View v = inflater.inflate(R.layout.econfragment, container, false);
        questionContainer = (TableLayout) v.findViewById(R.id.questionContainer);
        //bs
        int leftMargin=5;
        int topMargin=5;
        int rightMargin=5;
        int bottomMargin=5;
        while (pos < 10) {
        View question = inflater.inflate(R.layout.question, null);
        question.setId(pos);
        TextView title = (TextView) question.findViewById(R.id.questionTextView);
        title.setText(titles[pos]);
        Button charts = (Button) question.findViewById(R.id.chartsButton);
        charts.setId(pos);
        charts.setOnClickListener(chartsListener);
        TableRow tr = (TableRow) question;
        TableLayout.LayoutParams trParams = new TableLayout.LayoutParams(
                TableLayout.LayoutParams.MATCH_PARENT,
                TableLayout.LayoutParams.WRAP_CONTENT);
        trParams.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
        tr.setLayoutParams(trParams);
        Log.v("econ", "while loop");
        questionContainer.addView(tr);
        pos++;
        }
        pos = 0;
        return v;
    }

    public void onResume() {
        super.onResume();
        Log.v("Econ", "onResume");
    }

    public OnClickListener chartsListener = new OnClickListener() {

        @Override
        public void onClick(View v) {
            Intent chart = new Intent();
            chart.setClass(getActivity(), Chart.class);
            chart.putExtra("key", titles[v.getId()]);
            Log.v("TAG", Integer.toString(v.getId()));
            startActivity(chart);

        }

    };

    public void onAttach(Activity activity) {
        super.onAttach(activity);
        Log.d("Econ", "onAttach");
    }

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("Econ", "onCreate");
        //Log.v("ECON", savedInstanceState.toString());

    }

    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Log.d("Econ", "onActivityCreated");
    }

    public void onStart() {
        super.onStart();
        Log.d("Econ", "OnStart");
    }

    public void onPause() {
        super.onPause();    
        Log.d("Econ", "onpause");
    }

    public void onStop() {
        super.onStop();
        Log.d("Econ", "onstop");
    }

    public void onDestroyView() {
        super.onDestroyView();
        Log.d("Econ", "ondestroyview");
    }

    public void onDestroy() {
        super.onDestroy();
        Log.d("Econ", "ondestroy");

    }

    public void onDetach() {
        super.onDetach();
        Log.d("Econ", "ondetach");
    }
}

EDIT~I haven't documented my code yet - some of it is just from examples I found online anyways. If there's any snags or things you don't understand, just ask.