Navigation Drawer with Toolbar in Android
In this quick and easy tutorial we will see how to set up a Navigation Drawer with Toolbar. The combination of Navigation Drawer + Toolbar is widely used in apps now a days. So lets see how to setup one.
Navigation Drawer
The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge (or right edge) of the screen or, while at the top level of the app, the user touches the app icon in the action bar.
This panel can either be on Left edge or Right edge or even both edges. This can be done by setting the layout gravity as start or end.
Toolbar
A Toolbar is a generalisation of Action bars. Its more flexible and customisable compared to Action Bars and can be placed anywhere in the view hierarchy. Toolbar is a widely used widget found in a variety of apps.
Material Design and Toolbar are natively supported in Android 21 API (Android 5.0 lollypop). So if your app is supporting Android 5 and above, there is no need to add the appcompat v7 dependency stated below.
Lets move on to the coding part.
Add Dependencies
Open the build.gradle file and add the following dependencies to it.
|
1 2 3 4 5 6 7 8 |
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:25.3.1' } |
Add the Theme
We will need to create a custom theme since we need one without the Android native Action bar. We will be using Toolbar as the Action bar. Failing to add this theme might result in errors or messed up UI. Open your styles.xml and add the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> </style> </resources> |
Make sure to set this as your application theme in Manifest file or as the theme of Activity which contains Navigation Drawer and Toolbar.
Layout XML
Now lets create our layout which contains the drawer and toolbar. Create an xml layout file in res folder and name it activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:id="@+id/navigation_drawer" Android:layout_width="match_parent" Android:layout_height="match_parent" Android:fitsSystemWindows="true"> <LinearLayout Android:orientation="vertical" Android:layout_width="match_parent" Android:layout_height="match_parent"> <Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android" xmlns:app="http://schemas.Android.com/apk/res-auto" Android:id="@+id/toolbar" Android:layout_width="match_parent" Android:layout_height="60dp" Android:background="#ff6d7fe2" Android:minHeight="?attr/actionBarSize" app:contentInsetEnd="0dp" app:contentInsetLeft="0dp" app:contentInsetRight="0dp" app:contentInsetStart="0dp" /> // Can be used as a Fragment Container or Replace with any layout // as per your requirement <FrameLayout Android:id="@+id/frame_container" Android:layout_width="match_parent" Android:layout_height="match_parent"> </FrameLayout> </LinearLayout> // This ListView will be the sliding drawer. You may even use a LinearLayout // or ScrollView or any other layout as per the requirement // Dont forget to set the layout_gravity = start or end <ListView Android:id="@+id/left_drawer" Android:layout_width="280dp" Android:layout_height="match_parent" Android:layout_gravity="start" Android:choiceMode="singleChoice" Android:divider="@Android:color/transparent" Android:dividerHeight="0dp" Android:background="#edeff2"/> </Android.support.v4.widget.DrawerLayout> |
MainActivity
Lets create our Java class titled MainActivity.java. This Activity should extend the AppCompatActivity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
public class MainActivity extends AppCompatActivity { ActionBarDrawerToggle actionBarDrawerToggle; DrawerLayout drawerLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); drawerLayout = (DrawerLayout) findViewById(R.id.navigation_drawer); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name,R.string.app_name); drawerLayout.setDrawerListener(actionBarDrawerToggle); // Add the code for your ListView or RecyclerView or ScrollView that you are using as the Drawer Layout. } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
Add your Listview related code. Better use a RecyclerView if you have too many items in the list. Check out this tutorial for setting up RecyclerView.
Register the MainActivity.java in Manifest and Run the code.
Hope you found this tutorial helpful. Please let me know your comments below.
Follow GadgetSaint on Facebook / Twitter for updates.
Wanna start your blog or site in 5 mins? Check out Official WordPress recommended web hosting Bluehost.
