Fix #330: improve reader "blogs I follow" empty view

res/anim/box_with_pages_slide_up_page1.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:startOffset="200"
+    android:duration="600"
+    android:fromYDelta="100%p"
+    android:toYDelta="0"
+    android:interpolator="@android:anim/overshoot_interpolator" />
+

res/anim/box_with_pages_slide_up_page2.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:startOffset="0"
+    android:duration="800"
+    android:fromYDelta="100%p"
+    android:toYDelta="0"
+    android:interpolator="@android:anim/overshoot_interpolator" />
+

res/anim/box_with_pages_slide_up_page3.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:startOffset="300"
+    android:duration="600"
+    android:fromYDelta="100%p"
+    android:toYDelta="0"
+    android:interpolator="@android:anim/overshoot_interpolator" />
+

res/layout/reader_empty_view.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:gravity="center"
+    android:visibility="gone">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        android:layout_weight="1"
+        android:gravity="center">
+
+        <RelativeLayout
+            android:layout_width="wrap_content"
+            android:layout_height="100dp"
+            android:layout_marginBottom="8dp">
+
+            <ImageView
+                android:id="@+id/empty_tags_box_bottom"
+                android:layout_width="86dp"
+                android:layout_height="54dp"
+                android:src="@drawable/box_with_pages_bottom"
+                android:layout_alignParentBottom="true" />
+
+            <ImageView
+                android:id="@+id/empty_tags_box_page3"
+                android:layout_width="54dp"
+                android:layout_height="70dp"
+                android:src="@drawable/box_with_pages_page3"
+                android:layout_alignParentBottom="true"
+                android:layout_alignParentLeft="true"
+                android:layout_marginLeft="2dp" />
+
+            <ImageView
+                android:id="@+id/empty_tags_box_page2"
+                android:layout_width="53dp"
+                android:layout_height="70dp"
+                android:src="@drawable/box_with_pages_page2"
+                android:layout_alignParentBottom="true"
+                android:layout_alignParentLeft="true"
+                android:layout_marginLeft="17dp"
+                android:layout_marginBottom="15dp" />
+
+            <ImageView
+                android:id="@+id/empty_tags_box_page1"
+                android:layout_width="56dp"
+                android:layout_height="73.5dp"
+                android:src="@drawable/box_with_pages_page1"
+                android:layout_alignParentBottom="true"
+                android:layout_alignParentLeft="true"
+                android:layout_marginLeft="28dp" />
+
+            <ImageView
+                android:id="@+id/empty_tags_box_top"
+                android:layout_width="86dp"
+                android:layout_height="54dp"
+                android:src="@drawable/box_with_pages_top"
+                android:layout_alignParentBottom="true" />
+        </RelativeLayout>
+
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/title_empty"
+            style="@style/WordPress.EmptyList.Title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="8dp"
+            android:layout_marginLeft="32dp"
+            android:layout_marginRight="32dp"
+            android:text="@string/reader_empty_posts_in_tag" />
+
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/description_empty"
+            style="@style/WordPress.EmptyList.Description"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="8dp"
+            android:layout_marginLeft="48dp"
+            android:layout_marginRight="48dp"
+            android:text="@string/reader_empty_posts_in_tag" />
+    </LinearLayout>
+
+</LinearLayout>

res/layout/reader_fragment_post_grid.xml

@@ -33,4 +33,7 @@
         android:text="@string/reader_empty_posts_in_tag"
         android:visibility="gone" />
 
+    <include android:id="@+id/empty_view"
+        layout="@layout/reader_empty_view"/>
+
 </RelativeLayout>

res/layout/reader_fragment_post_list.xml

@@ -16,13 +16,8 @@
         android:text="@string/reader_label_new_posts_one"
         android:visibility="gone" />
 
-    <org.wordpress.android.widgets.WPTextView
-        android:id="@+id/text_empty"
-        style="@style/ReaderTextView.Label.Medium"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_centerInParent="true"
-        android:text="@string/reader_empty_posts_in_tag"
-        android:visibility="gone" />
+    <include
+        android:id="@+id/empty_view"
+        layout="@layout/reader_empty_view"/>
 
 </RelativeLayout>

res/values/colors.xml

@@ -69,6 +69,7 @@
     <color name="grey_extra_light">#eeeeee</color>
     <color name="grey_light">#dddddd</color>
     <color name="grey_medium">#999999</color>
+    <color name="grey_medium_dark">#777777</color>
     <color name="grey_dark">#333333</color>
     <color name="grey_extra_dark">#222222</color>
 

res/values/dimens.xml

@@ -61,6 +61,10 @@
     <!-- max size for images in Reader comments -->
     <dimen name="reader_comment_max_image_size">96dp</dimen>
 
+    <dimen name="empty_list_title_text_size">24sp</dimen>
+    <dimen name="empty_list_description_text_size">18sp</dimen>
+    <dimen name="arrow_tip_size">36dp</dimen>
+
     <dimen name="page_indicator_line_width">12dp</dimen>
     <dimen name="page_indicator_gap_width">4dp</dimen>
     <dimen name="page_indicator_stroke_width">4dp</dimen>

res/values/reader_styles.xml

@@ -137,8 +137,9 @@
         <item name="android:layout_height">wrap_content</item>
         <item name="android:textSize">@dimen/reader_text_sz_large</item>
         <item name="android:gravity">center</item>
-        <item name="android:textColor">@color/grey_medium</item>
+        <item name="android:textColor">@color/grey_dark</item>
     </style>
+
     <style name="ReaderTextView.MessageBar" parent="ReaderTextView">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>

res/values/strings.xml

@@ -727,6 +727,9 @@
     <string name="reader_empty_posts_in_tag_never_updated">No articles with this tag yet</string>
     <string name="reader_empty_followed_tags">You don\'t follow any tags</string>
     <string name="reader_empty_popular_tags">No popular tags</string>
+    <string name="reader_empty_followed_blogs_title">You\'re not following any blogs yet.</string>
+    <string name="reader_empty_followed_blogs_description">But don\'t worry, just tap the plus icon to start exploring!</string>
+    <string name="reader_empty_posts_liked">You have not liked any posts.</string>
 
     <!-- NUX strings -->
     <string name="create_account_wpcom">Create an account on WordPress.com</string>

res/values/styles.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources xmlns:android="http://schemas.android.com/apk/res/android">
+<resources xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:custom="http://schemas.android.com/apk/res/org.wordpress.android">
 
     <style name="WordPress" parent="Theme.Sherlock.Light.DarkActionBar">
         <item name="android:textViewStyle">@style/WordPressTextAppearance</item>
@@ -304,4 +305,20 @@
         <item name="android:shadowRadius">2</item>
     </style>
 
+    <style name="WordPress.EmptyList">
+        <item name="android:textColor">@color/grey_medium_dark</item>
+        <item name="android:gravity">center</item>
+        <item name="android:layout_marginLeft">16dp</item>
+        <item name="android:layout_marginRight">16dp</item>
+    </style>
+
+    <style name="WordPress.EmptyList.Title" parent="WordPress.EmptyList">
+        <item name="android:textSize">@dimen/empty_list_title_text_size</item>
+        <item name="org.wordpress.android:fontVariation">light</item>
+    </style>
+
+    <style name="WordPress.EmptyList.Description" parent="WordPress.EmptyList">
+        <item name="android:textSize">@dimen/empty_list_description_text_size</item>
+    </style>
+
 </resources>

src/org/wordpress/android/models/ReaderTag.java

@@ -50,6 +50,22 @@ public void setEndpoint(String endpoint) {
         this.endpoint = StringUtils.notNullStr(endpoint);
     }
 
+    /**
+     * Extract tag Id from endpoint, only works for ReaderTagType.DEFAULT
+     *
+     * @return a string Id if tagType is ReaderTagType.DEFAULT, empty string else
+     */
+    public String getStringIdFromEndpoint() {
+        if (tagType != ReaderTagType.DEFAULT) {
+            return "";
+        }
+        String[] splitted = endpoint.split("/");
+        if (splitted != null && splitted.length > 0) {
+            return splitted[splitted.length - 1];
+        }
+        return "";
+    }
+
     public String getTagName() {
         return StringUtils.notNullStr(tagName);
     }

src/org/wordpress/android/ui/reader/ReaderActivity.java

@@ -3,11 +3,9 @@
 import android.app.Dialog;
 import android.content.Context;
 import android.content.Intent;
-import android.content.SharedPreferences;
 import android.content.res.Configuration;
 import android.net.Uri;
 import android.os.Bundle;
-import android.preference.PreferenceManager;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentStatePagerAdapter;
@@ -28,7 +26,6 @@
 import org.wordpress.android.R;
 import org.wordpress.android.WordPress;
 import org.wordpress.android.ui.WPActionBarActivity;
-import org.wordpress.android.ui.posts.PostsActivity;
 import org.wordpress.android.ui.reader.ReaderBaseFragment.ChangeTopicListener;
 import org.wordpress.android.ui.reader.ReaderBaseFragment.GetLastSelectedItemListener;
 import org.wordpress.android.ui.reader.ReaderBaseFragment.GetLoadedItemsListener;

src/org/wordpress/android/ui/reader_native/ReaderPostListFragment.java

@@ -13,8 +13,10 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.animation.Animation;
+import android.view.animation.AnimationUtils;
 import android.widget.AbsListView;
 import android.widget.AdapterView;
+import android.widget.ImageView;
 import android.widget.ListView;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
@@ -49,7 +51,7 @@ public class ReaderPostListFragment extends Fragment implements AbsListView.OnSc
     private ReaderActionBarTagAdapter mActionBarAdapter;
 
     private TextView mNewPostsBar;
-    private TextView mEmptyMessage;
+    private View mEmptyView;
     private View mFooterProgress;
 
     private String mCurrentTag;
@@ -213,13 +215,15 @@ public void onClick(View view) {
         });
 
         // textView that appears when current tag has no posts
-        mEmptyMessage = (TextView) view.findViewById(R.id.text_empty);
+        mEmptyView = view.findViewById(R.id.empty_view);
 
         // move the "new posts" bar and "empty" textView down when the translucent ActionBar is enabled
         if (isTranslucentActionBarEnabled) {
             RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mNewPostsBar.getLayoutParams();
-            params.setMargins(0, actionbarHeight, 0, 0);
-            mEmptyMessage.setPadding(0, actionbarHeight, 0, 0);
+            if (params != null) {
+                params.setMargins(0, actionbarHeight, 0, 0);
+            }
+            mEmptyView.setPadding(0, actionbarHeight, 0, 0);
         }
 
         if (useGridView) {
@@ -289,19 +293,66 @@ public void onItemClick(AdapterView<?> adapterView, View view, int position, lon
         return view;
     }
 
+    private void startBoxAndPagesAnimation() {
+        Animation animPage1 = AnimationUtils.loadAnimation(getActivity(),
+                R.anim.box_with_pages_slide_up_page1);
+        ImageView page1 = (ImageView) getActivity().findViewById(R.id.empty_tags_box_page1);
+        page1.startAnimation(animPage1);
+
+        Animation animPage2 = AnimationUtils.loadAnimation(getActivity(),
+                R.anim.box_with_pages_slide_up_page2);
+        ImageView page2 = (ImageView) getActivity().findViewById(R.id.empty_tags_box_page2);
+        page2.startAnimation(animPage2);
+
+        Animation animPage3 = AnimationUtils.loadAnimation(getActivity(),
+                R.anim.box_with_pages_slide_up_page3);
+        ImageView page3 = (ImageView) getActivity().findViewById(R.id.empty_tags_box_page3);
+        page3.startAnimation(animPage3);
+    }
+
+    private void setEmptyTitleAndDecriptionForCurrentTag() {
+        boolean hasTagEverUpdated = ReaderTagTable.hasEverUpdatedTag(mCurrentTag);
+        int title, description = -1;
+        int tagIndex = mActionBarAdapter.getIndexOfTagName(mCurrentTag);
+        ReaderTag tag = (ReaderTag) getActionBarAdapter().getItem(tagIndex);
+        String tagId = tag.getStringIdFromEndpoint();
+        if (tagId.equals("following")) {
+            title = R.string.reader_empty_followed_blogs_title;
+            description = R.string.reader_empty_followed_blogs_description;
+        } else {
+            if (tagId.equals("liked")) {
+                title = R.string.reader_empty_posts_liked;
+            } else {
+                if (hasTagEverUpdated) {
+                    title = R.string.reader_empty_posts_in_tag;
+                } else {
+                    title = R.string.reader_empty_posts_in_tag_never_updated;
+                }
+            }
+        }
+        TextView titleView = (TextView) getActivity().findViewById(R.id.title_empty);
+        TextView descriptionView = (TextView) getActivity().findViewById(R.id.description_empty);
+        titleView.setText(getString(title));
+        if (description == -1) {
+            descriptionView.setVisibility(View.INVISIBLE);
+        } else {
+            descriptionView.setText(getString(description));
+            descriptionView.setVisibility(View.VISIBLE);
+        }
+    }
+
     /*
      * called by post adapter when data has been loaded
      */
     private ReaderActions.DataLoadedListener mDataLoadedListener = new ReaderActions.DataLoadedListener() {
         @Override
         public void onDataLoaded(boolean isEmpty) {
             if (isEmpty) {
-                // different empty text depending on whether this tag has ever been updated
-                boolean hasTagEverUpdated = ReaderTagTable.hasEverUpdatedTag(mCurrentTag);
-                mEmptyMessage.setText(hasTagEverUpdated ? R.string.reader_empty_posts_in_tag : R.string.reader_empty_posts_in_tag_never_updated);
-                mEmptyMessage.setVisibility(View.VISIBLE);
+                startBoxAndPagesAnimation();
+                setEmptyTitleAndDecriptionForCurrentTag();
+                mEmptyView.setVisibility(View.VISIBLE);
             } else {
-                mEmptyMessage.setVisibility(View.GONE);
+                mEmptyView.setVisibility(View.GONE);
                 // restore previous scroll position
                 if (mScrollToIndex > 0) {
                     final ListView listView = (ListView) getActivity().findViewById(android.R.id.list);