Updated with cardview!

app/build.gradle

@@ -25,5 +25,6 @@ dependencies {
     compile 'com.android.support:appcompat-v7:22.1.0'
     compile 'com.android.support:support-annotations:22.1.0'
     compile 'com.android.support:gridlayout-v7:22.1.0'
+    compile 'com.android.support:cardview-v7:22.1.1'
     compile 'com.google.android.gms:play-services-gcm:7.0.0'
 }

app/src/main/java/com/example/android/sunshine/app/DetailFragment.java

@@ -24,6 +24,7 @@ import android.support.v4.app.LoaderManager;
 import android.support.v4.content.CursorLoader;
 import android.support.v4.content.Loader;
 import android.support.v7.app.AppCompatActivity;
+import android.support.v7.widget.CardView;
 import android.support.v7.widget.ShareActionProvider;
 import android.support.v7.widget.Toolbar;
 import android.view.LayoutInflater;
@@ -32,6 +33,7 @@ import android.view.MenuInflater;
 import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.ViewParent;
 import android.widget.ImageView;
 import android.widget.TextView;
 
@@ -177,14 +179,20 @@ public class DetailFragment extends Fragment implements LoaderManager.LoaderCall
                     null
             );
         }
-        getView().setVisibility(View.INVISIBLE);
+        ViewParent vp = getView().getParent();
+        if ( vp instanceof CardView ) {
+            ((View)vp).setVisibility(View.INVISIBLE);
+        }
         return null;
     }
 
     @Override
     public void onLoadFinished(Loader<Cursor> loader, Cursor data) {
         if (data != null && data.moveToFirst()) {
-            getView().setVisibility(View.VISIBLE);
+            ViewParent vp = getView().getParent();
+            if ( vp instanceof CardView ) {
+                ((View)vp).setVisibility(View.VISIBLE);
+            }
 
             // Read weather condition ID from cursor
             int weatherId = data.getInt(COL_WEATHER_CONDITION_ID);

app/src/main/res/layout-sw600dp-port/activity_main.xml

@@ -52,14 +52,15 @@
         android:layout_width="match_parent"
         android:layout_height="@dimen/details_app_bar_overlap" />
 
-    <FrameLayout
+    <android.support.v7.widget.CardView
         android:id="@+id/weather_detail_container"
         android:layout_height="wrap_content"
         android:layout_width="match_parent"
-        android:elevation="@dimen/appbar_elevation"
         android:layout_below="@id/sunshine_logo_imageview"
-        android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material"
+        android:layout_marginLeft="@dimen/abc_list_item_padding_horizontal_material"
-        android:paddingRight="@dimen/abc_list_item_padding_horizontal_material"
+        android:layout_marginRight="@dimen/abc_list_item_padding_horizontal_material"
+        app:cardElevation="@dimen/detail_card_elevation"
+        app:cardPreventCornerOverlap="false"
         />
 
     <fragment

app/src/main/res/layout-sw600dp/activity_main.xml

@@ -13,13 +13,14 @@
      See the License for the specific language governing permissions and
      limitations under the License.
  -->
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <LinearLayout
+    <RelativeLayout
         android:id="@+id/appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -32,33 +33,34 @@
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
+            android:layout_alignParentTop="true"
+            android:layout_alignParentLeft="true"
+
             app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
 
-        <!-- These FrameLayouts are only there to line the image up with the keyline correctly, since
+        <!-- This Space is only there to line the image up with the
-             we cannot do addition of dimensions/attributes otherwise -->
+             keyline correctly, since we cannot do addition of
-        <FrameLayout
+             dimensions/attributes otherwise -->
-            android:layout_width="wrap_content"
+        <android.support.v4.widget.Space
-            android:layout_height="wrap_content"
+            android:id="@+id/sunshineLogoAlign"
+            android:layout_width="@dimen/list_icon"
+            android:layout_height="0dp"
             android:layout_marginLeft="@dimen/abc_list_item_padding_horizontal_material"
             android:layout_marginStart="@dimen/abc_list_item_padding_horizontal_material"
-            >
+            android:layout_alignParentLeft="true"
-            <FrameLayout
+            android:layout_below="@id/toolbar"/>
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginLeft="@dimen/list_icon"
-                android:layout_marginStart="@dimen/list_icon"
-                android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material"
-                android:paddingStart="@dimen/abc_list_item_padding_horizontal_material">
 
         <ImageView
             android:layout_width="wrap_content"
             android:layout_height="?attr/listPreferredItemHeight"
             android:layout_gravity="center_vertical"
+            android:layout_below="@id/sunshineLogoAlign"
+            android:layout_marginLeft="@dimen/abc_list_item_padding_horizontal_material"
+            android:layout_marginStart="@dimen/abc_list_item_padding_horizontal_material"
+            android:layout_toRightOf="@id/sunshineLogoAlign"
             android:src="@drawable/ic_logo"
             android:contentDescription="@string/app_name"/>
-            </FrameLayout>
+    </RelativeLayout>
-        </FrameLayout>
-    </LinearLayout>
 
     <!-- This is used as a strut to create two columns in our RelativeLayout -->
     <android.support.v4.widget.Space
@@ -79,11 +81,11 @@
         android:layout_below="@id/appbar"
         tools:layout="@android:layout/list_content" />
 
-    <!-- We set elevation here only so the detail view doesn't get occluded
+    <!-- This is used to give the card the appropriate margin
-         by the AppBar -->
+         list_item_extra_padding +
-
+         abc_list_item_padding_horizontal_material -->
-    <FrameLayout
+    <android.support.v7.widget.Space
-        android:id="@+id/weather_detail_container"
+        android:id="@+id/cardviewAligner"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_alignLeft="@id/layout_center"
@@ -94,9 +96,20 @@
         android:elevation="@dimen/appbar_elevation"
         android:layout_marginRight="@dimen/list_item_extra_padding"
         android:layout_marginEnd="@dimen/list_item_extra_padding"
-        android:paddingRight="@dimen/abc_list_item_padding_horizontal_material"
+        />
-        android:paddingEnd="@dimen/abc_list_item_padding_horizontal_material"
+        <android.support.v7.widget.CardView
-        android:paddingBottom="@dimen/detail_container_bottom_margin"
+            android:id="@+id/weather_detail_container"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_alignLeft="@id/cardviewAligner"
+            android:layout_alignRight="@id/cardviewAligner"
+            android:layout_alignTop="@id/cardviewAligner"
+            android:layout_alignBottom="@id/cardviewAligner"
+            android:layout_marginRight="@dimen/abc_list_item_padding_horizontal_material"
+            android:layout_marginEnd="@dimen/abc_list_item_padding_horizontal_material"
+            android:layout_marginBottom="@dimen/detail_container_bottom_margin"
+            app:cardElevation="@dimen/detail_card_elevation"
+            app:cardPreventCornerOverlap="false"
             />
 
 </RelativeLayout>