Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
A master/detail flow is an interface design concept whereby a list of items (referred to as the master list) is displayed to the user.
A master-detail layout is a responsive layout for tablets and phones, that allows users to view a list of items (the master view), and drill down into each item for more details (the detail view).
Or
A master/detail flow is an interface design concept whereby a list of items (referred to as the master list) is displayed to the user. On selecting an item from the list, additional information relating to that item is then presented to the user within a details panel.
On small devices (i.e. phones), the control should behave similarly to a navigation control, where the user only sees one screen at a time and has the ability to navigate forwards backwards between the master and detail views. On larger devices (i.e. tablets), the control should be a split-screen view so the user sees the master view down the left edge of the screen with the detail view filling the remaining space.
But here I am showing, how to make a master-detail view for small devices. The following screenshot shows the view on mobile-phone:
The first Basic Activity, ItemListActivity, is the starting point for loading fragments for the screen.
ItemListActivity.java
We need one layout that will display both the list fragment and the detail fragment.
activity_item_twopane.xml
Layouts can use a <fragment> tag to indicate a specific fragment to load. However, this only works for fixed fragments. For dynamic fragments, such as the detail fragment that will display different information based on what was chosen, we use a container view to indicate where the fragment should go in the layout. The most common container to use is a <FrameLayout>, as it only contains one child element and can then be positioned as a block anywhere in the containing layout.
FrameLayout is one of the useful layout provided by android system, which allows User Interface widgets to be overlapped with each other.
The list fragment handles displaying our array of things. The list needs to contain all of the items from the data source and it also needs to handle taps on specific items to show the details. However, since a fragment isn’t an activity, it should pass up events that might potentially change the screen to the controlling Activity class.
A tap that occurs in dual pane mode will load a fragment in the other pane on the same screen.
Note: Most commonly, this communication is managed through an interface class defined in the fragment.
Here is the entire code for the ItemListFragment class, including a safe callback mechanism:
ItemListFragment.java
Now we need to return to the controlling Activity(means ItemListActivity.java) class so that it candle handle the callback.
Add the callback support to the first Activity class, ItemListActivity, by having it implement the ItemListFragment. Callbacks interface created earlier. Then implement the onItemSelected() method. Here is the fully updated class:
Step 5: Create the dummy Activity
The content for the example as it currently stands is defined by the DummyContent class file. Begin, therefore, by selecting the DummyContent.java file and reviewing the code. At the bottom of the file is a declaration for a class named DummyItem which is currently able to store two String objects representing a content string and an ID. DummyItem as follows:
DummyContent.java
Now we need to add the fragments to the manifest file, right? Actually, no. Unlike Activity classes, Fragments are not registered in the manifest file. So, simply add the activity classes to the manifest file and you’re good to go.
Here’s the sample manifest file:
AndroidManifest.xml
After following above steps, you can run this app.
And can implement master-detail flow on your application.
A master/detail user interface consists of a master list of items which, when selected, displays additional information about that selection within a detail panel.
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.
Markus Walter
Founder, Das Apartment Living
USA
India
Global
Name
Email
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.