The Fragment class acts as a wrapper for multiple views so that it can be reusable according to the screen estate. The Activity class is modified to enable the hosting of multiple Fragments at once, therefore, the FragmentActivity Class was introduced. The FragmentActivity Class is simply a subclass of the Activity class that enables adding, detaching, hiding, and showing of Fragments through the use of FragmentTransaction. These FragmentTransactions were created and committed to update the Fragments contained in the FragmentActivity. They are made available through the Mono.Android.Support.V4 libraries. Consider a master-detail app scenario as follows:
To accomplish this scenario, you have to collaborate FragmentActivity, list fragment, and detail fragment. This allows reuse of the fragments in the phone where the list is shown as navigable activities where as in the tablet the list and detail fragments should be shown side by side to make use of the extra screen estate. To learn more about Fragments design pattern and Fragment Activity, please consult the Android Developers documentation.
Crosslight for Android is shipped with FragmentActivity Class that supports this scenario. This section will elaborate the case of Inventory Tracker (MyInventory.Android.Fragments) in order to gain better understanding of how you can utilize Crosslight for Android to accomplish this feat.The following illustrates how the Inventory Tracker project is outlined.
You have previously learned that in order to use fragments in tablets you will need a FragmentActivity to host the Fragment. Therefore, the ItemListActivity will act as the host for ItemListFragment for the item list, as well as ItemDetailActivity will act as the host for ItemDetailFragment for the item detail.
The ItemListActivity is as follows
The SearchableListFragmentActivity Class, as it name implies, is a ListFragmentActivity that is search-enabled. The constructor must call base and give the appropriate values of:
- First parameter: The layout file should the list use, in this case, the Resource.Layout.activityitemlist.
- Second parameter: The fragment id that will fill the left side of the screen (the item list).
- Third parameter: The fragment id that will fill the right side of the screen (the item detail).
The ItemListFragment is as follows:
This is actually the contents of the fragment, which is a ListFragment that consumes the ItemListViewModel from the shared application layer. The item list part is taken care of. Let’s move on to the right side, the item detail section. The ItemDetailActivity and ItemDetailFragment are as follows:
Note that we must also call base and give the appropriate parameters to the base:
- First parameter: the layout XML file to inflate to the right side (the item detail).
- Second parameter: the id of the container on which the fragment should inflate to.
Now that the item detail and item list are ready, how to make them appear as list in phone and split view in tablet? The secret lies in Resource/Values-large/refs.xml.
The values-large folder is an identifier native to the Android platform, which basically instructs the Android platform to load values when the screen estate is large. For more information on supporting loading different resources based on screen sizes, see the Supporting Multiple Screens and Supporting Different Screen Sizes document on the Android Developers documentation website. The refs.xml value contains an item element with name activityitemlist. If you may recall, this activityitemlist is the layout defined in the ItemListActivtiy. This enables the Android platform to differentiate the view to be loaded when a phone or a tablet is detected. Therefore, the refs.xml instructs the Android platform to load the layout activitymasterdetail whenever the screen estate is large, in this case, a tablet is detected.
Let’s take a look at the activitymasterdetail.xml in the Resources/Layout folder.
This is the layout which will be inflated when the layout is detected as large. Notice that it contains a LinearLayout with a Fragment on the left side and a FrameLayout on the right side, just like activityitemlist and activityitemdetail XML layout. Running the Inventory Tracker sample will gives different result on phone and on tablet.