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 but

Answer 1

My problem is how do i include this 3 fragment into my homescreen ?

It really depends on how do you want them to behave.

Do you want them to appear only one at a time without allowing swipeing between them? If yes then add/insert a container layout(for example a simple FrameLayout) in your Activity on which you'll add the Fragments. I didn't worked with the SlidingMenu library but it should have a callback called when you click one of the items in the menu. In that callback you'll attach the proper fragment to the container layout(the FrameLayout) I mention earlier.

Do you want to show only one Fragment but you want to allow the user to swipe between them? If yes use a ViewPager in the activity layout and in the callback triggered by the SlidingMenu library's menu selection set the current page of the ViewPager with the setCurrentItem() method.

If you want something different then this provide more details.

Most tutorial are creating fragment with code, i just want to include my 3 task into it

This, I don't quite understand. If you want to "include" your task fragments directly in your xml layout, you can but you'll be limited on what you can do with them(not to mention that all the fragments will be on one single screen) and I would avoid it. If you want something else provide more details.

Answer 2

I don't think it will work like that with Fragments, I was looking for a solution as well and ended up adding the fragments by hand.

I'm working on something similar like this, but for me there was also the case of opening WebViews to designated URL's. So the "above" screen would always update on any click.

To control the behaviour of this I created a MenuItemResource object, which basically holds the properties, like the ID of the icon, the name of the menu item and the URL.

public class MenuItemResource {
    private int aValue;
    private int aUrl;
    private int aIconIdle;
    private int aIconActive;

    public MenuItemResource(int value, int url, int iconIdle, int iconActive) {
        aValue = value;
        aUrl = url;
        aIconIdle = iconIdle;
        aIconActive = iconActive;
    }
}

The behaviour is handled by an OnItemClickListener which checks with a switch which values are in the MenuItemResource that is being clicked. For the WebView it's quite straightforward:

            newFragment = new WebViewFragment();
            final Bundle arguments = new Bundle();
            arguments.putString(Constants.KEY_URL, getString(item.getUrl()));
            newFragment.setArguments(arguments);
            startFragment(newFragment, false); 
            // boolean is used to add the fragment to the backstack

The startFragment method just uses the FragmentManager and FragmentTransaction to replace the current Fragment. This works the same for other MenuItemResources that do start regular fragments.

            newFragment = new Task1Fragment();
            startFragment(newFragment, false);

I don't refer to the fragments in the MenuItemResource (yet), but it works pretty well for URLs and WebViews. The fragments are started based on the value in the MenuItemResource I'm not sure how you would refer to the fragments like you did in the comments (Task1.java, etc), since you don't start them with Intents like Activities. Also I'm not sure why you would want to do this dynamically for Fragments (I can imagine this case being dynamic for WebViews though) as they need to be compiled anyway, so that's why my menu items are added by hand.

Answer 3

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.