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.

Answer 2

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 3

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.