You are on page 1of 6

STEP 1(create toolbar)

// remove default actionBar from the app


Add res values styles.xml <resources>
<style name="AppTheme"
parent="Theme.AppCompat.NoActionBar ">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/primaryColor</item>
<item
name="colorPrimaryDark">@color/primaryColorDark</item>
<item name="colorAccent">@color/accentColor</item>
</style>
The above code defines three types of colors used in the app
Reference: to get the color codes click here

Create a new layout file called app_bar.xml


Add android.support.v7.widget.Toolbar inside the app_bar.xml
set android:background="@color/primaryColor" ,
app:theme="@style/ThemeOverlay.AppCompat.Dark", // toolbar in dark
background with
white text
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" // pop-up
window shows on
menu button click with light
background and dark text.
Add the toolbar into app
Activity_main.xml just below the root element
Add the following code
<include
android:id="@+id/app_bar"
layout="@layout/app_bar">
</include>
Set the new toolbar as ActionBar of the app
MainActivity.java onCreate(Bundle savedInstanceState)
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
// toolbar declared in global section as Toolbar toolbar;
Add icon(eg:-shopping cart) in ActionBar
Resmenumenu_main.xml

// create a new menu item with id navigate


<item
android:id="@+id/navigate"
android:title="@string/next"
android:orderInCategory="200"
app:showAsAction="always"
android:icon="@drawable/ic_next"
/>
Set action on menu icon
// add new activity to navigate on icon click
AppRight clicknewactivityBlank Activitysave as subActivity
MainActivity.javaonCreateOptionsMenu()
If(id == R.id.navigate)
{
startActivity(new Indent(this,subActivity.class);
}
Set home button(Previous) on subActivity
subActivity.java onCreate()
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().detDisplayHomeAsUpEnabled(true);

subActivity.javaonOptionsItemSelected()
{
If(id== android.R.id.home)
{
NavUtils.navigateUpFromsameTask (this);
}}
// set parent Activity of the subActivity
ManifestAndroidManifest.xmlsubActivity
Add meta tag
<activity
android:name=".subActivity"
android:label="@string/title_activity_sub">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.nidheesh.emphasys.toolbarwithnav.Ma
inActivity" />
</activity>

STEP 2 (CREATE NAVIGATION DRAWER)


Change the activity_main.xml as following format
<android.support.v4.widget.DrawerLayout
android:id=+@id/drwer_layout>
<RelativeLayout>
<include />
<TextView />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Add navigation Drawer Fragment
AppnewFragmentBlankFragment
Name: NavigationDrawerFragment
Layout: fragment_navigation_drawer
Acitivity_main.xml add <fragment> element after
</RelativeLayout>
<fragment
Android:layout_width=280dp
Android:layout_height=match_parent
App:layout=@layout/fragment_navigation_drawer
Android:layout_gravity=start />
MainActivity.java onCreate()
Create an object for the fragment class
NavigationDrawerFragment drawerFragment =
(NavigationDrawerFragment)
getSupportFragmentManager().findFragmentById(R.id.fragment_naviga
tion_drawer);
drawerFragment.setUp((DrawerLayout)findViewById(R.id.drawerLayout
),toolbar);
// the abobe line shows conversion error it can be solved by import
android.support.v4.app.Fragment in
NavigationDrawerFragment.java

NavigationDrawerFragment.java create new method setup()


Public void setup(DrawerLayout drawerlayout,Toolbar toolbar)
{
}

Add string for the open_drawer and close_drawer


<string name="drawer_open">Open</string>
<string name="drawer_close">Close</string>

NavigationDarwerFragment.java

//Create object for ActionBarDrawerToggle


Private ActionBarDrawerToggle mDrawerToggle; (//import
android.support.v7.app.ActionBarDrawerToggle;)
Private DrawerLayout mDrawerLayout;
//setup()
{
mDrawerLayout = drawerLayout;
mDrawerToggle = new
ActionBarDrawerToggle(getActivity(),drawerLayout,toolbar
,R.string.dra
wer_open,R.string.drawer_close ) {
@overrride
Public void onDrawerOpened(View draweView)
{
Super. onDrawerOpened(View draweView);
}
@overrride
Public void onDrawerClosed(View draweView)
{
Super. onDrawerClosed(View draweView);
}
};
mDrawerLayout.setDrawerListner(mDrawerToggle);
}

Enable the app icon as an Up button


MainActivity.java onCreate()
setSupportActionBar(toolbar)
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

NavigationDrawer usually follows a pattern


1. The first time the user starts the app the navigation drawer
shows
2. If this activity or fragment is being created at the very first
time then it shows(on screen rotation need to show
immediately)
NavigationDrawerFragment.java global area
Private Boolean mUserLearnedDrawer;
private boolen mFromSavedInstanceState;

We have to store these variables in a Shared Preferences File ;


So we have to write two methods
NavigationDrawerFragment.java create a public variable to
store Shared Preference file
public static final String PREF_FILE_NAME ="testpref";
NavigationDrawerFragment.java add new methods for read
& write from sharedPreferenceFile
Public static void svaeToPreferences(Context context,
String preferenceName, String preferenceValue)
{
SharedPreferences sharedprefernces =
context.getSharedPreferences(PREF_FILE_NAME,Context.MODE_P
RIVATE);
SharedPreferences.Editor editor = sharedprefernces.edit();
editor.putString(preferenceName,preferenceValue);
editor.apply();

}
public static String readFromPreferences(Context
context,String preferenceName,String preferenceValue)
{
SharedPreferences sharedprefernces =
context.getSharedPreferences(PREF_FILE_NAME,Context.MODE_P
RIVATE);
return
sharedprefernces.getString(preferenceName,preferenceValue);
}
Create a onCreate() method in navigationDrawerFragment.java
public void onCreate(Bundle savedInstanceState)
{
Super.onCreate(savedInstanceState);
}

navigationDrawerFragment.java create key variable for


userLearned variable
public static final String KEY_USER_LEARNED_DRAWER =
"user_learned_drawer";

check the drawer is creating first time or creating on a rotation of a


screen
navigationDrawerFragment.java onCreate
mUserLearnedDrawer=Boolean.valueOf(readFromPreferences(getActivi
ty(),KEY_USER_LEARNED_DRAWER,"false"));
if(savedInstanceState!=null) // !=null means its created on a
screen rotation
{
mFromSavedInstanceState=true; // Set that the viewer
already opened

}
navigationDrawerFragment.javasetup()onDrwaerOpened()
//check if this drawer was displayed before ever or no
public void onDrawerOpened(View drawerView) {
if (! mUserLearnedDrawer)
{
MUserLearnedDrawer=true;
svaeToPreferences(getActivity(),KEY_USER_LEARNE
D_DRAWER,mUserLearnedDrawer+"");
}
getActivity ().invalidateOptionsMenu(); // re-draw your
Actions Bar
again and again
}

add super.onDrawerOpened() and super.onDrawerClosed() in


respective places

You might also like