{"id":162,"date":"2017-01-17T06:36:09","date_gmt":"2017-01-17T06:36:09","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=162"},"modified":"2019-06-14T12:48:40","modified_gmt":"2019-06-14T12:48:40","slug":"toolbar","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/toolbar","title":{"rendered":"ToolBar Tutorial With Example In Android Studio"},"content":{"rendered":"<p>In Android Toolbar is similar to an ActionBar(now called as App Bars). Toolbar is a Viewgroup that can be placed at anywhere in the Layout. We can easily replace an ActionBar with Toolbar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-240\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/Toolbar-in-Android.jpg\" alt=\"Toolbar in Android\" width=\"254\" height=\"236\" \/><\/p>\n<p>Toolbar was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop). Material Design brings lot of new features in Android that changed a lot the visual design patterns regarding the designing of modern Android applications.<\/p>\n<p>An Action bar is traditionally a part of an Activity opaque window decor controlled by the framework but a Toolbar may be placed at any level of nesting within a view hierarchy. <strong>Toolbar provides more feature than ActionBar. A Toolbar may contain a combination of elements from start to end.<\/strong><\/p>\n<p><strong><span style=\"color: #ff0000;\">Important Note: <\/span><\/strong>Toolbar&#8217;s are more flexible than ActionBar. We can easily modify its color, size and position. We can also add labels, logos, navigation icons and other views in it. In Material Design Android has updated the AppCompat support libraries so that we can use Toolbar&#8217;s in our devices running API Level 7 and up. In AppCompat, Toolbar is implemented in the android.support.v7.widget.Toolbar class.<\/p>\n<hr \/>\n<h4><strong>Define Design Support Library:<\/strong><\/h4>\n<p>To use Toolbar\u00a0you need to add design support library\u00a0in build.gradle file.<\/p>\n<p><strong>Gradle Scripts &gt; build.gradle (Module:App) -&gt; inside\u00a0dependencies<\/strong><\/p>\n<pre>compile 'com.android.support:design:24.1.1' \/\/ design support Library<\/pre>\n<hr \/>\n<h4><strong>Elements of Toolbar In Android:<\/strong><\/h4>\n<p>In Android Toolbar has more features than ActionBar and we can easily replace a ActionBar with Toolbar. In Toolbar from start to end it may contain a combination of Elements. Below we describe each and every element of Toolbar.<\/p>\n<ul>\n<li><strong><span style=\"color: #008000;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-184\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/ToolBar-Elements-In-Android-Studio.jpg\" alt=\"toolbar-elements-in-android-studio\" width=\"288\" height=\"326\" srcset=\"https:\/\/abhiandroid.com\/materialdesign\/wp-content\/uploads\/2017\/01\/ToolBar-Elements-In-Android-Studio.jpg 288w, https:\/\/abhiandroid.com\/materialdesign\/wp-content\/uploads\/2017\/01\/ToolBar-Elements-In-Android-Studio-265x300.jpg 265w\" sizes=\"auto, (max-width: 288px) 100vw, 288px\" \/>Navigation Button:<\/span><\/strong> It may be a Navigation menu toggle, up arrow, close, done, collapse or any other glyph of the app&#8217;s choosing.<\/li>\n<li><span style=\"color: #008000;\"><strong>Brand Logo Image:<\/strong><\/span> It may extend to the height of the toolbar and can be arbitrarily wide.<\/li>\n<li><strong><span style=\"color: #008000;\">Title and SubTitle:<\/span><\/strong> A title should be a signpost for the current position of Toolbar&#8217;s navigation hierarchy and the content contained there. Subtitle represents any extended information about the current content. If an app uses a logo then it should strongly consider omitting a title and subtitle.<\/li>\n<li><strong><span style=\"color: #008000;\">One or More Custom Views:<\/span><\/strong> An Application may add arbitrary child views to the Toolbar. If child view&#8217;s Toolbar.LayoutParams indicates CENTER_HORIZONTAL Gravity then view will attempt to center within the available space remaining in the Toolbar after all other element&#8217;s have been measured.<\/li>\n<li><span style=\"color: #008000;\"><strong>Action Menu:<\/strong><\/span> The menu of Actions will pin to the end of the Toolbar offering a few important, typical or frequent actions along with an optional overflow menu for additional actions. Action buttons are aligned vertically within the Toolbar&#8217;s minimum height if we set.<\/li>\n<\/ul>\n<hr \/>\n<h4><strong>Basic Toolbar XML code:<\/strong><\/h4>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"&gt;\r\n\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n\r\n<\/pre>\n<h4><strong>Setting Toolbar as An ActionBar:<\/strong><\/h4>\n<p>We can easily replace ActionBar with Toolbar by using setSupportActionBar() method. Here is the code of replacing ActionBar with Toolbar.<\/p>\n<pre> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar<\/pre>\n<h4><strong>Attributes of Toolbar In Android:<\/strong><\/h4>\n<p>Now let\u2019s we discuss some common attributes of a Toolbar that helps us to configure it in our layout (xml).<\/p>\n<ul>\n<li><span style=\"color: #008000;\"><strong>id:<\/strong><\/span> This attribute is used to set the id for the Toolbar. Id is used to uniquely identify a Toolbar.<br \/>\nBelow we set the id of the Toolbar.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n\r\n<\/pre>\n<\/li>\n<li><strong><span style=\"color: #008000;\"> logo:<\/span><\/strong> This attribute is used to set as the drawable logo that appears at the starting side of the Toolbar means just after the navigation button. We can also do this programmatically by using setLogo() method.Below we set the logo for the Toolbar.\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:logo=\"@drawable\/logo\"&gt;&lt;!-- logo for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-223\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/Logo-for-the-Toolbar-In-Android-Studio.jpg\" alt=\"logo-for-the-toolbar-in-android-studio\" width=\"172\" height=\"133\" \/><\/li>\n<li><span style=\"color: #008000;\"><strong> logoDescription:<\/strong><\/span> This attribute is used to set the content description string to describe the appearance of the associated logo image. We can also do this programmatically by using setLogoDescription() method.<br \/>\nBelow we set the description for the displayed logo.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:logo=\"@drawable\/logo\"\r\n    app:logoDescription=\"LOGO\"&gt;&lt;!-- logo and logo description for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong> navigationIcon:<\/strong> <\/span>This attribute is used to set the Icon drawable for the navigation button that located at the start of the toolbar. We can also do this programmatically by using setNavigationIcon() method.Below we set the icon for the navigation button.\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:navigationIcon=\"@drawable\/logo\"&gt;&lt;!-- navigation icon for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-224\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/Navigation-icon-for-the-Toolbar-In-Android-Studio.jpg\" alt=\"navigation-icon-for-the-toolbar-in-android-studio\" width=\"252\" height=\"182\" \/><\/li>\n<li><span style=\"color: #008000;\"><strong>navigationContentDescription:<\/strong> <\/span>This attribute is used to set the text for the description of navigation button. We can also do this programmatically by using setNavigationContentDescription() method.<br \/>\nBelow we set the content description for the displayed icon of navigation button.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:navigationContentDescription=\"Navigation Description\"\r\n    app:navigationIcon=\"@drawable\/logo\"&gt;\r\n    &lt;!-- navigation icon and description for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>title:<\/strong> <\/span>This attribute is used to set title for the Toolbar. We can also do this programmatically by using setTitle() method.<br \/>\nBelow we set the title for the Toolbar.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:title=\"AbhiAndroid\"&gt;\r\n    &lt;!-- title for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-225\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/Title-for-the-Toolbar-In-Android-Studio.jpg\" alt=\"title-for-the-toolbar-in-android-studio\" width=\"257\" height=\"208\" \/><\/li>\n<li><span style=\"color: #008000;\"><strong>titleTextColor:<\/strong> <\/span>This attribute is used to set the color for the title text. We can also do this programmatically by using setTitleTextColor() method.Below we set the red color for the dispalyed title text.\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:titleTextColor=\"#F00\"\r\n    app:title=\"AbhiAndroid\"&gt;\r\n    &lt;!-- title text color for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-226\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/Title-Text-Color-for-the-Toolbar-In-Android-Studio.jpg\" alt=\"title-text-color-for-the-toolbar-in-android-studio\" width=\"247\" height=\"200\" \/><\/li>\n<li><span style=\"color: #008000;\"><strong>subtitle:<\/strong><\/span> This attribute is used to set the sub title for the Toolbar. We can also do this programmatically by using setSubtitle() method.<br \/>\nBelow we set the sub title for the Toolbar.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:subtitle=\"AbhiAndroid\"&gt;\r\n    &lt;!-- sub title for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>subtitleTextColor:<\/strong> <\/span>This method is used to set the color for the sub title. We can also do this programmatically by using setSubtitleTextColor() method. Below we set the red color for displayed subtitle text.\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:subtitle=\"AbhiAndroid\"\r\n    app:subtitleTextColor=\"#F00\"&gt;\r\n    &lt;!-- sub title text  color for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<\/li>\n<\/ul>\n<h4><strong>Important Methods of Toolbar:<\/strong><\/h4>\n<p>Let\u2019s we discuss some important methods of Toolbar that may be called in order to add Action icons manage the Toolbar.<\/p>\n<p><span style=\"color: #ff0000;\"><strong>Important Note:<\/strong><\/span> To understand below functions of Toolbar properly please do read 2nd example in\u00a0this article.<\/p>\n<ul>\n<li><strong><span style=\"color: #008000;\">setLogo(int resId):<\/span><\/strong> This method is used to add a logo drawable from a resource id. Below we set a logo drawable in our Toolbar.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\ntoolbar.setLogo(R.drawable.logo); \/\/ setting a logo in toolbar\r\n<\/pre>\n<\/li>\n<li><strong><span style=\"color: #008000;\">setLogo(Drawable drawable):<\/span><\/strong> This method is also used to add a logo drawable in our Toolbar. In this method we set a drawable object. Below we set a drawable logo in our Toolbar.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\ntoolbar.setLogo(getResources().getDrawable(R.drawable.logo)); \/\/ setting a logo in toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>getLogo():<\/strong><\/span> This method is used to get the logo icon from Toolbar. This method returns the Drawable logo which we set using setLogo() method.<br \/>\nBelow we firstly set the drawable logo and then get the same from Toolbar.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setLogo(getResources().getDrawable(R.drawable.logo)); \/\/ setting a logo in toolbar\r\nDrawable drawableLogo=toolbar.getLogo(); \/\/ get the drawable logo from Toolbar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setLogoDescription(CharSequence description):<\/strong><\/span> This method is used to set a description for the drawable logo of Toolbar.<br \/>\nBelow we set the description for Toolbar&#8217;s logo.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setLogo(getResources().getDrawable(R.drawable.logo)); \/\/ setting a logo in toolbar\r\ntoolbar.setLogoDescription(\"LOGO\"); \/\/ set description for the logo\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setLogoDescription(int resId):<\/strong> <\/span>This method is also used to set the description for drawable logo of the Toolbar. This method set the description from string file.<br \/>\nBelow we set the description for Toolbar&#8217;s logo.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setLogo(getResources().getDrawable(R.drawable.logo)); \/\/ setting a logo in toolbar\r\ntoolbar.setLogoDescription(getResources().getString(R.string.descrition)); \/\/ set description for the logo\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>getLogoDescription():<\/strong> <\/span>This method is used to get the description of toolbar&#8217;s logo. This method returns description in CharSequence object. Below we firstly set the description for logo of Toolbar and then get the same from Toolbar.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setLogo(getResources().getDrawable(R.drawable.logo)); \/\/ setting a logo in Toolbar\r\ntoolbar.setLogoDescription(\"LOGO\"); \/\/ set description for the logo\r\nCharSequence logoDescription=toolbar.getLogoDescription(); \/\/ get the logo description from Toolbar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setNavigationIcon(int resId):<\/strong><\/span> This method is used to set the icon from resource id to the Toolbar&#8217;s navigation button.<br \/>\nBelow we set a navigation icon in the Toolbar from resource id.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setNavigationIcon(R.mipmap.ic_launcher); \/\/ set icon for navigation button\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setNavigationIcon(Drawable icon):<\/strong><\/span> This method is also used to set the icon for Navigation Buttton. In this method we set the icon from drawable object.Below we set drawable icon for Navigation Button.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setNavigationIcon(getResources().getDrawable(R.drawable.logo)); \/\/ setting a navigation icon in Toolbar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>getNavigationIcon():<\/strong> <\/span>This method is used to get the navigation icon from Toolbar which we set using setNavigationIcon() method. This method returns a drawable object. Below we firstly set the navigation icon and then get the same from Toolbar.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setNavigationIcon(getResources().getDrawable(R.drawable.logo)); \/\/ setting a navigation icon in Toolbar\r\nDrawable navigationIcon = toolbar.getNavigationIcon(); \/\/ get navigation icon from Toolbar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setTitle(int resId):<\/strong> <\/span>This method is used to set the Title for the Toolbar. In this method we set the title form string file.<br \/>\nBelow we set the title for the Toolbar.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar4\r\ntoolbar.setTitle(getResources().getString(R.string.title)); \/\/ setting a title for this Toolbar\r\n<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setTitle(CharSequence title):<\/strong><\/span> This method is also used to set the title for the Toolbar.<br \/>\nBelow we set the title for the Toolbar.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar4\r\ntoolbar.setTitle(\"AbhiAndroid\"); \/\/ setting a title for this Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setSubtitle(int resId):<\/strong> <\/span>This method is used to set the sub Title for the Toolbar. In this method we set the sub title form string file.<br \/>\nBelow we set the sub title for the Toolbar.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar4\r\ntoolbar.setSubtitle(getResources().getString(R.string.subTitle)); \/\/ setting a sub title for this Toolbar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setSubtitle(CharSequence subtitle):<\/strong><\/span> This method is also used to set the sub title for the Toolbar.<br \/>\nBelow we set the sub title for the Toolbar.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar4\r\ntoolbar.setSubtitle(\"AbhiAndroid\"); \/\/ setting a sub title for this Toolbar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>getTitle():<\/strong><\/span> This method is used to get the title of the Toolbar. This method returns CharSequence object for the title displayed on Toolbar.Below we firstly set the title and then get the same from Toolbar.\n<pre> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar4\r\ntoolbar.setTitle(\"AbhiAndroid\"); \/\/ setting a title for this Toolbar\r\nCharSequence title=toolbar.getTitle(); \/\/ get the displayed title from Toolbar.<\/pre>\n<\/li>\n<li><strong><span style=\"color: #008000;\">getSubtitle():<\/span>\u00a0<\/strong>This method is used to get the sub title of the Toolbar. This method returns CharSequence object for the sub title displayed on Toolbar.Below we firstly set the sub title and then get the same from Toolbar.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar4\r\ntoolbar.setSubtitle(\"AbhiAndroid\"); \/\/ setting a sub title for this Toolbar\r\nCharSequence title=toolbar.getSubtitle(); \/\/ get the displayed sub title from Toolbar.\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setNavigationContentDescription(CharSequence description):<\/strong><\/span> This method is used to set the description for the Navigation Button.<br \/>\nBelow we set the description for Navigation Button.<\/p>\n<pre> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\ntoolbar.setNavigationIcon(R.drawable.logo); \/\/ set icon for navigation button\r\ntoolbar.setNavigationContentDescription(\"Navigation\"); \/\/ setting description for navigation button<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setNavigationContentDescription(int resId):<\/strong><\/span> This method is used to set the description for the Navigation Button. This method sets the description from string file.Below we set the description od the navigation button.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\ntoolbar.setNavigationIcon(R.drawable.logo); \/\/ set icon for navigation button\r\ntoolbar.setNavigationContentDescription(getResources().getString(R.string.description)); \/\/ setting description for navigation button.<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong> getNavigationContentDescription():<\/strong><\/span> This method is used to get the currently configured content description for the navigation button view. This method returns the description in CharSequence object which we set using setNavigationContentDescription() method.Below we firstly set the description of navigation button and then get the same from Toolbar.\n<pre> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\ntoolbar.setNavigationIcon(R.drawable.logo); \/\/ set icon for navigation button\r\ntoolbar.setNavigationContentDescription(\"Navigation\"); \/\/ setting description for navigation button\r\nCharSequence description=toolbar.getNavigationContentDescription(); \/\/ get navigation button description<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setTitleTextColor(int color):<\/strong> <\/span>This method is used to set the text color for the displayed title.<br \/>\nBelow we set the red color for the displayed text of title.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ntoolbar.setTitle(\"AbhiAndroid\"); \/\/ setting a title for this Toolbar\r\ntoolbar.setTitleTextColor(Color.RED); \/\/ set title text color for Toolbar.<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong>setSubtitleTextColor(int color):<\/strong> <\/span>This method is used to set the text color for the displayed sub title.<br \/>\nBelow we set the red color for the displayed sub text of title.<\/p>\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\ntoolbar.setSubtitle(\"AbhiAndroid\"); \/\/ setting a sub title for this Toolbar\r\ntoolbar.setSubtitleTextColor (Color.RED); \/\/ set sub title text color for Toolbar<\/pre>\n<\/li>\n<li><span style=\"color: #008000;\"><strong> setNavigationOnClickListener(View.OnClickListener listener):<\/strong> <\/span>It sets a listener to respond to navigation events. This listener is used to handle the click event on navigation button. Below we implement setNavigationOnClickListener event on Toolbar that handles on click event of navigation button.\n<pre>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\ngetSupportActionBar().setDisplayShowTitleEnabled(false); \/\/ hide the current title from the Toolbar\r\n\/\/ implement setNavigationOnClickListener event\r\ntoolbar.setNavigationOnClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View view) {\r\n\/\/ add code here that execute on click of navigation button\r\n}\r\n});\r\n<\/pre>\n<\/li>\n<\/ul>\n<hr \/>\n<h4><strong>Toolbar Example 1 In Android Studio:<\/strong><\/h4>\n<p>Below is the first example of Toolbar in which we create a Toolbar and replace it with ActionBar. In this examle we add action icons in Toobar and on click of navigation Button of Toolbar we open a Navigation Drawer. In our main layout we use Drawer Layout and Navigation View. Drawer Layout is the root layout in which we include a Toolbar and also define a FrameLayout and a Navigation View. In Navigation View we set the items from menu file and FrameLayout is used to replace the Fragments on the click of menu items. Whenever a user click on menu item, Fragment is replaced according to menu item\u2019s id and a toast message with menu item title is displayed on the screen. We also create three Fragments that should be replaced on click of menu items<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"http:\/\/www.mediafire.com\/file\/r8f2dx8dskw1kyx\/ToolbarExample.zip\/file\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ?<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-229\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/ToolBar-Example-In-Android-Studio.gif\" alt=\"toolbar-example-in-android-studio\" width=\"272\" height=\"416\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 1:<\/strong><\/span> Create a new project and name it ToolbarExample.<br \/>\n<span style=\"color: #008000;\"><strong>Step 2:<\/strong><\/span> Open Gradle Scripts &gt; build.gradle and add Design support library dependency. If you are on the latest version of Android Studio you don&#8217;t need to add a compiled dependency for Appcombat v7 21 library if not then please make sure you add the line below in your gradel build dependencies.<br \/>\napply plugin: &#8216;com.android.application&#8217;<\/p>\n<pre>android {\r\ncompileSdkVersion 24\r\nbuildToolsVersion \"24.0.1\"\r\ndefaultConfig {\r\napplicationId \"abhiandroid.toolbarexample\"\r\nminSdkVersion 16\r\ntargetSdkVersion 24\r\nversionCode 1\r\nversionName \"1.0\"\r\n}\r\nbuildTypes {\r\nrelease {\r\nminifyEnabled false\r\nproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n}\r\n}\r\n}\r\ndependencies {\r\ncompile fileTree(dir: 'libs', include: ['*.jar'])\r\ntestCompile 'junit:junit:4.12'\r\ncompile 'com.android.support:appcompat-v7:24.1.1'\r\ncompile 'com.android.support:design:24.1.1' \/\/ design support Library\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> ActionBars are replaced with Toolbar so we can still use ActionBar but in our example we are going to make a Toolbar so go to your style.xml file and change the theme to &#8220;Theme.AppCompat.Light.NoActionBar\u201d This theme helps us get rid of the ActionBar so we can make a Toolbar.<\/p>\n<pre>    &lt;!-- Base application theme. --&gt;\r\n    &lt;style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\"&gt;\r\n        &lt;!-- Customize your theme here. --&gt;\r\n        &lt;item name=\"colorPrimary\"&gt;@color\/colorPrimary&lt;\/item&gt;\r\n        &lt;item name=\"colorPrimaryDark\"&gt;@color\/colorPrimaryDark&lt;\/item&gt;\r\n        &lt;item name=\"colorAccent\"&gt;@color\/colorAccent&lt;\/item&gt;\r\n    &lt;\/style&gt;\r\n&lt;\/resources&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong> <\/span>Now let&#8217;s talk about the color scheme for our application. Open your color.xml file from values folder. In this XML file colorPrimary is the primary color for the app and colorPrimaryDark color is the color of the status bar. We can easily change our colors from this file.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;resources&gt;\r\n    &lt;color name=\"colorPrimary\"&gt;#3F51B5&lt;\/color&gt;\r\n    &lt;color name=\"colorPrimaryDark\"&gt;#303F9F&lt;\/color&gt;\r\n    &lt;color name=\"colorAccent\"&gt;#FF4081&lt;\/color&gt;\r\n&lt;\/resources&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 5:<\/strong> <\/span>Open res -&gt; layout -&gt; activity_main.xml (or) main.xml and add following code:<br \/>\nIn this step we define a DrawerLayout that is the parent layout in which we include a toolbar.xml file and also define a FrameLayout and a Navigation View. In Navigation View we set the items from menu file named \u201cnav_items\u201d and FrameLayout is used to replace the Fragments on the click of menu items.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v4.widget.DrawerLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/drawer_layout\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:fitsSystemWindows=\"true\"\r\n    tools:context=\".MainActivity\"&gt;\r\n    &lt;LinearLayout\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:orientation=\"vertical\"&gt;\r\n        &lt;!-- include your toolbar layout--&gt;\r\n        &lt;include layout=\"@layout\/toolbar\" \/&gt;\r\n        &lt;!-- Let's add fragment --&gt;\r\n        &lt;FrameLayout\r\n            android:id=\"@+id\/frame\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\" \/&gt;\r\n    &lt;\/LinearLayout&gt;\r\n    &lt;!--\r\n         Navigation view to show the menu items\r\n    --&gt;\r\n    &lt;android.support.design.widget.NavigationView\r\n        android:id=\"@+id\/navigation\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_gravity=\"start\"\r\n        app:menu=\"@menu\/nav_items\" \/&gt;\r\n&lt;\/android.support.v4.widget.DrawerLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 6:<\/strong><\/span> Open res -&gt; menu -&gt; nav_items.xml and add following code. Here we define the menu items.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\r\n    &lt;group android:checkableBehavior=\"single\"&gt;\r\n        &lt;!--\r\n                Add menu items here\r\n                Menu items with icon and Title\r\n        --&gt;\r\n        &lt;item\r\n            android:id=\"@+id\/first\"\r\n            android:icon=\"@mipmap\/ic_launcher\"\r\n            android:title=\"First Menu\" \/&gt;\r\n        &lt;item\r\n            android:id=\"@+id\/second\"\r\n            android:icon=\"@mipmap\/ic_launcher\"\r\n            android:title=\"Second Menu\" \/&gt;\r\n        &lt;item\r\n            android:id=\"@+id\/third\"\r\n            android:icon=\"@mipmap\/ic_launcher\"\r\n            android:title=\"Third Menu\" \/&gt;\r\n    &lt;\/group&gt;\r\n&lt;\/menu&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 7:<\/strong> <\/span>Now create a xml layouts by right clicking on res\/layout -&gt; New -&gt; Layout Resource File and name it toolbar.xml<br \/>\nIn this file we set the background color, navigation button and tilte for the Toolbar.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;android.support.v7.widget.Toolbar xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:background=\"@color\/colorPrimary\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    app:navigationIcon=\"@drawable\/menu_icon\"\r\n    app:title=\"AbhiAndroid\"\r\n    app:titleTextColor=\"#FFF\"&gt;\r\n    &lt;!-- navigation button and title for the Toolbar--&gt;\r\n&lt;\/android.support.v7.widget.Toolbar&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 8:<\/strong> <\/span>Open src -&gt; package -&gt; MainActivity.java<br \/>\nIn this step we open the MainActivity and add the code for initiates the views(DrawerLayout, Toolbar,NavigationView and other views). In this we replace the ActionBar with our ToolBar by using <span style=\"color: #008000;\">setSupportActionBar()<\/span> method and then implment setNavigationOnClickListener event and add the code to open the drawer on click of navigation button. After that we implement setNavigationItemSelectedListener event on NavigationView so that we can replace the Fragments according to menu item\u2019s id and a toast message with menu item\u2019s title is displayed on the screen. In this I have added comments in code to help you to understand the code easily so make you read the comments.<\/p>\n<pre>package abhiandroid.toolbarexample;\r\nimport android.os.Bundle;\r\nimport android.support.design.widget.NavigationView;\r\nimport android.support.v4.app.Fragment;\r\nimport android.support.v4.app.FragmentTransaction;\r\nimport android.support.v4.widget.DrawerLayout;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.support.v7.widget.Toolbar;\r\nimport android.view.Gravity;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.Toast;\r\npublic class MainActivity extends AppCompatActivity {\r\nDrawerLayout dLayout;\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\nToolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\n\r\n\/\/ implement setNavigationOnClickListener event\r\ntoolbar.setNavigationOnClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View view) {\r\ndLayout.openDrawer(Gravity.LEFT);\r\n}\r\n});\r\nsetNavigationDrawer(); \/\/ call method\r\n}\r\nprivate void setNavigationDrawer() {\r\ndLayout = (DrawerLayout) findViewById(R.id.drawer_layout); \/\/ initiate a DrawerLayout\r\nNavigationView navView = (NavigationView) findViewById(R.id.navigation); \/\/ initiate a Navigation View\r\n\/\/ implement setNavigationItemSelectedListener event on NavigationView\r\nnavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {\r\n@Override\r\npublic boolean onNavigationItemSelected(MenuItem menuItem) {\r\nFragment frag = null; \/\/ create a Fragment Object\r\nint itemId = menuItem.getItemId(); \/\/ get selected menu item's id\r\n\/\/ check selected menu item's id and replace a Fragment Accordingly\r\nif (itemId == R.id.first) {\r\nfrag = new FirstFragment();\r\n} else if (itemId == R.id.second) {\r\nfrag = new SecondFragment();\r\n} else if (itemId == R.id.third) {\r\nfrag = new ThirdFragment();\r\n}\r\n\/\/ display a toast message with menu item's title\r\nToast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_SHORT).show();\r\nif (frag != null) {\r\nFragmentTransaction transaction = getSupportFragmentManager().beginTransaction();\r\ntransaction.replace(R.id.frame, frag); \/\/ replace a Fragment with Frame Layout\r\ntransaction.commit(); \/\/ commit the changes\r\ndLayout.closeDrawers(); \/\/ close the all open Drawer Views\r\nreturn true;\r\n}\r\nreturn false;\r\n}\r\n});\r\n}\r\n} \r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 9:<\/strong> <\/span>Now we need 3 fragments and 3 xml layouts. So create three fragments by right click on your package folder and <a href=\"\/androidstudio\/how-to-create-new-java-class-in-android-studio\">create classes<\/a> and name them as FirstFragment, SecondFragment and ThirdFragment and add the following code respectively.<\/p>\n<p><span style=\"color: #008000;\">FirstFragment.class<\/span><\/p>\n<pre>package abhiandroid.toolbarexample;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\npublic class FirstFragment extends Fragment {\r\n@Override\r\npublic View onCreateView(LayoutInflater inflater, ViewGroup container,\r\nBundle savedInstanceState) {\r\n\/\/ Inflate the layout for this fragment\r\nreturn inflater.inflate(R.layout.fragment_first, container, false);\r\n}\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\">SecondFragment.class<\/span><\/p>\n<pre>package abhiandroid.toolbarexample;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\npublic class SecondFragment extends Fragment {\r\n@Override\r\npublic View onCreateView(LayoutInflater inflater, ViewGroup container,\r\nBundle savedInstanceState) {\r\n\/\/ Inflate the layout for this fragment\r\nreturn inflater.inflate(R.layout.fragment_second, container, false);\r\n}\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\">ThirdFrament.class<\/span><\/p>\n<pre>package abhiandroid.toolbarexample;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\npublic class ThirdFragment extends Fragment {\r\n@Override\r\npublic View onCreateView(LayoutInflater inflater, ViewGroup container,\r\nBundle savedInstanceState) {\r\n\/\/ Inflate the layout for this fragment\r\nreturn inflater.inflate(R.layout.fragment_third, container, false);\r\n}\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 10:<\/strong> <\/span>Now create 3 xml layouts by right clicking on res\/layout -&gt; New -&gt; Layout Resource File and name them as fragment_first, fragment_ second and fragment_third and add the following code in respective files.<br \/>\nHere we will design the basic simple UI by using TextView in all xml\u2019s.<\/p>\n<p><span style=\"color: #008000;\">fragment_first.xml<\/span><\/p>\n<pre>&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.toolbarexample.FirstFragment\"&gt;\r\n    &lt;TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"First Fragment\"\r\n        android:textSize=\"25sp\" \/&gt;\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\">fragment_second.xml<\/span><\/p>\n<pre>&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.toolbarexample.SecondFragment\"&gt;\r\n    &lt;TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"Second Fragment\"\r\n        android:textSize=\"25sp\" \/&gt;\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\">fragment_third.xml<\/span><\/p>\n<pre>&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.toolbarexample.ThirdFragment\"&gt;\r\n    &lt;TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"Third Fragment\"\r\n        android:textSize=\"25sp\" \/&gt;\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Output:<\/strong><\/span><\/p>\n<p>Now run the App and you will see Menu icon and &#8220;AbhiAndroid&#8221; text written at the top which is created using Toolbar. Now click on menu and three items inside it will be shown. Now click on any of them and corresponding to it layout will open up.<\/p>\n<hr \/>\n<h4><strong>Toolbar Example 2 In Android Studio:<\/strong><\/h4>\n<p>Below is the simple example of Toolbar in which we create a Toolbar and replace it with our ActionBar. In this example we set Logo, title and menu for Toolbar. In our main layout we create a Toolbar and in Activity get the reference of Toolbar and set the title and logo on it. In this we use Activity&#8217;s overrided method onCreateOptionsMenu to set the menu items from menu file and onOptionsItemSelected to set click listeners on menu item&#8217;s. On click of menu item the title of menu is displayed on the screen with the help of Toast.<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"https:\/\/github.com\/abhisheksaini4\/SimpleToolbarExample\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ?<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-237\" src=\"\/materialdesign\/wp-content\/uploads\/2017\/01\/ToolBar-Example-In-Android-Studio.png\" alt=\"ToolBar Example In Android Studio\" width=\"251\" height=\"269\" \/><br \/>\n<span style=\"color: #008000;\"><strong>Step 1:<\/strong> <\/span>Create a new project and name it SimpleToolbarExample.<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2:<\/strong> <\/span>Open Gradle Scripts &gt; If you are on the latest version of Android Studio you don&#8217;t need to add a compiled dependency for Appcombat v7 21 library if not then please make sure you add the line below in your gradel build dependencies.<\/p>\n<pre>apply plugin: 'com.android.application'\r\nandroid {\r\ncompileSdkVersion 24\r\nbuildToolsVersion \"24.0.1\"\r\ndefaultConfig {\r\napplicationId \"abhiandroid.com.simpletoolbarexample\"\r\nminSdkVersion 16\r\ntargetSdkVersion 24\r\nversionCode 1\r\nversionName \"1.0\"\r\n}\r\nbuildTypes {\r\nrelease {\r\nminifyEnabled false\r\nproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n}\r\n}\r\n}\r\ndependencies {\r\ncompile fileTree(dir: 'libs', include: ['*.jar'])\r\ntestCompile 'junit:junit:4.12'\r\ncompile 'com.android.support:appcompat-v7:24.1.1'\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> ActionBars are replaced with Toolbar so we can still use ActionBar but in our example we are going to make a Toolbar so go to your style.xml file and change the theme to &#8220;Theme.AppCompat.Light.NoActionBar\u201d This theme helps us get rid of the ActionBar so we can make a Toolbar.<\/p>\n<pre>&lt;resources&gt;\r\n    &lt;!-- Base application theme. --&gt;\r\n    &lt;style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\"&gt;\r\n        &lt;!-- Customize your theme here. --&gt;\r\n        &lt;item name=\"colorPrimary\"&gt;@color\/colorPrimary&lt;\/item&gt;\r\n        &lt;item name=\"colorPrimaryDark\"&gt;@color\/colorPrimaryDark&lt;\/item&gt;\r\n        &lt;item name=\"colorAccent\"&gt;@color\/colorAccent&lt;\/item&gt;\r\n    &lt;\/style&gt;\r\n&lt;\/resources&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong><\/span> Now let&#8217;s talk about the color scheme for our application. Open your color.xml file from values folder. In this XML file colorPrimary is the primary color for the app and colorPrimaryDark color is the color of the status bar. We can easily change our colors from this file.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;resources&gt;\r\n    &lt;color name=\"colorPrimary\"&gt;#3F51B5&lt;\/color&gt;\r\n    &lt;color name=\"colorPrimaryDark\"&gt;#303F9F&lt;\/color&gt;\r\n    &lt;color name=\"colorAccent\"&gt;#FF4081&lt;\/color&gt;\r\n&lt;\/resources&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 5: <\/strong><\/span>Open res -&gt; layout -&gt; activity_main.xml (or) main.xml and add following code:<br \/>\nIn this step we define a Toolbar in our main XML file and set it&#8217;s background color and theme.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.com.simpletoolbarexample.MainActivity\"&gt;\r\n    &lt;android.support.v7.widget.Toolbar\r\n        android:id=\"@+id\/toolbar\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:background=\"@color\/colorPrimary\"\r\n        android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\" \/&gt;\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 6:<\/strong><\/span> Open res -&gt; menu -&gt; menu_main.xml and add following code:<br \/>\nIn this step we create 3 menu items that will be displayed on Toolbar.<\/p>\n<pre>&lt;menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    tools:context=\".MainActivity\"&gt;\r\n    &lt;!--\r\n        Menu item's that displayed on Toolbar.\r\n    --&gt;\r\n    &lt;item\r\n        android:id=\"@+id\/action_settings\"\r\n        android:orderInCategory=\"100\"\r\n        android:title=\"@string\/action_settings\"\r\n        app:showAsAction=\"never\" \/&gt;\r\n    &lt;item\r\n        android:id=\"@+id\/action_search\"\r\n        android:icon=\"@drawable\/ic_search\"\r\n        android:orderInCategory=\"200\"\r\n        android:title=\"Search\"\r\n        app:showAsAction=\"ifRoom\" \/&gt;\r\n    &lt;item\r\n        android:id=\"@+id\/action_user\"\r\n        android:icon=\"@drawable\/user\"\r\n        android:orderInCategory=\"300\"\r\n        android:title=\"User\"\r\n        app:showAsAction=\"ifRoom\" \/&gt;\r\n&lt;\/menu&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 7:<\/strong> <\/span>Open src -&gt; package -&gt; MainActivity.java<br \/>\nIn this step we open the MainActivity and add the code for initiates the Toolbar.. In this we replace the ActionBar with our ToolBar by using setSupportActionBar() method and also set the tiltle and logo for the Toolbar. After that we implement Activity&#8217;s overrided method onCreateOptionsMenu to set the menu items from menu file and onOptionsItemSelected to set click listeners on menu item&#8217;s. On click of menu item the tiltle of menu is displayed on the screen with the help of Toast. In this I have added comments in code to help you to understand the code easily so make sure you read the comments.<\/p>\n<pre>package abhiandroid.com.simpletoolbarexample;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.support.v7.widget.Toolbar;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.widget.Toast;\r\npublic class MainActivity extends AppCompatActivity {\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\nToolbar toolbar = (Toolbar) findViewById(R.id.toolbar); \/\/ get the reference of Toolbar\r\ntoolbar.setTitle(\"AbhiAndroid\"); \/\/ set Title for Toolbar\r\ntoolbar.setLogo(R.drawable.android); \/\/ set logo for Toolbar\r\nsetSupportActionBar(toolbar); \/\/ Setting\/replace toolbar as the ActionBar\r\n}\r\n\/\/ Activity's overrided method used to set the menu file\r\n@Override\r\npublic boolean onCreateOptionsMenu(Menu menu) {\r\n\/\/ Inflate the menu; this adds items to the action bar if it is present.\r\ngetMenuInflater().inflate(R.menu.menu_main, menu);\r\nreturn true;\r\n}\r\n\/\/ Activity's overrided method used to perform click events on menu items\r\n@Override\r\npublic boolean onOptionsItemSelected(MenuItem item) {\r\n\/\/ Handle action bar item clicks here. The action bar will\r\n\/\/ automatically handle clicks on the Home\/Up button, so long\r\n\/\/ as you specify a parent activity in AndroidManifest.xml.\r\nint id = item.getItemId();\r\n\/\/noinspection SimplifiableIfStatement\r\n\/\/ Display menu item's title by using a Toast.\r\nif (id == R.id.action_settings) {\r\nToast.makeText(getApplicationContext(), \"Setting Menu\", Toast.LENGTH_SHORT).show();\r\nreturn true;\r\n} else if (id == R.id.action_search) {\r\nToast.makeText(getApplicationContext(), \"Search Menu\", Toast.LENGTH_SHORT).show();\r\nreturn true;\r\n} else if (id == R.id.action_user) {\r\nToast.makeText(getApplicationContext(), \"User Menu\", Toast.LENGTH_SHORT).show();\r\nreturn true;\r\n}\r\nreturn super.onOptionsItemSelected(item);\r\n}\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Output:<\/strong><\/span><\/p>\n<p>Now run the App and you will see Toolbar at the top. Click on it and message created using Toast will be displayed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Android Toolbar is similar to an ActionBar(now called as App Bars). Toolbar is a Viewgroup that can be placed at anywhere in the Layout. We can easily replace an ActionBar with Toolbar. Toolbar was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop). Material Design brings lot of new features in &hellip; <a href=\"https:\/\/abhiandroid.com\/materialdesign\/toolbar\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">ToolBar Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-162","page","type-page","status-publish","hentry"],"psp_head":"<title>ToolBar Tutorial With Example In Android Studio \u2013 Android Material Design Tutorial<\/title>\r\n<meta name=\"description\" content=\"Learn Toolbar following our complete tutorial with example In Android Studio. Toolbar is similar to an ActionBar(now called as App Bars).\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/materialdesign\/toolbar\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":4,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/162\/revisions"}],"predecessor-version":[{"id":754,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/162\/revisions\/754"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/media?parent=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}