Question

I’m trying to make a sliding menu just like Youtube or Google+ app.

I’m following this project code, and what I’m trying to do is when I click on an item on the left bar, the Activity slides back to left with the new content.

just like when you are on Google+ home screen, and you click the profile item on the left menu and it slides back to left with the profile screen loaded.

So here is my code.

I have this main activity called ExampleActivity.java:

    public class ExampleActivity extends SlidingFragmentActivity
{
    //public PagerAdapter adapter;
    public FragmentManager mFragmentManager;

    private List<Fragment> mFragments = new ArrayList<Fragment>();

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        mFragmentManager = getSupportFragmentManager();

        // set the Behind View
        setBehindContentView(R.layout.frame);
        getSupportFragmentManager().beginTransaction().add(R.id.frame, new SampleListFragment()).commit();

        // customize the SlidingMenu
        this.setSlidingActionBarEnabled(true); 
        getSlidingMenu().setShadowWidthRes(R.dimen.shadow_width);
        getSlidingMenu().setShadowDrawable(R.drawable.shadow);
        getSlidingMenu().setBehindOffsetRes(R.dimen.actionbar_home_width); 
        getSlidingMenu().setBehindScrollScale(0.25f);
        getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

        // customize the ActionBar
        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.setDisplayHomeAsUpEnabled(true);

        setContentView(R.layout.main);
    }

    public boolean onOptionsItemSelected(MenuItem item)
    {
        switch (item.getItemId())
        {
            case android.R.id.home:
                toggle();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        this.getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

And I have the SampleListFragment.java which handles the clicks on the left menu.

    public class SampleListFragment extends ListFragment
{
    private ExampleActivity mActivity;

    @Override
    public void onResume()
    {
        super.onResume();
        mActivity = (ExampleActivity)getActivity();
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id)
    {
        Fragment frag = null;

        switch(position)
        {
            case 0:
                frag = new FirstFragment();
                break;
            case 1:
                frag = new SecondFragment();
                break;
        }

        if (frag != null)
            replaceFragment(frag);
    }

    protected void replaceFragment(Fragment frag)
    {
        FragmentTransaction fragmentTransaction = mActivity.getSupportFragmentManager().beginTransaction();
        fragmentTransaction.add(R.id.main, frag);
        fragmentTransaction.commit();
        mActivity.showAbove();
    }

    /**
     * A callback function, executed when this fragment is attached to an
     * activity
     */
    @Override
    public void onAttach(Activity activity)
    {
        super.onAttach(activity);
    }

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

    public void onActivityCreated(Bundle savedInstanceState)
    {
        super.onActivityCreated(savedInstanceState);
        SampleAdapter adapter = new SampleAdapter(getActivity());
        for (int i = 0; i < 20; i++)
        {
            adapter.add(new SampleItem(new Fragment(), "Sample List",
                    android.R.drawable.btn_star));
        }
        setListAdapter(adapter);
    }

    private class SampleItem
    {
        public Fragment frag;
        public String tag;
        public int iconRes;

        public SampleItem(Fragment fram, String tag, int iconRes)
        {
            this.frag = frag;
            this.tag = tag;
            this.iconRes = iconRes;
        }
    }

    public class SampleAdapter extends ArrayAdapter<SampleItem>
    {
        public SampleAdapter(Context context)
        {
            super(context, 0);
        }

        public View getView(int position, View convertView, ViewGroup parent)
        {
            if (convertView == null)
            {
                convertView = LayoutInflater.from(getContext()).inflate(
                        R.layout.row, null);
            }

            ImageView icon = (ImageView) convertView
                    .findViewById(R.id.row_icon);
            TextView title = (TextView) convertView
                    .findViewById(R.id.row_title);

            convertView.setTag(title.getText().toString());

            return convertView;
        }

    }
}

So what happens, when I click the first item on the left menu, the FirstFragment() is called, the toast is shown but the layout is not added to the activity.

Here is the code for FirstFragment class:

public class FirstFragment extends Fragment
{
    private ExampleActivity mActivity;

    @Override
    public void onCreate(Bundle b)
    {
        super.onCreate(b);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        super.onCreateView(inflater, container, savedInstanceState);
        View fragmentView = inflater.inflate(R.layout.firstfragment, container, false);

        TextView textView = (TextView) fragmentView.findViewById(R.id.textview);
        textView.setText("Lorem ipsum");

        return fragmentView;
    }

    @Override
    public void onResume()
    { 
        super.onResume();
        mActivity = (ExampleActivity)getActivity();
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState)
    {
        super.onActivityCreated(savedInstanceState);

        Toast.makeText(getActivity(), "First Fragment", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onAttach(Activity activity)
    {
        super.onAttach(activity);
    }
}

Here is the layout for the ExampleActivity.java which is main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <Button
        android:text="Random Button!"
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

Question

How do I add the first fragment layout to the activity. It keeps showing the initial layout, but the layout of the fragment is not loaded into the activity.

Thank you.

Answer 1

I followed this tutorial on android documentation and it worked.

http://developer.android.com/training/basics/fragments/index.html