Android Action Bar In A Dialog Using ToolBar

Android Action Bar In A Dialog

Android Toolbar widget is one of the new UI components available in AppCompat v21. This widget works just like an ActionBar, the only difference is, it can be placed any where on screen. The Android Toolbar widget can also be used to replace the original ActionBar in your Activity. This feature will open many new possibilities in your application. Like you can place multiple action bars on a screen, place action bars / toolbars with some specific dimensions- not covering the whole width of the screen. Also it solves one of the major issue that I faced during development, i.e. placing an Android action bar in a dialog fragment. Now with Android’s ToolBar widget this can be done very easily.

Android Toolbar widget supports a logo image, a title and a subtitle. It also supports a navigation button, custom views and more importantly an action menu. Now the question is how to display an action bar in a dialog using Toolbar widget.

Android ActionBar in a DialogFragment

Android Toolbar is available through the AppCompat v21 support library. Therefore this widget can be used with Android API 7 and above without any problems. On the other hand DialogFragment class is already available in the support v4 library. Hence an Android ToolBar can be used to display the action bar in a dialog with support from API 7 onwards. To start off please make sure you have AppCompat dependencies in place:


Next you may need to include Android ToolBar in the dialog layout:


As you can see in the highlighted lines above, I have used the tag to display an action bar in the dialog’s layout. Android Toolbar widget can also be used with the styles defined in your app. As shown above, please use the android:background attribute to specify the color of action bar. Also app:popupTheme and android:theme attributes can be used to display the standard action bar themes as shown. Further lets define the DialogFragment class.

As you can see in the above class, in onCreateDialog method I have applied, no title bar feature. This basically removes the header of DialogFragment. Now we can add our own header, a Toolbar which would act just like an Android ActionBar in the DialogFragment. I would also like to highlight that you can also receive arguments in this dialog from the calling activity by using getArguments() method, as shown above.

Android ActionBar Dialog


Using Android Toolbar instead of ActionBar

As I mentioned, the new Android Toolbar can also be used as a normal action bar in your fragment or activity. But to avoid conflict, first you may need to disable the standard action bar, by using a Theme.AppCompat.NoActionBar theme. Else you would see two action bars. In this example I have specified this theme in the styles.xml as only one activity was there. If you need to use Android ToolBar as an action bar for a specific activity, please use this theme only for that activity. Now lets have a look at styles.xml:


Now that our activity will not be having an action bar, we need to define a Toolbar in the layout as shown:

Now lets have a look at the main activity:


As you can see in the above class, that I have used setSupportActionBar(toolbar) method to set the toolbar as default ActionBar. By doing this no extra code needs to be written for using the standard onCreateOptionsMenu and onOptionsItemSelected callback methods. Also please note: in onClick method, I am sending the arguments to ActionBarDialog class, where they are supposed to be used accordingly in the DialogFragment.

Android Toolbar Example



To conclude I would say Android Toolbar widget is a great addition in the AppCompat class. This not only helps in showing an Android action bar in a dialog, but also helps us in many other ways. For example, when multiple action bars are required on a screen, or an action bar of variable width is required. Also Android Toolbar can be used in any layout, to display a fully functional ActionBar/Toolbar. Hope this helps. Connect with us on Facebook, Google+ and Twitter for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.

Leave a comment

Your email address will not be published. Required fields are marked *

2 thoughts on “Android Action Bar In A Dialog Using ToolBar