Making the project

First things first. In order to utilize the Material Design we first have to  import the 'com.android.support:design' library.We also need 'com.android.support:support-v13' because it includes classes FragmentStatePagerAdapter and AppCompatActivity which we're going to use in modernizing the application;for example  replacing 'ArticleDetailActivity extends ActionBarActivity' with 'ArticleDetailActivity extends AppCompatActivity' or the deprecated ActionBar with the newer Toolbar.

v13 also includes the necessary components of v7, which nevertheless could be added manually:

That's just the beginning though as the mock app needs a lot of work and there's so many touches that should be applied that I wondered where to start from.

So taking it from the beginning, the launching activity ArticleListActivity contains a Recyclerview with Card view children, each one of them framing an article's title with its accompanying picture. These articles are loaded from a JSON file which is obtained from making a network call into an HTTP endpoint.

After the data is fetched it is subsequently saved in a local database that is accessible through CursorLoaders and from there loaded into the main Recyclerview producing:

(picture of the retouched app)

When clicking on such a tile/card view, the next activity, ArticleDetailActivity gets displayed.It expands on the article clicked by displaying a bigger "photo" at its head (as part of its Toolbar component) and the full "body" text at the lower, detailed end.

This all happens within ArticleDetailActivity's ArticleDetailFragment child instances. These instances are themselves framed within a ViewPager's FragmentStatePagerAdapter (referenced from v13) which in turn uses the CursorLoader to initialize them and attach a separate article to each one of them. This is done for enabling the swiping effect in navigating back and forth between the articles. Check the Architectural overview picture below for a better understanding:

At any one time the FragmentStatePagerAdapter will contain at least three ArticleDetailFragment instances as three separate articles loaded in memory, one for the currently viewed one, one for the previous and one for the next. This is yet another example of how Fragments facilitate reusability.

This old FragmentStatePagerAdapter code doesn't need to be updated. In addition, I also save the position of the currently viewed article, mStartId, and its title's color, mColour.

This is necessary because rotating the device will make the Viewpager start afresh, resetting the position of the FragmentStatePagerAdapter hence that of the articles as well. This means that we lose the article we were at before rotating. To return to it, we save its state to reinstate it afterwards.

ArticleDetailActivity activity is itself called through an Intent filter the moment we click on a tile in parent ArticleListActivity. This filter is registered in manifest.xml:

Notice the use of:

This is what a forum mentor had to say about it : 

The important thing to understand here is the difference between an implicit intent and explicit intent. The intent filter enables you to open an Activity via implicit intent. In simpler terms, it says if you can open xyz type of files then open the xyz activity.Explicit Intent will always open the ArticleDetailActivity Activity. 

Let's take a look at a simple example.

If a user tries to open a pdf file then the Activity with the above filter will be displayed. 

While android:mimeType=
"vnd.android.cursor.item/vnd.com.example.xyzreader.items"
is called a MIME Type which basic purpose is to identify a file type. The first part is the type and the second part is the subtype. Text/html would mean a file with text type with html subtype. 

The benefit of an implicit intent is that if there is another app on your device which can open vnd.android.cursor.item/vnd.com.example.xyzreader.items
then it will also be dispalyed when you click on the RecyclerView item.

This wraps it up beautifully.

Let's satisfy a few more requirements, mainly add colour to the tiles, stretch the photos, and add motion so that when a tile is clicked it uses a 'move up' effect.Finally let's also add a Transition from the ArticleListActivity towards ArticleDetailActivity.

These instructions combined give the following effect :

ArticleListActivity also gets a major layout facelift, switching from a simple FrameLayout to a CoordinatorLayout:

CoordinatorLayout is a super-powered FrameLayout. CoordinatorLayout is intended for two primary use cases: 

As a top-level application decor or chrome layout.

As a container for a specific interaction with one or more child views.

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.

Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

This last paragraph means that I can tie separate components together so that an action on one, triggers a chain reaction to the other. In this case scrolling the RecyclerView up makes the Toolbar move out of the screen and when scrolling down into the screen.