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

homescreen

and this is my menu

menu_frame

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

score 14 · Accepted Answer · edited May 10 '13 at 05:12

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.

Oh i think what i need is good explanation in android library example...thanks for reading the sample and explain to me , just about the behind content onListItemClick.... how do i replace the color with like group of java class i wrote ... like task1.java,task2.java,taskjava.java ... all of them have different layout...Thanks a lot=) — Leon Armstrong, Jan 16 '13 at 18:01
I have done a simple example with a arraylist class, you can change and use task1.java instead, just don't forget that you are working with fragment. Your task1.java cannot extends an Activity. — Marckaraujo, Jan 16 '13 at 20:19
@LeonArmstrong, plz consider accept this question as the correct one. — Marckaraujo, Jan 20 '13 at 12:54
Sorry i just able to test this code today , will let you know the result ... thanks — Leon Armstrong, Jan 22 '13 at 03:21
Because you are working with Fragments atm, so every class need to extend a ListFragment or Fragment and etc... at least in this case. — Marckaraujo, Jan 22 '13 at 12:16
@PratikButani it is just a sample class , you can replace it with your desired class — Leon Armstrong, May 28 '13 at 03:28

score 2 · Answer 2 · answered Jan 11 '13 at 18:55

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.

thanks for your reading , you got my question quite near , for the callback part i do not have any problem , i have a list of button here in a menu navigation , and a content_frame which play as my stage , and now i want to dynamically response to user click on my menu and change my content_frame to the desire content (no swipe i just want to switch between them on user click), what is the correct way to do this when i have few java class that does different job and content, like task1.java , task2.java , task3.java that represent different content — Leon Armstrong, Jan 14 '13 at 08:34
@LeonArmstrong I'm not sure I understand. Those Buttons are in the sliding menu or somewhere else? *change my content_frame to the desire content* - A simple `FragmentTransaction` should solve this if I understand what you want. — user, Jan 14 '13 at 19:25

score 1 · Answer 3 · answered Jan 14 '13 at 09:35

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.

what if the connectivity is down? – Leon Armstrong Jan 16 '13 at 02:03 — Leon Armstrong, Jan 16 '13 at 02:03
That's something we handle in the WebViewFragment itself. – StingRay5 Jan 16 '13 at 15:40 — StingRay5, Jan 16 '13 at 15:40

Dynamic UI with sliding menu and actionbarsherlock

3 Answers3

Linked