Sometimes, we want more control over how the dialogs are displayed. We may want the dialog to be a popup on a tablet, but to be displayed as a full page on a phone.
If we are going to support Android versions prior to 3.0, we will have to install the Xamarin Support Library v7 AppCompat NuGet or component into our project.
We can use the DialogFragment instance to display either a pop-up dialog or embed it into the activity fragment navigation by using the following steps:
- If we want to embed a dialog into the view, we cannot use the alert builder but we have to use normal layouts. Therefore, we inflate a layout in the
OnCreateView()method of theDialogFragmentinstance:public class AlertFragment : AppCompatDialogFragment { public override View OnCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { var view = inflater.Inflate( Resource.Layout.DialogLayout, container, false); return view; } } - If we need to add additional features, such as a title for the dialog, we can override the
OnCreateDialog()method:public override Dialog OnCreateDialog(Bundle savedState) { var dialog = base.OnCreateDialog(savedState); dialog.SetTitle("Cool Dialog"); return dialog; } - To display the dialog as a pop-up window, we use the
Show()method on the fragment:var fragment = new AlertFragment(); fragment.Show(SupportFragmentManager, "AlertFragment");
- To embed the fragment into a view, we follow the typical fragment steps:
var fragment = new AlertFragment(); SupportFragmentManager .BeginTransaction() .SetTransition(FragmentTransaction.TransitFragmentOpen) .Replace(Resource.Id.content, fragment) .AddToBackStack(null) .Commit();
As Android devices have a wide variety of screen sizes, creating a UI involves designing for any issues that may arise in a single design. On a small-screen device, such as a mobile phone, a pop-up dialog may not be the best use of screen estate. We can make use of the flexibility of a DialogFragment instance to have the dialog appear as a fullscreen fragment.
Because the DialogFragment instance is an extension of a Fragment instance, we still have all the inherited functionality. We also get the added functionality of the view being rendered in a pop-up dialog. However, if we want to be able to embed the dialog into the normal fragment navigation, we cannot use the AlertDialog.Builder instance, or any Dialog instance, to create the UI.
While creating pop-up dialogs using the DialogFragment instance, the theme that is applied is that of the core operating system. So, when running on the older Android versions with the support libraries, the dialog will look out of place. To rectify this, we rather inherit from an extension of the base DialogFragment type, the AppCompatDialogFragment type. This type will ensure that the dialog matches the theme of the app.
As with all fragments, we inflate or create the UI in the OnCreateView() method. When we override the OnCreateView() method, we are only creating the UI for the main content of the dialog.
If we are creating a pop-up dialog, we may have to change or remove some window features such as the title. To do this, we override the OnCreateDialog() method. In this method, we first call the base method that provides the dialog. We then use this to change the dialog in the way we require.
If we add the fragment to the activity using the FragmentTransaction instance, the fragment will be embedded and will act as a normal fragment. If we invoke the Show() method on the fragment, it will appear as a pop-up dialog.
We can also combine both methods of embedded fragments and pop-up dialogs by creating the dialog separately. We can override the OnCreateView() method for when the fragment is embedded and override the OnCreateDialog() method for when the dialog is a popup.
In the OnCreateView() method, we inflate or create the view layout, but in the OnCreateDialog() method, we use the AlertDialog.Builder instance instead of calling the base method. We can also use the inflated UI in the dialog by invoking the SetView() method with the result from the OnCreateView() method. By doing this, we can provide the most flexible means of displaying the dialog, depending on how the dialog is presented.