[and] Style, color, layout

android/AndroidManifest.xml

@@ -15,7 +15,8 @@
         android:theme="@style/AppTheme" >
         <activity
             android:name="com.example.travelguide.ArticleInfoListActivity"
-            android:label="@string/app_name" >
+            android:label="@string/app_name"
+            android:windowSoftInputMode="adjustResize" >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

android/res/layout/activity_articleinfo_twopane.xml

@@ -3,7 +3,6 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:baselineAligned="false"
-    android:divider="?android:attr/dividerHorizontal"
     android:orientation="horizontal"
     android:showDividers="middle"
     tools:context=".ArticleInfoListActivity" >
@@ -22,15 +21,13 @@
     <fragment
         android:id="@+id/articleinfo_list"
         android:name="com.example.travelguide.ArticleInfoListFragment"
-        android:layout_width="0dp"
+        android:layout_width="@dimen/searchPanelWidth"
         android:layout_height="match_parent"
-        android:layout_weight="2"
         tools:layout="@android:layout/list_content" />
 
     <FrameLayout
         android:id="@+id/articleinfo_detail_container"
-        android:layout_width="0dp"
-        android:layout_height="match_parent"
-        android:layout_weight="3" />
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
 
-</LinearLayout>
+</LinearLayout>

android/res/layout/fragment_articleinfo_detail.xml

@@ -4,15 +4,30 @@
     android:layout_height="match_parent"
     android:orientation="vertical" >
 
-    <TextView
-        android:id="@+id/articleinfo_detail"
-        style="?android:attr/textAppearanceLarge"
+    <RelativeLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_weight="0"
-        android:padding="16dp"
-        android:textIsSelectable="true"
-        tools:context=".ArticleInfoDetailFragment" />
+        android:layout_height="@dimen/search_bar"
+        android:background="@color/dark_grey" >
+
+        <TextView
+            android:id="@+id/title"
+            style="@android:style/TextAppearance.Medium"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_centerInParent="true"
+            android:textColor="@color/yellow"
+            android:textStyle="bold" />
+
+        <ImageView
+            android:id="@+id/showList"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_alignParentRight="true"
+            android:layout_centerVertical="true"
+            android:paddingLeft="@dimen/pad_mid"
+            android:paddingRight="@dimen/pad_mid"
+            android:src="@android:drawable/ic_menu_search" />
+    </RelativeLayout>
 
     <WebView
         android:id="@+id/webView"

android/res/layout/fragment_articleinfo_list.xml

@@ -4,39 +4,66 @@
     android:layout_height="match_parent"
     android:orientation="vertical" >
 
+    <RelativeLayout
+        android:id="@+id/header"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/search_bar"
+        android:background="@color/dark_grey"
+        android:paddingRight="@dimen/pad_mid" >
+
+        <TextView
+            style="@android:style/TextAppearance.Medium"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_centerInParent="true"
+            android:text="@string/app_name"
+            android:textColor="@color/yellow"
+            android:textStyle="bold" />
+
+        <ImageView
+            android:id="@+id/about"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_alignParentRight="true"
+            android:layout_centerVertical="true"
+            android:src="@android:drawable/ic_dialog_info" />
+    </RelativeLayout>
+
     <LinearLayout
         android:id="@+id/searchBar"
         android:layout_width="match_parent"
         android:layout_height="@dimen/search_bar"
         android:background="@color/grey"
         android:gravity="center_vertical"
-        android:orientation="horizontal" >
-
-        <ImageView
-            android:id="@+id/searchIcon"
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:layout_weight="0"
-            android:paddingLeft="@dimen/pad_small"
-            android:paddingRight="@dimen/pad_small"
-            android:src="@android:drawable/ic_menu_search" />
+        android:orientation="horizontal"
+        android:paddingLeft="@dimen/pad_mid"
+        android:paddingRight="@dimen/pad_mid" >
 
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_margin="@dimen/pad_small"
-            android:background="@color/dark_grey"
+            android:background="@android:color/white"
             android:gravity="center_vertical" >
 
+            <ImageView
+                android:id="@+id/searchIcon"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:layout_weight="0"
+                android:paddingLeft="@dimen/pad_small"
+                android:paddingRight="@dimen/pad_small"
+                android:src="@android:drawable/ic_menu_search" />
+
             <EditText
                 android:id="@+id/searchText"
-                style="@android:style/TextAppearance.Medium.Inverse"
+                style="@android:style/TextAppearance.Medium"
                 android:layout_width="match_parent"
                 android:layout_height="@dimen/search_text"
                 android:layout_weight="1"
                 android:background="@null"
                 android:gravity="center_vertical"
-                android:hint="Enter Search Term"
+                android:hint="Tap To Search"
                 android:inputType="textCapWords"
                 android:paddingLeft="@dimen/pad_small"
                 android:paddingRight="@dimen/pad_small"

android/res/layout/listitem_article_info.xml

@@ -2,6 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="@dimen/thumb_size"
+    android:baselineAligned="false"
     android:gravity="center_vertical"
     android:orientation="horizontal" >
 
@@ -21,7 +22,7 @@
         <View
             android:layout_width="match_parent"
             android:layout_height="@dimen/thumb_sep"
-            android:layout_gravity="top"
+            android:layout_gravity="bottom"
             android:background="@color/thumb_sep" />
     </FrameLayout>
 
@@ -38,7 +39,6 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:paddingLeft="@dimen/pad_mid"
-            android:text="London"
             android:textStyle="bold" />
 
         <TextView
@@ -46,8 +46,7 @@
             style="@android:style/TextAppearance.Small"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:paddingLeft="@dimen/pad_mid"
-            android:text="Europe -> UK" />
+            android:paddingLeft="@dimen/pad_mid" />
     </LinearLayout>
 
 </LinearLayout>

android/res/values-large/dimens.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <dimen name="searchPanelWidth">400dp</dimen>
+    
+    <dimen name="thumb_size">90dp</dimen>
+    <dimen name="search_bar">70dp</dimen>
+    <dimen name="search_text">50dp</dimen>
+    <dimen name="pad_mid">12dp</dimen>
+    <dimen name="pad_small">6dp</dimen>
+    <dimen name="thumb_sep">5dp</dimen>
+
+</resources>

android/res/values-sw600dp/dimens.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    
+    <dimen name="searchPanelWidth">400dp</dimen>
+    
+    <dimen name="thumb_size">90dp</dimen>
+    <dimen name="search_bar">70dp</dimen>
+    <dimen name="search_text">50dp</dimen>
+    <dimen name="pad_mid">12dp</dimen>
+    <dimen name="pad_small">6dp</dimen>
+    <dimen name="thumb_sep">5dp</dimen>
+    
+</resources>

android/res/values/colors.xml

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-  <color name="dark_grey">#333333</color>
-  <color name="grey">#666666</color>
-  <color name="thumb_sep">#FFFF00</color>
-</resources>
+
+    <color name="dark_grey">#333333</color>
+    <color name="grey">#666666</color>
+    <color name="thumb_sep">#FDF12B</color>
+    <color name="yellow">#FDF12B</color>
+
+</resources>

android/src/com/example/travelguide/ArticleInfoDetailFragment.java

@@ -1,17 +1,20 @@
 package com.example.travelguide;
 
+import static com.example.travelguide.util.Utils.hideView;
+import static com.example.travelguide.util.Utils.showView;
+import android.content.Intent;
 import android.graphics.Bitmap;
 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
+import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
 import android.widget.TextView;
 
-import static com.example.travelguide.util.Utils.*;
-
+import com.example.travelguide.ArticleInfoListFragment.OnListIconClickedListener;
 import com.example.travelguide.article.ArticleInfo;
 import com.example.travelguide.article.ArticlePathFinder;
 import com.example.travelguide.article.AssetsArticlePathFinder;
@@ -21,19 +24,23 @@ import com.example.travelguide.article.AssetsArticlePathFinder;
  * either contained in a {@link ArticleInfoListActivity} in two-pane mode (on
  * tablets) or a {@link ArticleInfoDetailActivity} on handsets.
  */
-public class ArticleInfoDetailFragment extends Fragment
+public class ArticleInfoDetailFragment extends Fragment implements OnClickListener
 {
+
   public static final String ARTICLE_INFO = "article_info";
 
   private ArticleInfo mItem;
 
   private View mRootView;
   private WebView mWebView;
-
+  private TextView mTitle;
+  private View mShowList;
   private View mProgressContainer;
 
   private ArticlePathFinder mFinder;
 
+  private OnListIconClickedListener mIconClickedListener;
+
   /**
    * Mandatory empty constructor for the fragment manager to instantiate the
    * fragment (e.g. upon screen orientation changes).
@@ -46,29 +53,48 @@ public class ArticleInfoDetailFragment extends Fragment
   {
     super.onCreate(savedInstanceState);
 
-    if (getArguments().containsKey(ARTICLE_INFO))
-      mItem = (ArticleInfo) getArguments().getSerializable(ARTICLE_INFO);
-
-    if (mItem == null)
-      throw new RuntimeException("ArticleInfo must be specified.");
+    final Bundle args = getArguments();
+    if (args != null && args.containsKey(ARTICLE_INFO))
+      mItem = (ArticleInfo) args.getSerializable(ARTICLE_INFO);
 
     mFinder = new AssetsArticlePathFinder();
   }
 
+  public void setArticleInfo(ArticleInfo info)
+  {
+    mItem = info;
+
+    final String url = mFinder.getPath(mItem);
+    mTitle.setText(mItem.getName());
+
+    if (mWebView.getUrl() != url)
+      mWebView.loadUrl(url);
+  }
+
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
   {
     mRootView = inflater.inflate(R.layout.fragment_articleinfo_detail, container, false);
     mWebView = (WebView) mRootView.findViewById(R.id.webView);
     mProgressContainer = mRootView.findViewById(R.id.progressContainer);
+    mTitle = (TextView) mRootView.findViewById(R.id.title);
+    mShowList = mRootView.findViewById(R.id.showList);
 
-    ((TextView) mRootView.findViewById(R.id.articleinfo_detail)).setText(mItem.getName());
     mWebView.setWebViewClient(new TgWebViewClient());
-    mWebView.loadUrl(mFinder.getPath(mItem));
+    mShowList.setOnClickListener(this);
 
     return mRootView;
   }
 
+  @Override
+  public void onViewCreated(View view, Bundle savedInstanceState)
+  {
+    super.onViewCreated(view, savedInstanceState);
+
+    if (mItem != null)
+      setArticleInfo(mItem);
+  }
+
   class TgWebViewClient extends WebViewClient
   {
     @Override
@@ -88,4 +114,24 @@ public class ArticleInfoDetailFragment extends Fragment
     }
   }
 
+  @Override
+  public void onClick(View v)
+  {
+    if (mShowList.getId() == v.getId())
+    {
+      if (mIconClickedListener != null)
+        mIconClickedListener.onIconClicked();
+      else
+      {
+        final Intent i = new Intent(getActivity(), ArticleInfoListActivity.class);
+        startActivity(i);
+      }
+    }
+  }
+
+  public void setOnIconClickedListener(OnListIconClickedListener listener)
+  {
+    mIconClickedListener = listener;
+  }
+
 }

android/src/com/example/travelguide/ArticleInfoListActivity.java

@@ -5,6 +5,7 @@ import android.os.Bundle;
 import android.support.v4.app.FragmentActivity;
 
 import com.example.travelguide.article.ArticleInfo;
+import com.example.travelguide.article.ArticlePathFinder;
 
 /**
  * An activity representing a list of ArticleInfos. This activity has different
@@ -22,7 +23,8 @@ import com.example.travelguide.article.ArticleInfo;
  * {@link ArticleInfoListFragment.Callbacks} interface to listen for item
  * selections.
  */
-public class ArticleInfoListActivity extends FragmentActivity implements ArticleInfoListFragment.Callbacks
+public class ArticleInfoListActivity extends FragmentActivity implements ArticleInfoListFragment.Callbacks,
+    ArticleInfoListFragment.OnListIconClickedListener, ArticleInfoListFragment.OnFirstLoadListener
 {
 
   /**
@@ -31,6 +33,9 @@ public class ArticleInfoListActivity extends FragmentActivity implements Article
    */
   private boolean mTwoPane;
 
+  private ArticleInfoListFragment mArtInfoListFragment;
+  private ArticleInfoDetailFragment mArtInfoDetailFragment;
+
   @Override
   protected void onCreate(Bundle savedInstanceState)
   {
@@ -40,11 +45,20 @@ public class ArticleInfoListActivity extends FragmentActivity implements Article
     if (findViewById(R.id.articleinfo_detail_container) != null)
     {
       mTwoPane = true;
-      ((ArticleInfoListFragment) getSupportFragmentManager().findFragmentById(R.id.articleinfo_list))
-          .setActivateOnItemClick(true);
-    }
 
-    // TODO: If exposing deep links into your app, handle intents here.
+      mArtInfoListFragment = (ArticleInfoListFragment) getSupportFragmentManager().findFragmentById(R.id.articleinfo_list);
+      mArtInfoListFragment.setActivateOnItemClick(true);
+      mArtInfoListFragment.setOnFirstLoadListener(this);
+      mArtInfoListFragment.setHeaderVisible(false);
+
+      mArtInfoDetailFragment = new ArticleInfoDetailFragment();
+      mArtInfoDetailFragment.setOnIconClickedListener(this);
+
+      getSupportFragmentManager()
+        .beginTransaction()
+        .add(R.id.articleinfo_detail_container, mArtInfoDetailFragment)
+        .commit();
+    }
   }
 
   /**
@@ -56,12 +70,8 @@ public class ArticleInfoListActivity extends FragmentActivity implements Article
   {
     if (mTwoPane)
     {
-      Bundle arguments = new Bundle();
-      arguments.putSerializable(ArticleInfoDetailFragment.ARTICLE_INFO, info);
-      ArticleInfoDetailFragment fragment = new ArticleInfoDetailFragment();
-
-      fragment.setArguments(arguments);
-      getSupportFragmentManager().beginTransaction().replace(R.id.articleinfo_detail_container, fragment).commit();
+      mArtInfoDetailFragment.setArticleInfo(info);
+      toogleListVisible();
     }
     else
     {
@@ -70,4 +80,30 @@ public class ArticleInfoListActivity extends FragmentActivity implements Article
       startActivity(detailIntent);
     }
   }
+
+  @Override
+  public void onIconClicked()
+  {
+    toogleListVisible();
+  }
+
+  public void toogleListVisible()
+  {
+    if (mArtInfoListFragment.isVisible())
+      getSupportFragmentManager()
+        .beginTransaction()
+        .hide(mArtInfoListFragment)
+        .commit();
+    else
+      getSupportFragmentManager()
+        .beginTransaction()
+        .show(mArtInfoListFragment)
+        .commit();
+  }
+
+  @Override
+  public void onLoad(ArticleInfo info)
+  {
+    mArtInfoDetailFragment.setArticleInfo(info);
+  }
 }

android/src/com/example/travelguide/ArticleInfoListFragment.java

@@ -1,6 +1,8 @@
 package com.example.travelguide;
 
-import static com.example.travelguide.util.Utils.*;
+import static com.example.travelguide.util.Utils.hideIf;
+import static com.example.travelguide.util.Utils.hideView;
+import static com.example.travelguide.util.Utils.showView;
 import android.app.Activity;
 import android.os.Bundle;
 import android.support.v4.app.ListFragment;
@@ -33,12 +35,31 @@ import com.example.travelguide.widget.StorageArticleInfoAdapter;
 public class ArticleInfoListFragment extends ListFragment implements LoaderCallbacks<Storage>, TextWatcher,
     OnClickListener
 {
+  public interface OnListIconClickedListener
+  {
+    public void onIconClicked();
+  }
+
+  public interface OnFirstLoadListener
+  {
+    void onLoad(ArticleInfo info);
+  }
+
+  private OnFirstLoadListener mOnFirstLoad;
+  private boolean mFirstLoad = true;
+
+  public void setOnFirstLoadListener(OnFirstLoadListener l)
+  {
+    mOnFirstLoad = l;
+  }
+
   private View mRootView;
   private TextView mSearchText;
   private View mCross;
 
   private View mListContainer;
   private View mPorgressContainer;
+  private View mHeader;
 
   /**
    * The serialization (saved instance state) Bundle key representing the
@@ -179,6 +200,7 @@ public class ArticleInfoListFragment extends ListFragment implements LoaderCallb
 
     mListContainer = mRootView.findViewById(R.id.listContainer);
     mPorgressContainer = mRootView.findViewById(R.id.progressContainer);
+    mHeader = mRootView.findViewById(R.id.header);
     // setup listeners
     mSearchText.addTextChangedListener(this);
     mCross.setOnClickListener(this);
@@ -186,6 +208,11 @@ public class ArticleInfoListFragment extends ListFragment implements LoaderCallb
     return mRootView;
   }
 
+  public void setHeaderVisible(boolean visible)
+  {
+    hideIf(!visible, mHeader);
+  }
+
   /**
    * 
    * LOADER
@@ -213,10 +240,15 @@ public class ArticleInfoListFragment extends ListFragment implements LoaderCallb
   @Override
   public void onLoadFinished(Loader<Storage> loader, Storage result)
   {
-
     setListAdapter(new StorageArticleInfoAdapter(result, getActivity()));
     hideView(mPorgressContainer);
     showView(mListContainer);
+
+    if (mFirstLoad && mOnFirstLoad != null && result.getResultSize() > 0)
+    {
+      mFirstLoad = false;
+      mOnFirstLoad.onLoad(result.getArticleInfoByIndex(0));
+    }
   }
 
   @Override
@@ -224,6 +256,7 @@ public class ArticleInfoListFragment extends ListFragment implements LoaderCallb
   {
     hideView(mPorgressContainer);
     showView(mListContainer);
+
   }
 
   /**