Dynamic UI with sliding menu and actionbarsherlock

Question

Trying to achieve a dynamic UI with facebook like sliding menu and actionbarsherlock .First i have look into android documentation which introduce fragment to handle dynamic button. But with no luck and a week time , i still can't get it to work anyhow , i guess is my misunderstand on android concept.The slidingbar and actionbarsherlock work without any problem.

I have a HomeScreen.java which contain all my menu and presetation stage and so far i have created a pagerAdapter1.java that extends FragmentPagerAdapter , and three example fragment class that handle my work which is task1.java,task2.java ,task3.java simple enough

here is part of my code HomeScreen.java

import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuItem;
import com.slidingmenu.lib.SlidingMenu;
import com.slidingmenu.lib.app.SlidingFragmentActivity;
public class HomeScreen extends SlidingFragmentActivity {
    public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_home_screen);
            setBehindContentView(R.layout.menu_frame);
    }

PagerAdapter1.java

public class PagerAdapter1 extends FragmentPagerAdapter  {

    private List<Fragment> fragments;
    public PagerAdapter1(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

}

and three task1.java,2,3

    import android.support.v4.app.Fragment;
    public class Tab1Fragment extends Fragment{

onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            if (container == null) {
                return null;
            }
            return (LinearLayout)inflater.inflate(R.layout.tab_frag1_layout, container, false);
        }

I think its better to explain my problem with picture

A homescreen which is a presetation stage , whenever user click on menu , this page will change to the page he want

and this is my menu

My problem is how do i include this 3 fragment into my homescreen ? i have tried so many tutorial but it doesn't work in my situation.Most tutorial are creating fragment with code, i just want to include my 3 task into it

Answer 1

I´ll try to explain this sample code and you use for your need.

This is the ListFragment of your BehindContent (SlidingMenu):

public class ColorMenuFragment extends ListFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.list, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        String[] colors = getResources().getStringArray(R.array.color_names);
        ArrayAdapter<String> colorAdapter = new ArrayAdapter<String>(getActivity(), 
                android.R.layout.simple_list_item_1, android.R.id.text1, colors);
        setListAdapter(colorAdapter);
//This array is only to fill SlidingMenu with a Simple String Color.
//I used MergeAdapter from Commonsware to create a very nice SlidingMenu.
    }

    @Override
    public void onListItemClick(ListView lv, View v, int position, long id) {
//This switch case is a listener to select wish item user have been selected,  so it Call
//ColorFragment, you can change to Task1Fragment, Task2Fragment, Task3Fragment.
        Fragment newContent = null;
        switch (position) {
        case 0:
            newContent = new ColorFragment(R.color.red);
            break;
        case 1:
            newContent = new ColorFragment(R.color.green);
            break;
        case 2:
            newContent = new ColorFragment(R.color.blue);
            break;
        case 3:
            newContent = new ColorFragment(android.R.color.white);
            break;
        case 4:
            newContent = new ColorFragment(android.R.color.black);
            break;
        }
        if (newContent != null)
            switchFragment(newContent);
    }

    // the meat of switching the above fragment
    private void switchFragment(Fragment fragment) {
        if (getActivity() == null)
            return;

        if (getActivity() instanceof FragmentChangeActivity) {
            FragmentChangeActivity fca = (FragmentChangeActivity) getActivity();
            fca.switchContent(fragment);
        } else if (getActivity() instanceof ResponsiveUIActivity) {
            ResponsiveUIActivity ra = (ResponsiveUIActivity) getActivity();
            ra.switchContent(fragment);
        }
    }


}

Here is your BaseActivity Class:

It dont have swipe, as I could understand, you don't need this.

public class FragmentChangeActivity extends BaseActivity {

    private Fragment mContent;

    public FragmentChangeActivity() {
        super(R.string.changing_fragments);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // set the Above View
        if (savedInstanceState != null)
            mContent = getSupportFragmentManager().getFragment(savedInstanceState, "mContent");
        if (mContent == null)
            mContent = new ColorFragment(R.color.red);  

        // set the Above View
            //This will be the first AboveView
        setContentView(R.layout.content_frame);
        getSupportFragmentManager()
        .beginTransaction()
        .replace(R.id.content_frame, mContent)
        .commit();

        // set the Behind View
            //This is the SlidingMenu
        setBehindContentView(R.layout.menu_frame);
        getSupportFragmentManager()
        .beginTransaction()
        .replace(R.id.menu_frame, new ColorMenuFragment())
        .commit();

        // customize the SlidingMenu
            //This is opcional
        getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        getSupportFragmentManager().putFragment(outState, "mContent", mContent);
    }

    public void switchContent(Fragment fragment) {
            // the meat of switching fragment
        mContent = fragment;
        getSupportFragmentManager()
        .beginTransaction()
        .replace(R.id.content_frame, fragment)
        .commit();
        getSlidingMenu().showContent();
    }

}

Ok, So If you want to change the ColorFragment to anything else, do this:

First, choice the item that you want to use:

case 0:
                newContent = new ColorFragment(R.color.red);
                break;

to:

case 0:
            newContent = new ArrayListFragment();
            break;

I have made just a arraylist, it is just a simple example, you can do a lot of thing, then you can read about Fragment to learn how to do different things.

    public class ArrayListFragment extends ListFragment {

    @Override                               
            public void onActivityCreated(Bundle savedInstanceState) {
                super.onActivityCreated(savedInstanceState);
                setListAdapter(new ArrayAdapter<String>(getActivity(),
                        android.R.layout.simple_list_item_1, Listnames.TITLES));
//Listnames is a class with String[] TITLES;

}

        @Override
        public void onListItemClick(ListView l, View v, int position, long id) {
            Log.i("FragmentList2", "Item clicked: " + id);

            String item = (String) getListAdapter().getItem(position);
        Toast.makeText(getActivity(), item, Toast.LENGTH_LONG).show();

        }

    }

Well, if you misunderstood something, just tell me.