Insider's Guide To Udacity Android Developer Nanodegree Part 3 - Making the Baking App
Insider's Guide To Udacity Android Developer Nanodegree Part 3 - Making the Baking App
Written by Nikos Vaggalis   
Monday, 03 July 2017
Article Index
Insider's Guide To Udacity Android Developer Nanodegree Part 3 - Making the Baking App
Step 1 - Fragments
Fragments In Action
Layouts
Fragments
Step 2 - Libraries & Networking
POJO To Parcelables
Step 3 - Adding Exoplayer
Step 4 - Widgets
Step 5 - The Widget Provider
Step 6 - UI Testing
Step 7 - Testing Intents

 

Step 1 - Fragments
As already said, Fragments are introduced with the Android Me app, whose behavior depends on the device it is viewed on. So when viewed on a Phone where the space is limited, the app is broken down into separate activities, each one utilized in its own screen. On a Tablet with more space, screens are split side by side so that they display more content, that way offering a much more flexible navigation.

image2

 

In fact, this is such a common pattern that it has a name. It's called the Master-Detail flow, where the master list of the items takes up an entire Phone screen but only the left portion of a Tablet screen. The detailed content pane, which often shows more information about a selected item in the master list, takes up the entire Phone screen, but only the right portion of a larger Tablet screen.

image3AndroidMe app

The same is required by Baking App which has to adopt the responsive design mindset in order to adapt to variable screen sizes and orientations. To make that clearer, let's take a look at the required app mock layouts:

image4

Phone mock layout


As apparent, you need three separate activities on Phone, while one Master-Detail view on Tablet:

image5

Tablet mock layouts

In the Tablet case, the left screen portion will host the list of a single recipe's ingredients and underneath it a RecyclerViewer with a CardView layout containing the titles of the associated step necessary to execute the recipe.The right pane then will host the videos in which Miriam demonstrates the execution of the chosen step, while underneath that Video view there's going to be a TextView with a short description.

In order to have such modular design we have to turn our attention to fragments.And that is the big deal with fragments, as self contained pieces of UI they can be combined into a single activity or reused as single fragments in multiple activities. So on a Phone device I'm going to use two activities, RecipeActivity and RecipeDetailActivity. RecipeActivity is going to host a RecipeFragment which in turn hosts a RecyclerViewer containing the titles of the available recipes.

image6

Phone/Portrait,RecipeActivity/RecipeFragment


Upon pressing/clicking on a recipe, a new activity should open, the RecipeDetailActivity which should contain another fragment, the RecipeDetailFragment which in turn should host two other views. A scrollable TextView containing the list of the chosen recipe's ingredients and underneath it a RecyclerViewer with a CardView layout which card elements contain the titles of the associated steps that are necessary to execute the recipe.

image7

Phone/Portrait,RecipeDetailActivity/RecipeDetailFragment


Upon pressing/clicking on a step, the RecipeDetailActivity should stay in place but replace the RecipeDetailFragment with the RecipeStepDetailFragment which should contain the video with Miriam demonstrating how to execute the chosen step. Underneath the video there should be the TextView with the a short description.

image8

Phone/Portrait,RecipeDetailActivity/RecipeStepDetailFragment
 


Last Updated ( Tuesday, 04 July 2017 )
 
 

   
Banner
RSS feed of all content
I Programmer - full contents
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.