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

 

In contrast, when on a Tablet device the launcher activity, RecipeActivity. should act as the Tablet's did:

image9Tablet/Landscape,RecipeActivity/RecipeFragment

 

but the RecipeDetailActivity should host both RecipeDetailFragment and RecipeStepDetailFragment side by side, in order to implement the Master-Detail flow. Again, that's the magic of fragments, in allowing for UI component reuse as deemed necessary.

 

image10

Tablet/Landscape,RecipeDetailActivity/RecipeDetailFragment/RecipeStepDetailFragment

Since the RecipeFragment won't be changing during the runtime of its host RecipeActivity, we can consider it a Static Fragment, which means that we can treat it and load it as a simple design time layout like every other.The two other fragments however, RecipeDetailFragment and RecipeStepDetailFragment, are added and replaced by the FragmentManager (the component burdened with this sort of tasks) during the runtime of their respective host RecipeDetailActivity, as such they are considered dynamic and will instead be enclosed by and loaded into their so called Fragment Containers, fragment_container and fragment_container2.


/****
RecipeActivity on both Phone and Tablet,
with one static fragment, RecipeFragment,
loaded within the <fragment> tags
****/

<LinearLayout xmlns:android=
            "http://schemas.android.com/apk/res/android"
    android:id="@+id/recipe_linear_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorActivity"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <fragment
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recipe_fragment_body_part"
        android:name=
                          "com.example.android.recipe.ui.RecipeFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

  


/****
RecipeDetailActivity on Phone, with two dynamic fragments
RecipeDetailFragment which gets  replaced by
RecipeStepDetailFragment, so a single
fragment_container is used
****/

<LinearLayout xmlns:android=
                  "http://schemas.android.com/apk/res/android"
    android:id="@+id/recipe_linear_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorActivity"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center_horizontal">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:scaleType="centerInside"
        android:layout_height="match_parent" />

</LinearLayout>

 


/****
RecipeDetailActivity on Tablet, with two dynamic fragments,
and two fragment containers.RecipeDetailFragment attached
to fragment_container and RecipeStepDetailFragment
attached to  fragment_container2
****/

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recipe_linear_layout"
    android:tag="tablet-land"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorActivity"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center_horizontal">

    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1">

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="250dp"
            android:scaleType="centerInside"
            android:layout_height="match_parent" >

        </FrameLayout>

        <FrameLayout
            android:id="@+id/fragment_container2"
            android:scaleType="centerInside"
            android:layout_margin="25dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="25dp" />

    </LinearLayout>
</LinearLayout>


Each device has its own layouts, so on a Tablet we should load both fragment_container (for RecipeDetailFragment) and fragment_container2 (for RecipeStepDetailFragment) side by side, while on a Phone only fragment_container (for RecipeDetailFragment, which gets replaced by RecipeStepDetailFragment). Hence we need a way in code to tell case from case.The trick here is that each case has its own dedicated layout stored in the respective subfolder underneath the project's 'res' folder.



Last Updated ( Tuesday, 04 July 2017 )
 
 

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