How to make master-detail layout for small mobile devices

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.

WHAT IS A MASTER DETAIL LAYOUT:

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).

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:

Screenshot from 2016-01-06 22:14:45

Step 1- Create a first Basic Activity

The first Basic Activity, ItemListActivity, is the starting point for loading fragments for the screen.

ItemListActivity.java