Bug 706667 - Change AboutHomeContent layout as per design (r=blassey, a=mfinkle)

--HG--
rename : mobile/android/base/resources/layout/abouthome_addon_list_item.xml => mobile/android/base/resources/layout/abouthome_addon_row.xml
rename : mobile/android/base/resources/layout/abouthome_grid_box.xml => mobile/android/base/resources/layout/abouthome_topsite_item.xml

mobile/android/base/AboutHomeContent.java

@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Brad Lassey <blassey@mozilla.com>
+ *   Lucas Rocha <lucasr@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -52,106 +53,168 @@ import org.mozilla.gecko.db.BrowserDB.URLColumns;
 import android.app.Activity;
 import android.content.ContentResolver;
 import android.content.Context;
+import android.content.res.Configuration;
 import android.database.Cursor;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
+import android.text.SpannableString;
+import android.text.style.UnderlineSpan;
 import android.util.AttributeSet;
 import android.util.Log;
-import android.view.Display;
-import android.view.LayoutInflater;
 import android.view.View;
-import android.view.WindowManager;
 import android.widget.AdapterView;
 import android.widget.ArrayAdapter;
 import android.widget.GridView;
 import android.widget.ImageView;
-import android.widget.LinearLayout;
-import android.widget.ListAdapter;
 import android.widget.ListView;
+import android.widget.ScrollView;
 import android.widget.SimpleCursorAdapter;
 import android.widget.TextView;
 
-public class AboutHomeContent extends LinearLayout {
+public class AboutHomeContent extends ScrollView {
+    private static final String LOGTAG = "GeckoAboutHome";
+
+    private static final int NUMBER_OF_TOP_SITES_PORTRAIT = 4;
+    private static final int NUMBER_OF_TOP_SITES_LANDSCAPE = 3;
+
+    private static final int NUMBER_OF_COLS_PORTRAIT = 2;
+    private static final int NUMBER_OF_COLS_LANDSCAPE = 3;
+
+    private boolean mInflated;
+
+    private Cursor mCursor;
+    UriLoadCallback mUriLoadCallback = null;
+
+    protected SimpleCursorAdapter mTopSitesAdapter;
+    protected GridView mTopSitesGrid;
+
+    protected ArrayAdapter<String> mAddonsAdapter;
+    protected ListView mAddonsList;
+
     public interface UriLoadCallback {
         public void callback(String uriSpec);
     }
 
-    UriLoadCallback mUriLoadCallback = null;
-
-    void setUriLoadCallback(UriLoadCallback uriLoadCallback) {
-        mUriLoadCallback = uriLoadCallback;
-    }
-
     public AboutHomeContent(Context context, AttributeSet attrs) {
         super(context, attrs);
+        mInflated = false;
     }
 
-    private static final String LOGTAG = "GeckoAboutHome";
-    private static final int NUMBER_OF_TOP_SITES = 3;
-    private static final int kTileWidth = 122;
+    @Override
+    protected void onFinishInflate() {
+        super.onFinishInflate();
 
-    private Cursor mCursor;
-
-    protected ListAdapter mGridAdapter;
-    protected ArrayAdapter<String> mAddonAdapter;
-    protected GridView mGrid;
-    protected ListView mAddonList;
-
-    public void onActivityContentChanged(Activity activity) {
-        mGrid = (GridView)findViewById(R.id.grid);
-        if (mGrid == null)
+        // HACK: Without this, the onFinishInflate is called twice
+        // This issue is due to a bug when Android inflates a layout with a
+        // parent. Fixed in Honeycomb
+        if (mInflated)
             return;
 
-        mGrid.setOnItemClickListener(mGridOnClickListener);
+        mInflated = true;
 
-        // we want to do this: mGrid.setNumColumns(GridView.AUTO_FIT); but it doesn't work
-        Display display = ((WindowManager) activity.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
-        int width = display.getWidth();
-        mGrid.setNumColumns((int) Math.floor(width / kTileWidth));
-        mAddonList = (ListView)findViewById(R.id.recommended_addon_list);
-        GeckoApp.mAppContext.mMainHandler.post(new Runnable() {
-            public void run() {
-                mGrid.setAdapter(mGridAdapter);
+        mTopSitesGrid = (GridView)findViewById(R.id.top_sites_grid);
+        mTopSitesGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
+            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
+                Cursor c = (Cursor) parent.getItemAtPosition(position);
+
+                String spec = c.getString(c.getColumnIndex(URLColumns.URL));
+                Log.i(LOGTAG, "clicked: " + spec);
+
+                if (mUriLoadCallback != null)
+                    mUriLoadCallback.callback(spec);
+            }
+        });
+
+        mAddonsList = (ListView) findViewById(R.id.recommended_addons_list);
+
+        TextView allTopSitesText = (TextView) findViewById(R.id.all_top_sites_text);
+        allTopSitesText.setOnClickListener(new View.OnClickListener() {
+            public void onClick(View v) {
+                GeckoApp.mAppContext.showAwesomebar(AwesomeBar.Type.EDIT);
+            }
+        });
+
+        TextView allAddonsText = (TextView) findViewById(R.id.all_addons_text);
+        allAddonsText.setOnClickListener(new View.OnClickListener() {
+            public void onClick(View v) {
+                if (mUriLoadCallback != null)
+                    mUriLoadCallback.callback("about:addons");
             }
         });
     }
 
+    private int getNumberOfTopSites() {
+        Configuration config = getContext().getResources().getConfiguration();
+        if (config.orientation == Configuration.ORIENTATION_LANDSCAPE)
+            return NUMBER_OF_TOP_SITES_LANDSCAPE;
+        else
+            return NUMBER_OF_TOP_SITES_PORTRAIT;
+    }
 
-    private AdapterView.OnItemClickListener mGridOnClickListener = new AdapterView.OnItemClickListener() {
-        public void onItemClick(AdapterView<?> parent, View v, int position, long id)
-        {
-            onGridItemClick((GridView)parent, v, position, id);
-        }
-    };
+    private int getNumberOfColumns() {
+        Configuration config = getContext().getResources().getConfiguration();
+        if (config.orientation == Configuration.ORIENTATION_LANDSCAPE)
+            return NUMBER_OF_COLS_LANDSCAPE;
+        else
+            return NUMBER_OF_COLS_PORTRAIT;
+    }
 
     void init(final Activity activity) {
         GeckoAppShell.getHandler().post(new Runnable() {
             public void run() {
+                if (mCursor != null)
+                    activity.stopManagingCursor(mCursor);
+
                 ContentResolver resolver = GeckoApp.mAppContext.getContentResolver();
-                mCursor = BrowserDB.filter(resolver, "", NUMBER_OF_TOP_SITES);
+                mCursor = BrowserDB.filter(resolver, "", NUMBER_OF_TOP_SITES_PORTRAIT);
                 activity.startManagingCursor(mCursor);
 
-                onActivityContentChanged(activity);
-                mAddonAdapter = new ArrayAdapter<String>(activity, R.layout.abouthome_addon_list_item);
+                mTopSitesAdapter = new TopSitesCursorAdapter(activity,
+                                                             R.layout.abouthome_topsite_item,
+                                                             mCursor,
+                                                             new String[] { URLColumns.TITLE,
+                                                                            URLColumns.THUMBNAIL },
+                                                             new int[] { R.id.title, R.id.thumbnail });
+
+                if (mAddonsAdapter == null)
+                    mAddonsAdapter = new ArrayAdapter<String>(activity, R.layout.abouthome_addon_row);
+
                 GeckoApp.mAppContext.mMainHandler.post(new Runnable() {
                     public void run() {
-                        final SimpleCursorAdapter gridAdapter =
-                            new SimpleCursorAdapter(activity, R.layout.abouthome_grid_box, mCursor,
-                                                    new String[] { URLColumns.TITLE,
-                                                                   URLColumns.FAVICON,
-                                                                   URLColumns.URL,
-                                                                   URLColumns.THUMBNAIL },
-                                                    new int[] {R.id.bookmark_title, R.id.bookmark_icon, R.id.bookmark_url, R.id.screenshot});
-                        mGrid.setAdapter(gridAdapter);
-                        gridAdapter.setViewBinder(new AwesomeCursorViewBinder());
-                        mAddonList.setAdapter(mAddonAdapter);
+                        mTopSitesGrid.setNumColumns(getNumberOfColumns());
+
+                        mTopSitesGrid.setAdapter(mTopSitesAdapter);
+                        mTopSitesAdapter.setViewBinder(new TopSitesViewBinder());
+
+                        mAddonsList.setAdapter(mAddonsAdapter);
                     }
                 });
+
                 readRecommendedAddons(activity);
             }
         });
     }
 
+    public void setUriLoadCallback(UriLoadCallback uriLoadCallback) {
+        mUriLoadCallback = uriLoadCallback;
+    }
+
+    public void onActivityContentChanged(Activity activity) {
+        GeckoApp.mAppContext.mMainHandler.post(new Runnable() {
+            public void run() {
+                mTopSitesGrid.setAdapter(mTopSitesAdapter);
+            }
+        });
+    }
+
+    @Override
+    public void onConfigurationChanged(Configuration newConfig) {
+        mTopSitesGrid.setNumColumns(getNumberOfColumns());
+        mTopSitesAdapter.notifyDataSetChanged();
+
+        super.onConfigurationChanged(newConfig);
+    }
+
     InputStream getProfileRecommendedAddonsStream() {
         try {
             File profileDir = GeckoApp.mAppContext.getProfileDir();
@@ -194,7 +257,7 @@ public class AboutHomeContent extends LinearLayout {
                             try {
                                 for (int i = 0; i < array.length(); i++) {
                                     JSONObject jsonobj = array.getJSONObject(i);
-                                    mAddonAdapter.add(jsonobj.getString("name"));
+                                    mAddonsAdapter.add(jsonobj.getString("name"));
                                     Log.i("GeckoAddons", "addon #" + i +": " + jsonobj.getString("name"));
                                 }
                             } catch (Exception e) {
@@ -209,91 +272,111 @@ public class AboutHomeContent extends LinearLayout {
         });
     }
 
-    protected void onGridItemClick(GridView l, View v, int position, long id) {
-        mCursor.moveToPosition(position);
-        String spec = mCursor.getString(mCursor.getColumnIndex(URLColumns.URL));
-        Log.i(LOGTAG, "clicked: " + spec);
-        if (mUriLoadCallback != null)
-            mUriLoadCallback.callback(spec);
+    public static class TopSitesGridView extends GridView {
+        public TopSitesGridView(Context context, AttributeSet attrs) {
+            super(context, attrs);
+        }
+
+        @Override
+        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+            // This is to ensure that the GridView always has a size that shows
+            // all items with no need for scrolling.
+            int expandedHeightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
+                    MeasureSpec.AT_MOST);
+            super.onMeasure(widthMeasureSpec, expandedHeightSpec);
+        }
     }
 
-}
-class AwesomeCursorViewBinder implements SimpleCursorAdapter.ViewBinder {
-    private static final String LOGTAG = "GeckoAwesomeCursorViewBinder";
+    public class TopSitesCursorAdapter extends SimpleCursorAdapter {
+        public TopSitesCursorAdapter(Context context, int layout, Cursor c,
+                String[] from, int[] to) {
+            super(context, layout, c, from, to);
+        }
 
-    private boolean updateImage(View view, Cursor cursor, int faviconIndex) {
-        byte[] b = cursor.getBlob(faviconIndex);
-        ImageView favicon = (ImageView) view;
+        @Override
+        public int getCount() {
+            return Math.min(super.getCount(), getNumberOfTopSites());
+        }
+    }
 
-        if (b == null) {
-            favicon.setImageResource(R.drawable.favicon);
-        } else {
-            try {
-                Bitmap bitmap = BitmapFactory.decodeByteArray(b, 0, b.length);
-                favicon.setImageBitmap(bitmap);
-            } catch (OutOfMemoryError oom) {
-                Log.e(LOGTAG, "Unable to load thumbnail bitmap", oom);
-                favicon.setImageResource(R.drawable.favicon);
+    class TopSitesViewBinder implements SimpleCursorAdapter.ViewBinder {
+        private boolean updateThumbnail(View view, Cursor cursor, int thumbIndex) {
+            byte[] b = cursor.getBlob(thumbIndex);
+            ImageView thumbnail = (ImageView) view;
+
+            if (b == null) {
+                thumbnail.setImageResource(R.drawable.abouthome_topsite_placeholder);
+            } else {
+                try {
+                    Bitmap bitmap = BitmapFactory.decodeByteArray(b, 0, b.length);
+                    thumbnail.setImageBitmap(bitmap);
+                } catch (OutOfMemoryError oom) {
+                    Log.e(LOGTAG, "Unable to load thumbnail bitmap", oom);
+                    thumbnail.setImageResource(R.drawable.abouthome_topsite_placeholder);
+                }
             }
+
+            return true;
         }
 
-        return true;
+        private boolean updateTitle(View view, Cursor cursor, int titleIndex) {
+            String title = cursor.getString(titleIndex);
+            TextView titleView = (TextView) view;
+
+            // Use the URL instead of an empty title for consistency with the normal URL
+            // bar view - this is the equivalent of getDisplayTitle() in Tab.java
+            if (title == null || title.length() == 0) {
+                int urlIndex = cursor.getColumnIndexOrThrow(URLColumns.URL);
+                title = cursor.getString(urlIndex);
+            }
+
+            titleView.setText(title);
+            return true;
+        }
+
+        @Override
+        public boolean setViewValue(View view, Cursor cursor, int columnIndex) {
+            int titleIndex = cursor.getColumnIndexOrThrow(URLColumns.TITLE);
+            if (columnIndex == titleIndex) {
+                return updateTitle(view, cursor, titleIndex);
+            }
+
+            int thumbIndex = cursor.getColumnIndexOrThrow(URLColumns.THUMBNAIL);
+            if (columnIndex == thumbIndex) {
+                return updateThumbnail(view, cursor, thumbIndex);
+            }
+
+            // Other columns are handled automatically
+            return false;
+        }
     }
 
-    private boolean updateTitle(View view, Cursor cursor, int titleIndex) {
-        String title = cursor.getString(titleIndex);
-        TextView titleView = (TextView)view;
-        // Use the URL instead of an empty title for consistency with the normal URL
-        // bar view - this is the equivalent of getDisplayTitle() in Tab.java
-        if (title == null || title.length() == 0) {
-            int urlIndex = cursor.getColumnIndexOrThrow(URLColumns.URL);
-            title = cursor.getString(urlIndex);
+    public static class AddonsListView extends ListView {
+        public AddonsListView(Context context, AttributeSet attrs) {
+            super(context, attrs);
         }
 
-        titleView.setText(title);
-        return true;
+        @Override
+        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+            // This is to ensure that the ListView always has a size that shows
+            // all items with no need for scrolling.
+            int expandedHeightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
+                    MeasureSpec.AT_MOST);
+            super.onMeasure(widthMeasureSpec, expandedHeightSpec);
+        }
     }
 
-    private boolean updateUrl(View view, Cursor cursor, int urlIndex) {
-        String title = cursor.getString(urlIndex);
-        TextView urlView = (TextView)view;
-        if (title != null) {
-            int index;
-            if ((index = title.indexOf("://")) != -1)
-                title = title.substring(index + 3);
-            if (title.startsWith("www."))
-                title = title.substring(4);
-            if (title.endsWith("/"))
-                title = title.substring(0, title.length() -1);
+    public static class LinkTextView extends TextView {
+        public LinkTextView(Context context, AttributeSet attrs) {
+            super(context, attrs);
+        }
+
+        @Override
+        public void setText(CharSequence text, BufferType type) {
+            SpannableString content = new SpannableString(text + " \u00BB");
+            content.setSpan(new UnderlineSpan(), 0, text.length(), 0);
+
+            super.setText(content, BufferType.SPANNABLE);
         }
-        urlView.setText(title);
-        return true;
     }
-
-    @Override
-    public boolean setViewValue(View view, Cursor cursor, int columnIndex) {
-        int faviconIndex = cursor.getColumnIndexOrThrow(URLColumns.FAVICON);
-        if (columnIndex == faviconIndex) {
-            return updateImage(view, cursor, faviconIndex);
-        }
-
-        int titleIndex = cursor.getColumnIndexOrThrow(URLColumns.TITLE);
-        if (columnIndex == titleIndex) {
-            return updateTitle(view, cursor, titleIndex);
-        }
-
-        int urlIndex = cursor.getColumnIndexOrThrow(URLColumns.URL);
-        if (columnIndex == urlIndex) {
-            return updateUrl(view, cursor, urlIndex);
-        }
-
-        int thumbIndex = cursor.getColumnIndexOrThrow(URLColumns.THUMBNAIL);
-        if (columnIndex == thumbIndex) {
-            return updateImage(view, cursor, thumbIndex);
-        }
-
-        // Other columns are handled automatically
-        return false;
-    }
-
 }

mobile/android/base/Makefile.in

@@ -194,8 +194,8 @@ RES_LAYOUT = \
   res/layout/list_item_header.xml \
   res/layout/select_dialog_list.xml \
   res/layout/abouthome_content.xml \
-  res/layout/abouthome_grid_box.xml \
-  res/layout/abouthome_addon_list_item.xml \
+  res/layout/abouthome_topsite_item.xml \
+  res/layout/abouthome_addon_row.xml \
   $(NULL)
 
 RES_LAYOUT_V11 = \
@@ -224,6 +224,11 @@ RES_ANIM = \
   $(NULL)
 
 RES_DRAWABLE_MDPI_V8 = \
+  res/drawable-mdpi-v8/abouthome_icon.png \
+  res/drawable-mdpi-v8/abouthome_logo.png \
+  res/drawable-mdpi-v8/abouthome_separator.9.png \
+  res/drawable-mdpi-v8/abouthome_topsite_placeholder.png \
+  res/drawable-mdpi-v8/abouthome_topsite_shadow.9.png \
   res/drawable-mdpi-v8/ic_awesomebar_go.png \
   res/drawable-mdpi-v8/ic_awesomebar_search.png \
   res/drawable-mdpi-v8/ic_menu_bookmark_add.png \
@@ -246,6 +251,11 @@ RES_DRAWABLE_MDPI_V8 = \
   $(NULL)
 
 RES_DRAWABLE_HDPI_V8 = \
+  res/drawable-hdpi-v8/abouthome_icon.png \
+  res/drawable-hdpi-v8/abouthome_logo.png \
+  res/drawable-hdpi-v8/abouthome_separator.9.png \
+  res/drawable-hdpi-v8/abouthome_topsite_placeholder.png \
+  res/drawable-hdpi-v8/abouthome_topsite_shadow.9.png \
   res/drawable-hdpi-v8/ic_awesomebar_go.png \
   res/drawable-hdpi-v8/ic_awesomebar_search.png \
   res/drawable-hdpi-v8/ic_menu_bookmark_add.png \
@@ -318,6 +328,11 @@ RES_DRAWABLE_HDPI_V11 = \
   $(NULL)
 
 RES_DRAWABLE_XHDPI_V11 = \
+  res/drawable-xhdpi-v11/abouthome_icon.png \
+  res/drawable-xhdpi-v11/abouthome_logo.png \
+  res/drawable-xhdpi-v11/abouthome_separator.9.png \
+  res/drawable-xhdpi-v11/abouthome_topsite_placeholder.png \
+  res/drawable-xhdpi-v11/abouthome_topsite_shadow.9.png \
   res/drawable-xhdpi-v11/ic_awesomebar_go.png \
   res/drawable-xhdpi-v11/ic_awesomebar_search.png \
   res/drawable-xhdpi-v11/ic_menu_bookmark_add.png \
@@ -346,7 +361,11 @@ MOZ_ANDROID_DRAWABLES += mobile/android/base/resources/drawable/crash_reporter.p
 RES_LAYOUT += res/layout/crash_reporter.xml
 endif
 
-MOZ_ANDROID_DRAWABLES += mobile/android/base/resources/drawable/address_bar_bg.xml              \
+MOZ_ANDROID_DRAWABLES += mobile/android/base/resources/drawable/abouthome_bg.png                \
+                         mobile/android/base/resources/drawable/abouthome_bg_repeat.xml         \
+                         mobile/android/base/resources/drawable/abouthome_topsites_bg.png       \
+                         mobile/android/base/resources/drawable/abouthome_topsites_bg_repeat.xml \
+                         mobile/android/base/resources/drawable/address_bar_bg.xml              \
                          mobile/android/base/resources/drawable/address_bar_url_default.xml     \
                          mobile/android/base/resources/drawable/address_bar_url_pressed.xml     \
                          mobile/android/base/resources/drawable/awesomebar_tab_focus.xml        \
@@ -387,8 +406,6 @@ MOZ_ANDROID_DRAWABLES += mobile/android/base/resources/drawable/address_bar_bg.x
                          mobile/android/base/resources/drawable/tabs_tray_bg.9.png              \
                          mobile/android/base/resources/drawable/checkerboard.png                \
                          mobile/android/base/resources/drawable/shadow.png                      \
-                         mobile/android/base/resources/drawable/rounded_grey_border.xml            \
-                         mobile/android/base/resources/drawable/rounded_grey_box.xml            \
                          $(NULL)
 
 

mobile/android/base/resources/drawable/abouthome_bg_repeat.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+        android:src="@drawable/abouthome_bg"
+        android:tileMode="repeat"/>

mobile/android/base/resources/drawable/abouthome_topsites_bg_repeat.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+        android:src="@drawable/abouthome_topsites_bg"
+        android:tileMode="repeat"/>

mobile/android/base/resources/drawable/rounded_grey_border.xml

@@ -1,10 +0,0 @@
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-  <solid android:color="#FFFFFFFF" />
-  <stroke android:width="2dip" android:color="#ffD0D0D0"/>
-  <padding
-      android:left="7dp"
-      android:top="7dp"
-      android:right="7dp"
-      android:bottom="7dp" />
-  <corners android:radius="4dp" />
-</shape>

mobile/android/base/resources/drawable/rounded_grey_box.xml

@@ -1,7 +0,0 @@
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-  <solid android:color="#FFD0D0D0" />
-  <stroke  android:width="2dip" android:color="#FFD0D0D0"/>
-    <padding android:left="7dp" android:top="7dp"
-            android:right="7dp" android:bottom="7dp" />
-    <corners android:radius="4dp" />
-</shape> 

mobile/android/base/resources/layout/abouthome_addon_list_item.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<TextView xmlns:android="http://schemas.android.com/apk/res/android"
-          android:layout_width="fill_parent"
-          android:layout_height="wrap_content"
-          android:padding="10dip"
-          android:textColor="#FF000000"
-          android:background="@drawable/rounded_grey_border"/>

mobile/android/base/resources/layout/abouthome_addon_row.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
+          android:layout_width="fill_parent"
+          android:layout_height="47dip"
+          android:paddingLeft="12dip"
+          android:gravity="left|center_vertical"
+          android:textSize="15sp"
+          android:textColor="#222222"/>

mobile/android/base/resources/layout/abouthome_content.xml

@@ -1,37 +1,112 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <ImageView android:layout_width="fill_parent"
-               android:layout_height="100dip"
-               android:layout_gravity="center_horizontal"
-               android:src="@drawable/icon"/>
+    <RelativeLayout android:layout_width="fill_parent"
+                    android:layout_height="fill_parent"
+                    android:background="@drawable/abouthome_bg_repeat">
 
-    <TextView android:layout_width="fill_parent"
-              android:layout_height="wrap_content"
-              android:layout_marginTop="10dip"
-              android:textColor="#FF202020"
-              android:textStyle="bold"
-              android:text="Recommended Addons"
-              android:isScrollContainer="false"/>
+        <RelativeLayout android:id="@+id/top_sites"
+                        android:layout_width="fill_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_alignParentTop="true"
+                        android:layout_alignParentLeft="true"
+                        android:isScrollContainer="false"
+                        android:background="@drawable/abouthome_topsites_bg_repeat">
 
-    <ListView android:id="@+id/recommended_addon_list"
-              android:layout_width="fill_parent"
-              android:layout_height="wrap_content"
-              android:divider="@android:color/transparent"
-              android:isScrollContainer="false"
-              android:dividerHeight="8dip"/>
+            <ImageView android:layout_width="fill_parent"
+                       android:layout_height="50dip"
+                       android:gravity="fill"
+                       android:background="@drawable/abouthome_bg_repeat"/>
 
-    <TextView android:layout_width="fill_parent"
-              android:layout_height="wrap_content"
-              android:layout_marginTop="10dip"
-              android:textColor="#FF202020"
-              android:textStyle="bold"
-              android:isScrollContainer="false"
-              android:text="Favorite Sites"/>
+            <ImageView android:layout_width="wrap_content"
+                       android:layout_height="wrap_content"
+                       android:layout_alignParentTop="true"
+                       android:layout_alignParentRight="true"
+                       android:src="@drawable/abouthome_icon"/>
 
-    <GridView android:id="@+id/grid"
-              android:layout_width="fill_parent"
-              android:isScrollContainer="false"
-              android:layout_height="wrap_content"/>
+            <TextView android:id="@+id/top_sites_title"
+                      android:layout_width="fill_parent"
+                      android:layout_height="wrap_content"
+                      android:layout_marginLeft="12dip"
+                      android:layout_marginTop="55dip"
+                      android:textSize="12sp"
+                      android:textColor="#000000"
+                      android:textStyle="bold"
+                      android:text="Top Sites"/>
+
+            <view class="org.mozilla.gecko.AboutHomeContent$TopSitesGridView"
+                  android:id="@+id/top_sites_grid"
+                  android:layout_width="fill_parent"
+                  android:layout_height="wrap_content"
+                  android:layout_below="@id/top_sites_title"
+                  android:verticalSpacing="8dip"
+                  android:horizontalSpacing="0dip"
+                  android:isScrollContainer="false"
+                  android:gravity="center"/>
+
+            <view class="org.mozilla.gecko.AboutHomeContent$LinkTextView"
+                  android:id="@+id/all_top_sites_text"
+                  android:layout_width="fill_parent"
+                  android:layout_height="30dip"
+                  android:layout_below="@id/top_sites_grid"
+                  android:layout_marginTop="7dip"
+                  android:textColor="#22629e"
+                  android:textSize="12sp"
+                  android:gravity="top|center_horizontal"
+                  android:text="Browse all your top sites"/>
+
+        </RelativeLayout>
+
+        <ImageView android:id="@+id/logo"
+                   android:layout_width="wrap_content"
+                   android:layout_height="wrap_content"
+                   android:layout_marginTop="16dip"
+                   android:layout_marginBottom="10dip"
+                   android:layout_marginLeft="12dip"
+                   android:layout_alignParentTop="true"
+                   android:layout_alignParentLeft="true"
+                   android:src="@drawable/abouthome_logo"/>
+
+        <TextView android:id="@+id/recommended_addons_title"
+                  android:layout_width="fill_parent"
+                  android:layout_height="26dip"
+                  android:paddingLeft="12dip"
+                  android:layout_below="@id/top_sites"
+                  android:background="@drawable/abouthome_separator"
+                  android:textSize="12sp"
+                  android:textColor="#000000"
+                  android:textStyle="bold"
+                  android:gravity="left|center_vertical"
+                  android:text="Add-ons for your Firefox"/>
+
+        <LinearLayout android:id="@+id/recommended_addons"
+                      android:orientation="vertical"
+                      android:layout_width="fill_parent"
+                      android:layout_height="wrap_content"
+                      android:layout_below="@id/recommended_addons_title"
+                      android:background="@drawable/abouthome_separator"
+                      android:isScrollContainer="false">
+
+            <view class="org.mozilla.gecko.AboutHomeContent$AddonsListView"
+                  android:id="@+id/recommended_addons_list"
+                  android:layout_width="fill_parent"
+                  android:layout_height="wrap_content"
+                  android:divider="@drawable/abouthome_separator"
+                  android:isScrollContainer="false"
+                  android:dividerHeight="2dip"/>
+
+            <view class="org.mozilla.gecko.AboutHomeContent$LinkTextView"
+                  android:id="@+id/all_addons_text"
+                  android:layout_width="fill_parent"
+                  android:layout_height="47dip"
+                  android:background="@drawable/abouthome_separator"
+                  android:textColor="#22629e"
+                  android:textSize="12sp"
+                  android:gravity="center"
+                  android:text="Browse all Firefox Add-ons"/>
+
+        </LinearLayout>
+
+    </RelativeLayout>
 
 </merge>

mobile/android/base/resources/layout/abouthome_grid_box.xml

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              android:layout_width="100dip"
-              android:layout_height="150dip"
-              android:padding="6dip"
-              android:gravity="center_horizontal">
-
-    <LinearLayout android:orientation="vertical"
-                  android:layout_width="fill_parent"
-                  android:layout_height="fill_parent"
-                  android:background="@drawable/rounded_grey_box">
-
-        <ImageView android:id="@+id/screenshot"
-                   android:layout_width="fill_parent"
-                   android:layout_height="80dip" />
-
-        <LinearLayout android:orientation="horizontal"
-                      android:layout_height="wrap_content"
-                      android:layout_width="fill_parent">
-
-            <ImageView android:id="@+id/bookmark_icon"
-                       android:layout_width="16dip"
-                       android:layout_height="16dip"
-                       android:layout_marginRight="6dip"/>
-
-            <TextView android:id="@+id/bookmark_title"
-                      android:singleLine="true"
-                      android:textColor="#FF202020"
-                      android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"/>
-
-        </LinearLayout>
-
-        <TextView android:id="@+id/bookmark_url"
-                  android:layout_width="fill_parent"
-                  android:layout_height="wrap_content"
-                  android:textColor="#FF202020"
-                  android:singleLine="true"
-                  android:ellipsize="marquee"/>
-
-    </LinearLayout>
-
-</LinearLayout>

mobile/android/base/resources/layout/abouthome_topsite_item.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              android:layout_width="140dip"
+              android:layout_height="wrap_content">
+
+    <LinearLayout android:orientation="vertical"
+                  android:layout_width="fill_parent"
+                  android:layout_height="fill_parent">
+
+        <LinearLayout android:orientation="vertical"
+                      android:layout_width="fill_parent"
+                      android:layout_height="wrap_content"
+                      android:background="@drawable/abouthome_topsite_shadow"
+                      android:padding="1dip"
+                      android:paddingTop="2dip">
+
+            <ImageView android:id="@+id/thumbnail"
+                       android:layout_width="fill_parent"
+                       android:layout_height="80dip"
+                       android:scaleType="centerCrop"/>
+
+        </LinearLayout>
+
+        <TextView android:id="@+id/title"
+                  android:layout_width="fill_parent"
+                  android:layout_height="wrap_content"
+                  android:layout_marginTop="3dip"
+                  android:singleLine="true"
+                  android:textColor="#000000"
+                  android:textSize="9dip"
+                  android:gravity="center_horizontal"/>
+
+    </LinearLayout>
+
+</LinearLayout>