askIT

Android Navigation drawer fragments

media-floppy.png Download Android project file

If you choose to use the Android navigation drawer activity, then you should see what Fragments can do for you.

menu_import.png fragment_import.png
Figure: You select a menu item and is moved to that page.

You need to start with a Navigation drawer activity. In your res\layout folder you will find xml design files. One file includes another file like this:

activity_main_app_bar_main_content_main.png Figure: activity_main.xml includes app_bar_main.xml which includes content_main.xml

1. Edit res\layout\app_bar_main.xml

Remove the include of content_main. Place a FrameLayout instead.

<!-- Content -->
<!-- <include layout="@layout/content_main" /> -->

<FrameLayout
  android:id="@+id/flContent"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marginTop="?attr/actionBarSize" />

<!-- //Content -->

2. Add fragments

Go to your java\com.nettport.album and right click on it. Add new fragments (blank).

Add the following fragments:

new_fragment_blank.png Figure: Add fragment to your project.

add_fragment_name.png Figure: Add fragment to your project.

Replace import android.app.Fragment with import android.support.v4.app.Fragment;

// import android.app.Fragment;
import android.support.v4.app.Fragment;

import_android_app_fragment.png
Figure: Change import to android.support.v4.app.Fragment

3. Edit MainActivity

Open Main activity. Add the onFragmentInteraction method.

        @Override
        public void onFragmentInteraction(Uri uri) {
        }

MainActivity should implement all fragments classes.

public class MainActivity extends AppCompatActivity
                implements NavigationView.OnNavigationItemSelectedListener,
                GalleryFragment.OnFragmentInteractionListener,
                ImportFragment.OnFragmentInteractionListener,
                SlideshowFragment.OnFragmentInteractionListener,
                ToolsFragment.OnFragmentInteractionListener{

Add the code for inializing the default fragment after
setSupportActionBar(toolbar);

/* Inialize fragmet */
Fragment fragment = null;
Class fragmentClass = null;
fragmentClass = ImportFragment.class;
try {
        fragment = (Fragment) fragmentClass.newInstance();
} catch (Exception e) {
        e.printStackTrace();
}

FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();

Try to run the application now. If the application crashes and you get the error
android cannot be cast to android.support.v4.app.Fragment
then check GalleryFragment.class. Make sure that it doesn't import android.app.Fragment. It should import android.support.v4.app.Fragment.

Edit the method onNavigationItemSelected.

/*- onNavigationItemSelected --------------------------------------------*/
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        Fragment fragment = null;
        Class fragmentClass = null;

        // Menu items
        if (id == R.id.nav_camera) {
                fragmentClass = ImportFragment.class;
        } else if (id == R.id.nav_gallery) {
                fragmentClass = GalleryFragment.class;
        } else if (id == R.id.nav_slideshow) {
                fragmentClass = SlideshowFragment.class;
        } else if (id == R.id.nav_manage) {
                fragmentClass = ToolsFragment.class;
        } else if (id == R.id.nav_share) {
                // Add fragment here
        } else if (id == R.id.nav_send) {
                // Add fragment here
        }

        // Try to add item to fragment
        try {
                fragment = (Fragment) fragmentClass.newInstance();
        } catch (Exception e) {
                e.printStackTrace();
        }

        // Try to show that content
        FragmentManager fragmentManager = getSupportFragmentManager();
        try {
                fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();
        } catch (Exception e) {
                e.printStackTrace();
                Toast.makeText(this, "Error: " + e.toString(), Toast.LENGTH_LONG).show();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
}

4. Edit res\layout files

Go to your layout files. Edit the TextView text on each design so that you can identify them.

Result

menu_gallery.png fragment_gallery.png

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.