Issue/11760 reader empty view ui

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderBlogFragment.java

@@ -90,7 +90,7 @@ private void checkEmptyView() {
 
         if (hasBlogAdapter() && getBlogAdapter().isEmpty()) {
             actionableEmptyView.setVisibility(View.VISIBLE);
-            actionableEmptyView.image.setImageResource(R.drawable.img_illustration_empty_results_216dp);
+            actionableEmptyView.image.setImageResource(R.drawable.img_illustration_following_empty_results_196dp);
             actionableEmptyView.subtitle.setText(R.string.reader_empty_followed_blogs_description);
             actionableEmptyView.button.setText(R.string.reader_empty_followed_blogs_button_discover);
             actionableEmptyView.button.setOnClickListener(new OnClickListener() {

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPostListFragment.java

@@ -1761,7 +1761,7 @@ private void setEmptyTitleAndDescriptionForBookmarksList() {
         SpannableStringBuilder ssb = new SpannableStringBuilder(description);
         int imagePlaceholderPosition = description.indexOf("%s");
         addBookmarkImageSpan(ssb, imagePlaceholderPosition);
-
+        mActionableEmptyView.image.setImageResource(R.drawable.img_illustration_empty_results_216dp);
         mActionableEmptyView.image.setVisibility(View.VISIBLE);
         mActionableEmptyView.title.setText(R.string.reader_empty_saved_posts_title);
         mActionableEmptyView.subtitle.setText(ssb);

WordPress/src/main/res/drawable/img_illustration_following_empty_results_196dp.xml

@@ -0,0 +1,70 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="196dp"
+    android:height="162dp"
+    android:viewportWidth="196"
+    android:viewportHeight="162">
+  <path
+      android:pathData="M0,0h196v162h-196z"
+      android:fillColor="@color/reader_following_empty_view_background"/>
+  <path
+      android:pathData="M98.5,88.5m-60.5,0a60.5,60.5 0,1 1,121 0a60.5,60.5 0,1 1,-121 0"
+      android:fillColor="@color/reader_following_empty_view_center_circle"/>
+  <path
+      android:pathData="M124.833,94.208V64.583H65.583V110.667C65.583,114.287 68.546,117.25 72.167,117.25H101.792V104.083H111.667V94.208H124.833ZM134.708,117.25V110.667H124.833V100.792H118.25V110.667H108.375V117.25H118.25V127.125H124.833V117.25H134.708ZM85.333,100.792V97.5H72.167V100.792H85.333ZM72.167,90.917H95.208V94.208H72.167V90.917ZM95.208,84.333H72.167V87.625H95.208V84.333ZM72.167,71.167H118.25V77.75H72.167V71.167Z"
+      android:fillColor="@color/reader_following_empty_view_middle_plus"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M124.833,64.583H125.333V64.083H124.833V64.583ZM124.833,94.208V94.708H125.333V94.208H124.833ZM65.583,64.583V64.083H65.083V64.583H65.583ZM101.792,117.25V117.75H102.292V117.25H101.792ZM101.792,104.083V103.583H101.292V104.083H101.792ZM111.667,104.083V104.583H112.167V104.083H111.667ZM111.667,94.208V93.708H111.167V94.208H111.667ZM134.708,110.667H135.208V110.167H134.708V110.667ZM134.708,117.25V117.75H135.208V117.25H134.708ZM124.833,110.667H124.333V111.167H124.833V110.667ZM124.833,100.792H125.333V100.292H124.833V100.792ZM118.25,100.792V100.292H117.75V100.792H118.25ZM118.25,110.667V111.167H118.75V110.667H118.25Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M108.375,110.667V110.167H107.875V110.667H108.375ZM108.375,117.25H107.875V117.75H108.375V117.25ZM118.25,117.25H118.75V116.75H118.25V117.25ZM118.25,127.125H117.75V127.625H118.25V127.125ZM124.833,127.125V127.625H125.333V127.125H124.833ZM124.833,117.25V116.75H124.333V117.25H124.833ZM85.333,97.5H85.833V97H85.333V97.5ZM85.333,100.792V101.292H85.833V100.792H85.333ZM72.167,97.5V97H71.667V97.5H72.167ZM72.167,100.792H71.667V101.292H72.167V100.792ZM95.208,90.917H95.708V90.417H95.208V90.917ZM72.167,90.917V90.417H71.667V90.917H72.167ZM95.208,94.208V94.708H95.708V94.208H95.208ZM72.167,94.208H71.667V94.708H72.167V94.208ZM72.167,84.333V83.833H71.667V84.333H72.167ZM95.208,84.333H95.708V83.833H95.208V84.333ZM72.167,87.625H71.667V88.125H72.167V87.625ZM95.208,87.625V88.125H95.708V87.625H95.208Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M118.25,71.167H118.75V70.667H118.25V71.167ZM72.167,71.167V70.667H71.667V71.167H72.167ZM118.25,77.75V78.25H118.75V77.75H118.25ZM72.167,77.75H71.667V78.25H72.167V77.75ZM124.333,64.583V94.208H125.333V64.583H124.333ZM65.583,65.083H124.833V64.083H65.583V65.083ZM66.083,110.667V64.583H65.083V110.667H66.083ZM72.167,116.75C68.822,116.75 66.083,114.011 66.083,110.667H65.083C65.083,114.564 68.27,117.75 72.167,117.75V116.75ZM101.792,116.75H72.167V117.75H101.792V116.75ZM101.292,104.083V117.25H102.292V104.083H101.292ZM111.667,103.583H101.792V104.583H111.667V103.583ZM111.167,94.208V104.083H112.167V94.208H111.167ZM124.833,93.708H111.667V94.708H124.833V93.708ZM134.208,110.667V117.25H135.208V110.667H134.208ZM124.833,111.167H134.708V110.167H124.833V111.167ZM124.333,100.792V110.667H125.333V100.792H124.333Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M118.25,101.292H124.833V100.292H118.25V101.292ZM118.75,110.667V100.792H117.75V110.667H118.75ZM108.375,111.167H118.25V110.167H108.375V111.167ZM108.875,117.25V110.667H107.875V117.25H108.875ZM118.25,116.75H108.375V117.75H118.25V116.75ZM118.75,127.125V117.25H117.75V127.125H118.75ZM124.833,126.625H118.25V127.625H124.833V126.625ZM124.333,117.25V127.125H125.333V117.25H124.333ZM134.708,116.75H124.833V117.75H134.708V116.75Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M84.833,97.5V100.792H85.833V97.5H84.833ZM72.167,98H85.333V97H72.167V98ZM72.667,100.792V97.5H71.667V100.792H72.667ZM85.333,100.292H72.167V101.292H85.333V100.292ZM95.208,90.417H72.167V91.417H95.208V90.417ZM95.708,94.208V90.917H94.708V94.208H95.708ZM72.167,94.708H95.208V93.708H72.167V94.708ZM71.667,90.917V94.208H72.667V90.917H71.667ZM72.167,84.833H95.208V83.833H72.167V84.833ZM72.667,87.625V84.333H71.667V87.625H72.667ZM95.208,87.125H72.167V88.125H95.208V87.125ZM94.708,84.333V87.625H95.708V84.333H94.708ZM118.25,70.667H72.167V71.667H118.25V70.667ZM118.75,77.75V71.167H117.75V77.75H118.75ZM72.167,78.25H118.25V77.25H72.167V78.25ZM71.667,71.167V77.75H72.667V71.167H71.667Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M161.967,9H143.033V35.033H117V53.967H143.033V80H161.967V53.967H188V35.033H161.967V9Z"
+      android:fillColor="@color/reader_following_empty_view_upper_right_plus"
+      android:fillType="evenOdd"/>
+
+  <path
+      android:pathData="M143.033,9V8.5H142.533V9H143.033ZM161.967,9H162.467V8.5H161.967V9ZM143.033,35.033V35.533H143.533V35.033H143.033ZM117,35.033V34.533H116.5V35.033H117ZM117,53.967H116.5V54.467H117V53.967ZM143.033,53.967H143.533V53.467H143.033V53.967ZM143.033,80H142.533V80.5H143.033V80ZM161.967,80V80.5H162.467V80H161.967ZM161.967,53.967V53.467H161.467V53.967H161.967ZM188,53.967V54.467H188.5V53.967H188Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M188,35.033H188.5V34.533H188V35.033ZM161.967,35.033H161.467V35.533H161.967V35.033ZM143.033,9.5H161.967V8.5H143.033V9.5ZM143.533,35.033V9H142.533V35.033H143.533ZM117,35.533H143.033V34.533H117V35.533ZM117.5,53.967V35.033H116.5V53.967H117.5ZM143.033,53.467H117V54.467H143.033V53.467ZM143.533,80V53.967H142.533V80H143.533ZM161.967,79.5H143.033V80.5H161.967V79.5ZM161.467,53.967V80H162.467V53.967H161.467ZM188,53.467H161.967V54.467H188V53.467ZM187.5,35.033V53.967H188.5V35.033H187.5ZM161.967,35.533H188V34.533H161.967V35.533ZM161.467,9V35.033H162.467V9H161.467Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M60.1,126H52.9V135.9H43V143.1H52.9V153H60.1V143.1H70V135.9H60.1V126Z"
+      android:fillColor="@color/reader_following_empty_view_left_lower_plus"
+      android:fillType="evenOdd"/>
+
+  <path
+      android:pathData="M52.9,126V125.5H52.4V126H52.9ZM60.1,126H60.6V125.5H60.1V126ZM52.9,135.9V136.4H53.4V135.9H52.9ZM43,135.9V135.4H42.5V135.9H43ZM43,143.1H42.5V143.6H43V143.1ZM52.9,143.1H53.4V142.6H52.9V143.1ZM52.9,153H52.4V153.5H52.9V153ZM60.1,153V153.5H60.6V153H60.1ZM60.1,143.1V142.6H59.6V143.1H60.1ZM70,143.1V143.6H70.5V143.1H70ZM70,135.9H70.5V135.4H70V135.9ZM60.1,135.9H59.6V136.4H60.1V135.9ZM52.9,126.5H60.1V125.5H52.9V126.5ZM53.4,135.9V126H52.4V135.9H53.4ZM43,136.4H52.9V135.4H43V136.4ZM43.5,143.1V135.9H42.5V143.1H43.5ZM52.9,142.6H43V143.6H52.9V142.6ZM53.4,153V143.1H52.4V153H53.4ZM60.1,152.5H52.9V153.5H60.1V152.5ZM59.6,143.1V153H60.6V143.1H59.6ZM70,142.6H60.1V143.6H70V142.6ZM69.5,135.9V143.1H70.5V135.9H69.5ZM60.1,136.4H70V135.4H60.1V136.4ZM59.6,126V135.9H60.6V126H59.6Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M34.967,74H24.033V89.033H9V99.966H24.033V115H34.967V99.966H50V89.033H34.967V74Z"
+      android:fillColor="@color/reader_following_empty_view_mid_left_plus"
+      android:fillType="evenOdd"/>
+
+  <path
+      android:pathData="M24.033,74V73.5H23.533V74H24.033ZM34.967,74H35.467V73.5H34.967V74ZM24.033,89.033V89.533H24.533V89.033H24.033ZM9,89.033V88.533H8.5V89.033H9ZM9,99.966H8.5V100.466H9V99.966ZM24.033,99.966H24.533V99.466H24.033V99.966ZM24.033,115H23.533V115.5H24.033V115ZM34.967,115V115.5H35.467V115H34.967ZM34.967,99.966V99.466H34.467V99.966H34.967ZM50,99.966V100.466H50.5V99.966H50ZM50,89.033H50.5V88.533H50V89.033Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+
+  <path
+      android:pathData="M34.967,89.033H34.467V89.533H34.967V89.033ZM24.033,74.5H34.967V73.5H24.033V74.5ZM24.533,89.033V74H23.533V89.033H24.533ZM9,89.533H24.033V88.533H9V89.533ZM9.5,99.966V89.033H8.5V99.966H9.5ZM24.033,99.466H9V100.466H24.033V99.466ZM24.533,115V99.966H23.533V115H24.533ZM34.967,114.5H24.033V115.5H34.967V114.5ZM34.467,99.966V115H35.467V99.966H34.467ZM50,99.466H34.967V100.466H50V99.466ZM49.5,89.033V99.966H50.5V89.033H49.5ZM34.967,89.533H50V88.533H34.967V89.533ZM34.467,74V89.033H35.467V74H34.467Z"
+      android:fillColor="@color/reader_following_empty_view_outline"/>
+</vector>

WordPress/src/main/res/layout/reader_empty_view.xml

@@ -9,7 +9,7 @@
     android:layout_marginTop="@dimen/toolbar_height"
     android:visibility="gone"
     app:aevButton="@string/reader_empty_followed_blogs_button_discover"
-    app:aevImage="@drawable/img_illustration_empty_results_216dp"
+    app:aevImage="@drawable/img_illustration_following_empty_results_196dp"
     app:aevSubtitle="@string/reader_empty_followed_blogs_description"
     app:aevTitle="@string/reader_empty_followed_blogs_title"
     tools:visibility="visible" />

WordPress/src/main/res/values-night/colors.xml

@@ -38,4 +38,12 @@
 
     <color name="post_history_underlying_background">@color/gray_100</color>
 
+    <!-- Reader Following empty view -->
+    <color name="reader_following_empty_view_upper_right_plus">@color/red_70</color>
+    <color name="reader_following_empty_view_mid_left_plus">@color/celadon_60</color>
+    <color name="reader_following_empty_view_center_circle">@color/gray_90</color>
+    <color name="reader_following_empty_view_left_lower_plus">@color/orange_70</color>
+    <color name="reader_following_empty_view_outline">@color/transparent</color>
+    <color name="reader_following_empty_view_middle_plus">@color/gray_60</color>
+    <color name="reader_following_empty_view_background">@color/transparent</color>
 </resources>

WordPress/src/main/res/values/colors.xml

@@ -298,4 +298,12 @@
     <color name="white_translucent_40">#66ffffff</color>
     <color name="white_translucent_65">#a6ffffff</color>
 
+    <!--Reader Following empty view -->
+    <color name="reader_following_empty_view_upper_right_plus">@color/yellow_0</color>
+    <color name="reader_following_empty_view_mid_left_plus">@color/green_0</color>
+    <color name="reader_following_empty_view_center_circle">@color/blue_0</color>
+    <color name="reader_following_empty_view_left_lower_plus">@color/pink_0</color>
+    <color name="reader_following_empty_view_outline">@color/gray_10</color>
+    <color name="reader_following_empty_view_middle_plus">@android:color/white</color>
+    <color name="reader_following_empty_view_background">@android:color/white</color>
 </resources>

WordPress/src/main/res/values/strings.xml

@@ -1770,7 +1770,7 @@
     <string name="reader_empty_recommended_blogs">No recommended sites</string>
     <string name="reader_empty_followed_blogs_title">No followed sites</string>
     <string name="reader_empty_followed_blogs_search_title">No sites matching your search</string>
-    <string name="reader_empty_followed_blogs_description">You are not following any sites yet. Why not follow one now?</string>
+    <string name="reader_empty_followed_blogs_description">When you follow sites, you\'ll see their content here</string>
     <string name="reader_empty_followed_blogs_no_recent_posts_title">No recent posts</string>
     <string name="reader_empty_followed_blogs_no_recent_posts_description">The sites you follow haven\'t posted anything recently</string>
     <string name="reader_empty_followed_blogs_button_discover">Discover sites</string>