Wednesday, May 27, 2015

Add Image in Navigation Drawer Android Studio Template

I have to add Image in one of my project in slider Menu ,
I have used Android Studio Template Navigation Drawer  for material design .
For adding header on top of the list I have modified few lines in code: below are the simple steps:

Create an Android Studio project and select  Navigation Drawer Activity as shown below
Now your project structure is like this:


Now open activity_main.xml  and add LinearLayout and image view as shown below highlighted lines


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

    android:layout_height="match_parent" />


<LinearLayout    android:layout_width="@dimen/navigation_drawer_width"    android:layout_height="match_parent"    android:orientation="vertical"    android:layout_gravity="start"    android:id="@+id/slider_list_with_image"    >

<ImageView    android:layout_width="match_parent"    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher">
</ImageView>


<fragment android:id="@+id/navigation_drawer"    android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent"    android:layout_gravity="start"    android:name="com.naushad.navigationdrawersliderimage.NavigationDrawerFragment"    tools:layout="@layout/fragment_navigation_drawer" />

</LinearLayout>

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

Now open NavigationDrawerFragment.java and modify highlighted lines
  
public class NavigationDrawerFragment extends Fragment {

private static final String STATE_SELECTED_POSITION = "selected_navigation_drawer_position";
  
private static final String PREF_USER_LEARNED_DRAWER = "navigation_drawer_learned";

private NavigationDrawerCallbacks mCallbacks;

private ActionBarDrawerToggle mDrawerToggle;

    private DrawerLayout mDrawerLayout;
    private ListView mDrawerListView;
    //private View mFragmentContainerView;
   //Replace it whereever it used in this class with linear layout    

    private LinearLayout mlinearLayout;

    private int mCurrentSelectedPosition = 0;
    private boolean mFromSavedInstanceState;
    private boolean mUserLearnedDrawer;

    public NavigationDrawerFragment() {
    }

    @Override    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(getActivity());
        mUserLearnedDrawer = sp.getBoolean(PREF_USER_LEARNED_DRAWER, false);

        if (savedInstanceState != null) {
            mCurrentSelectedPosition = savedInstanceState.getInt(STATE_SELECTED_POSITION);
            mFromSavedInstanceState = true;
        }

        // Select either the default item (0) or the last selected item.        
        selectItem(mCurrentSelectedPosition);
    }

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

    @Override    
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        mDrawerListView = (ListView) inflater.inflate(
                R.layout.fragment_navigation_drawer, container, false);
        mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override            
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                selectItem(position);
            }
        });
        mDrawerListView.setAdapter(new ArrayAdapter(
                getActionBar().getThemedContext(),
                android.R.layout.simple_list_item_activated_1,
                android.R.id.text1,
                new String[]{
                        getString(R.string.title_section1),
                        getString(R.string.title_section2),
                        getString(R.string.title_section3),
                }));
        mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
        return mDrawerListView;
    }

    public boolean isDrawerOpen() {
   return mDrawerLayout != null && 
      mDrawerLayout.isDrawerOpen(mlinearLayout);
     //*** MODIFIED by Naushad        
     //mDrawerLayout.isDrawerOpen(mFragmentContainerView);
    }

    public void setUp(int fragmentId, DrawerLayout drawerLayout) {
        //mFragmentContainerView = getActivity().findViewById(fragmentId);
        //*** MODIFIED by Naushad        
        mlinearLayout=(LinearLayout)getActivity().findViewById(R.id.slider_list_with_image);
        mDrawerLayout = drawerLayout;
       // set a custom shadow that overlays the main content when the drawer opens                  

      mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
        // set up the drawer's list view with items and click listener
        ActionBar actionBar = getActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeButtonEnabled(true);

          mDrawerToggle = new ActionBarDrawerToggle(
                getActivity(),                                 
               mDrawerLayout,                                  
              R.drawable.ic_drawer,            
               R.string.navigation_drawer_open,  
                R.string.navigation_drawer_close) {
            @Override            
             public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                if (!isAdded()) {
                    return;
                }

                getActivity().supportInvalidateOptionsMenu(); 
               // calls onPrepareOptionsMenu()            
             }

            @Override            
             public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                if (!isAdded()) {
                    return;
                }

                if (!mUserLearnedDrawer) {
                           
                    mUserLearnedDrawer = true;
                    SharedPreferences sp = PreferenceManager
                            .getDefaultSharedPreferences(getActivity());
                    sp.edit().putBoolean(PREF_USER_LEARNED_DRAWER, true).apply();
                }

                getActivity().supportInvalidateOptionsMenu(); 
               // calls onPrepareOptionsMenu()            
           }
        };
 
        if (!mUserLearnedDrawer && !mFromSavedInstanceState) {
            //mDrawerLayout.openDrawer(mFragmentContainerView); 
           //***MODIFIED by Naushad                     
              mDrawerLayout.openDrawer(mlinearLayout);
        }

           mDrawerLayout.post(new Runnable() {
            @Override            
            public void run() {
                mDrawerToggle.syncState();
            }
        });

        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    private void selectItem(int position) {
        mCurrentSelectedPosition = position;
        if (mDrawerListView != null) {
            mDrawerListView.setItemChecked(position, true);
        }
        if (mDrawerLayout != null) {
           // mDrawerLayout.closeDrawer(mFragmentContainerView);  
           //*** MODIFIED by Naushad               
          mDrawerLayout.closeDrawer(mlinearLayout);
        }
        if (mCallbacks != null) {
            mCallbacks.onNavigationDrawerItemSelected(position);
        }
    }

    @Override    
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        try {
            mCallbacks = (NavigationDrawerCallbacks) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException("Activity must implement NavigationDrawerCallbacks.");
        }
    }

    @Override    public void onDetach() {
        super.onDetach();
        mCallbacks = null;
    }

    @Override    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt(STATE_SELECTED_POSITION, mCurrentSelectedPosition);
    }

    @Override    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Forward the new configuration the drawer toggle component.        
       mDrawerToggle.onConfigurationChanged(newConfig);
    }

    @Override    
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        
     if (mDrawerLayout != null && isDrawerOpen()) {
            inflater.inflate(R.menu.global, menu);
            showGlobalContextActionBar();
        }
        super.onCreateOptionsMenu(menu, inflater);
    }

    @Override    public boolean onOptionsItemSelected(MenuItem item) {
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        if (item.getItemId() == R.id.action_example) {
            Toast.makeText(getActivity(), "Example action.", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

     private void showGlobalContextActionBar() {
        ActionBar actionBar = getActionBar();
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setTitle(R.string.app_name);
    }

    private ActionBar getActionBar() {
        return ((ActionBarActivity) getActivity()).getSupportActionBar();
    }

   public static interface NavigationDrawerCallbacks {
            void onNavigationDrawerItemSelected(int position);
    }
}


Thats it here is the output :) make sure you have image in drawable folder You can get the source code from github here is the link

No comments:

Post a Comment