Create main content area for Android navigation drawer

Question

I want to show some text views and images initially (when app opens) in the main screen of my application and need to replace this content when a user clicks item form navigation drawer. This app should support from android 2.2, So I have used action bar sherlock also.

Here is the layout for the main activity I used.

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<!-- The main content view -->
<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- The navigation drawer -->
  <ListView
    android:id="@+id/drawer"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:divider="#666"
    android:background="#333"
    android:dividerHeight="1dp"
    android:paddingLeft="15sp"
    android:paddingRight="15sp"/>

</android.support.v4.widget.DrawerLayout>

Basically I need to add elements to the Frame layout.

I'm using following code to replace the content and add new fragment.

  public class MainActivity extends SherlockFragmentActivity {
     private String[] drawerListViewItems;
        private ListView drawerListView;
        private DrawerLayout drawerLayout;
        private ActionBarDrawerToggle mDrawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


         drawerListViewItems = getResources().getStringArray(R.array.items);

            // get ListView defined in activity_main.xml
            drawerListView = (ListView) findViewById(R.id.drawer);

                    // Set the adapter for the list view
            drawerListView.setAdapter(new ArrayAdapter<String>(this,
                    R.layout.drawer_listview_item, drawerListViewItems));

            drawerListView.setOnItemClickListener(new DrawerItemClickListener());
            drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);


           // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeButtonEnabled(true);

            mDrawerToggle = new ActionBarDrawerToggle(
                    this,                  /* host Activity */
                    drawerLayout,         /* DrawerLayout object */
                    R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
                    R.string.drawer_open,  /* "open drawer" description */
                    R.string.drawer_close  /* "close drawer" description */
                );

            drawerLayout.setDrawerListener(mDrawerToggle);

            getSupportActionBar().setDisplayHomeAsUpEnabled(true);

            // just styling option add shadow the right edge of the drawer
        drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
       // drawerListView.setOnItemClickListener(new DrawerItemClickListener());
    }

//  @Override
//  public boolean onCreateOptionsMenu(Menu menu) {
//      // Inflate the menu; this adds items to the action bar if it is present.
//      getSupportMenuInflater().inflate(R.menu.main, menu);
//      return true;
//  }

      @Override
        protected void onPostCreate(Bundle savedInstanceState) {
            super.onPostCreate(savedInstanceState);
            // Sync the toggle state after onRestoreInstanceState has occurred.
             mDrawerToggle.syncState();
        }

        @Override
        public void onConfigurationChanged(Configuration newConfig) {
            super.onConfigurationChanged(newConfig);
            mDrawerToggle.onConfigurationChanged(newConfig);
        }

     @Override
        public boolean onOptionsItemSelected(MenuItem item) {
         switch(item.getItemId()){
         case android.R.id.home:
             if(drawerLayout.isDrawerOpen(drawerListView)){
                 drawerLayout.closeDrawer(drawerListView);
             }else{
                 drawerLayout.openDrawer(drawerListView);
             }
         }
            return false;

        }

    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            //Toast.makeText(MainActivity.this, ((TextView)view).getText(), Toast.LENGTH_SHORT).show();
            //drawerLayout.closeDrawer(drawerListView);
            selectItem(position);
        }
    }

//  private void selectFragment(int position){
//
////        Intent intent = new Intent(MainActivity.this,Second.class);
////        startActivity(intent);
////        drawerLayout.closeDrawer(drawerListView);
//      Fragment newFragment = new Second();
//      android.support.v4.app.FragmentManager fm = getSupportFragmentManager();
//      switch(position){
//      case 0:
//          sfa = new Second();
//          break;
//      }
//      fm.beginTransaction()
//      .replace(R.id.action_settings, sfa)
//      .commit();
//      
//      drawerListView.setItemChecked(position, true);
//      drawerLayout.closeDrawer(drawerListView);
//  }


     private void selectItem(int position) {

            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

            // Locate Position
            switch (position) {
            case 1:
                Fragment f = new Second();
                ft.replace(R.id.content_frame, f);
                Toast.makeText(getApplicationContext(), "Yahoooo!", Toast.LENGTH_SHORT).show();
                break;

            case 2:
                Fragment f2 = new Third();
                ft.replace(R.id.content_frame, f2);
                Toast.makeText(getApplicationContext(), "Two", Toast.LENGTH_SHORT).show();
                break;
            }
            ft.commit();
            drawerListView.setItemChecked(position, true);
            setTitle("Title");
            drawerLayout.closeDrawer(drawerListView);
        }

}

Action drawer is successfully working. I want to add items to the main content area and replace them with new fragments when user selects an item from the navigation drawer. How to do this ?

Thank you in advance.

Answer 1

In your onCreate add the following

   if (savedInstanceState == null) {
       selectItem(0);

   }

Display fragment f initially and when user chooses the items in the list replace the fragment f with a new one.