Merge pull request #8055 from wordpress-mobile/issue/7996-actionable-…

…empty-states

Issue/7996 actionable empty states (Part 1)

WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt

@@ -0,0 +1,91 @@
+package org.wordpress.android.ui
+
+import android.content.Context
+import android.support.annotation.DrawableRes
+import android.support.annotation.NonNull
+import android.support.v7.widget.AppCompatButton
+import android.util.AttributeSet
+import android.view.View
+import android.widget.ImageView
+import android.widget.LinearLayout
+import org.wordpress.android.R
+import org.wordpress.android.widgets.WPTextView
+
+/**
+ * View shown when screen is in an empty state.  It contains the following:
+ * - Image showing related illustration (optional)
+ * - Title describing cause for empty state (required)
+ * - Subtitle detailing cause for empty state (optional)
+ * - Button providing action to take (optional)
+ */
+class ActionableEmptyView : LinearLayout {
+    lateinit var button: AppCompatButton
+    lateinit var image: ImageView
+    lateinit var subtitle: WPTextView
+    lateinit var title: WPTextView
+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
+        initView(context, attrs)
+    }
+
+    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
+        initView(context, attrs)
+    }
+
+    private fun initView(context: Context, attrs: AttributeSet) {
+        val layout = View.inflate(context, R.layout.actionable_empty_view, this)
+
+        image = layout.findViewById(R.id.image)
+        title = layout.findViewById(R.id.title)
+        subtitle = layout.findViewById(R.id.subtitle)
+        button = layout.findViewById(R.id.button)
+
+        attrs.let {
+            val typedArray = context.obtainStyledAttributes(it, R.styleable.ActionableEmptyView, 0, 0)
+
+            val imageResource = typedArray.getResourceId(R.styleable.ActionableEmptyView_aevImage, 0)
+            val titleAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevTitle)
+            val subtitleAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevSubtitle)
+            val buttonAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevButton)
+
+            if (imageResource != 0) {
+                image.setImageResource(imageResource)
+                image.visibility = View.VISIBLE
+            }
+
+            if (!titleAttribute.isNullOrEmpty()) {
+                title.text = titleAttribute
+            } else {
+                throw RuntimeException(context.toString() + ": ActionableEmptyView must have a title (wpTitle)")
+            }
+
+            if (!subtitleAttribute.isNullOrEmpty()) {
+                subtitle.text = subtitleAttribute
+                subtitle.visibility = View.VISIBLE
+            }
+
+            if (!buttonAttribute.isNullOrEmpty()) {
+                button.text = buttonAttribute
+                button.visibility = View.VISIBLE
+            }
+
+            typedArray.recycle()
+        }
+    }
+
+    fun setButtonClickListener(@NonNull listener: OnClickListener) {
+        button.setOnClickListener(listener)
+    }
+
+    fun setImageResource(@NonNull @DrawableRes resId: Int) {
+        image.setImageResource(resId)
+    }
+
+    fun setSubtitleText(@NonNull charSequence: CharSequence) {
+        subtitle.text = charSequence
+    }
+
+    fun setTitleText(@NonNull charSequence: CharSequence) {
+        title.text = charSequence
+    }
+}

WordPress/src/main/java/org/wordpress/android/ui/media/MediaBrowserActivity.java

@@ -784,7 +784,7 @@ public void onReceive(Context context, Intent intent) {
         }
     };
 
-    private void showAddMediaPopup() {
+    public void showAddMediaPopup() {
         View anchor = findViewById(R.id.menu_new_media);
         PopupMenu popup = new PopupMenu(this, anchor);
 

WordPress/src/main/java/org/wordpress/android/ui/media/MediaGridFragment.java

@@ -17,8 +17,8 @@
 import android.view.MenuInflater;
 import android.view.MenuItem;
 import android.view.View;
+import android.view.View.OnClickListener;
 import android.view.ViewGroup;
-import android.widget.TextView;
 
 import org.greenrobot.eventbus.Subscribe;
 import org.greenrobot.eventbus.ThreadMode;
@@ -34,6 +34,7 @@
 import org.wordpress.android.fluxc.store.MediaStore.MediaErrorType;
 import org.wordpress.android.fluxc.store.MediaStore.OnMediaListFetched;
 import org.wordpress.android.fluxc.utils.MediaUtils;
+import org.wordpress.android.ui.ActionableEmptyView;
 import org.wordpress.android.ui.EmptyViewMessageType;
 import org.wordpress.android.ui.media.MediaGridAdapter.MediaGridAdapterCallback;
 import org.wordpress.android.ui.media.services.MediaDeleteService;
@@ -146,7 +147,7 @@ private static MediaFilter fromMimeType(@NonNull String mimeType) {
 
     private SwipeToRefreshHelper mSwipeToRefreshHelper;
 
-    private TextView mEmptyView;
+    private ActionableEmptyView mEmptyView;
     private EmptyViewMessageType mEmptyViewMessageType = EmptyViewMessageType.NO_CONTENT;
 
     private SiteModel mSite;
@@ -241,7 +242,14 @@ public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
             }
         });
 
-        mEmptyView = (TextView) view.findViewById(R.id.empty_view);
+        mEmptyView = (ActionableEmptyView) view.findViewById(R.id.actionable_empty_view);
+        mEmptyView.setButtonClickListener(new OnClickListener() {
+            @Override public void onClick(View view) {
+                if (isAdded() && getActivity() instanceof MediaBrowserActivity) {
+                    ((MediaBrowserActivity) getActivity()).showAddMediaPopup();
+                }
+            }
+        });
         mRecycler.setEmptyView(mEmptyView);
 
         // swipe to refresh setup
@@ -599,7 +607,7 @@ private void updateEmptyView(EmptyViewMessageType emptyViewMessageType) {
                     break;
             }
 
-            mEmptyView.setText(getText(stringId));
+            mEmptyView.setTitleText(getText(stringId));
             mEmptyView.setVisibility(View.VISIBLE);
         } else {
             mEmptyView.setVisibility(View.GONE);

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

@@ -0,0 +1,28 @@
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="81dp"
+    android:width="105dp"
+    android:viewportHeight="81"
+    android:viewportWidth="105" >
+
+    <path
+        android:fillColor="@color/grey_lighten_10"
+        android:pathData="M36.6,79L59,78.7c0,0,15-0.1,22.4-0.1l22.4-0.1l-1,1l-0.2-9.7c-0.1-3.2-0.2-6.5-0.1-9.7V40.5l0.1-39l0.9,0.9 L58.9,2.2L36.5,2L14.2,1.8l0.4-0.4l-0.1,6.9c0,0.2-0.1,0.4-0.4,0.4c-0.2,0-0.4-0.1-0.4-0.4l-0.1-6.9c0-0.2,0.1-0.4,0.4-0.4l22.4-0.1 h22.2l44.7-0.2c0.5,0,0.9,0.4,0.9,0.9l0.1,39v19.6c0,6.5,0.2,13.1,0.3,19.6c0,0.6-0.4,1-1,1l-22.4-0.1c-7.5,0-15,0-22.4-0.1 s-15-0.1-22.4-0.3L14,79.8c-0.1,0-0.1-0.1-0.2-0.2c0.1-0.1,0.3-0.1,0.4-0.1C21.6,79.2,29.1,79,36.6,79z M14.9,33.3 c0-1.2-0.1-2.4-0.4-3.6c0-0.1-0.1-0.2-0.2-0.3H14c-0.1,0.1-0.1,0.1-0.1,0.2c-0.3,1.2-0.4,2.3-0.4,3.6c-0.1,1.2-0.1,2.3-0.1,3.6 c0,0.6,0,1.2,0.1,1.8c0.1,1.7,0.1,3.5,0.3,5.2c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.1,0.4-0.4c0.2-1.7,0.4-3.3,0.3-5 c0-0.7,0-1.3,0.1-2l-0.1-1.8V33.3z" >
+    </path>
+
+    <path
+        android:fillColor="@color/grey_lighten_10"
+        android:pathData="M95.6,70.7H91c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S95.8,70.7,95.6,70.7z M86.4,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S86.6,70.7,86.4,70.7z M77.2,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S77.4,70.7,77.2,70.7z M67.9,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S68.2,70.7,67.9,70.7z M58.7,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S59,70.7,58.7,70.7z M49.5,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S49.8,70.7,49.5,70.7z M40.3,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S40.6,70.7,40.3,70.7z M31.1,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S31.3,70.7,31.1,70.7z M21.9,70.7h-4.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4.6c0.3,0,0.5,0.2,0.5,0.5S22.1,70.7,21.9,70.7z M12.7,70.7H8.1c-0.1,0-0.1,0-0.2,0c-0.4-0.2-0.4-0.2,0.6-2.9c0.1-0.2,0.4-0.4,0.6-0.3c0.2,0.1,0.4,0.4,0.3,0.6c-0.3,0.7-0.5,1.3-0.6,1.6h4c0.3,0,0.5,0.2,0.5,0.5S12.9,70.7,12.7,70.7z M94.8,66.3c-0.2,0-0.4-0.1-0.4-0.3c-0.4-1.5-0.8-3-1.3-4.4c-0.1-0.2,0-0.5,0.3-0.6c0.2-0.1,0.5,0,0.6,0.3c0.5,1.4,0.9,2.9,1.3,4.5c0.1,0.2-0.1,0.5-0.3,0.6C94.9,66.3,94.9,66.3,94.8,66.3z M10.6,64.1c-0.1,0-0.1,0-0.2,0c-0.2-0.1-0.3-0.4-0.2-0.6c0.6-1.4,1.3-2.8,2-4.2c0.1-0.2,0.4-0.3,0.6-0.2c0.2,0.1,0.3,0.4,0.2,0.6c-0.7,1.4-1.3,2.7-2,4.2C11,64,10.8,64.1,10.6,64.1z M91.8,57.6c-0.2,0-0.3-0.1-0.4-0.3c-0.7-1.5-1.4-2.8-2.2-4c-0.1-0.2-0.1-0.5,0.1-0.6c0.2-0.1,0.5-0.1,0.6,0.1c0.8,1.2,1.5,2.6,2.2,4.1c0.1,0.2,0,0.5-0.2,0.6C91.9,57.6,91.9,57.6,91.8,57.6z M14.8,55.9c-0.1,0-0.2,0-0.2-0.1c-0.2-0.1-0.3-0.4-0.2-0.6c0.8-1.4,1.6-2.7,2.5-3.9c0.1-0.2,0.4-0.3,0.6-0.1c0.2,0.1,0.3,0.4,0.1,0.6c-0.8,1.2-1.6,2.5-2.4,3.9C15.1,55.8,15,55.9,14.8,55.9z M60.6,50.2c0,0-0.1,0-0.1,0c-1.2-0.3-2.4-1.2-3.8-2.9c-0.2-0.2-0.1-0.5,0.1-0.6c0.2-0.2,0.5-0.1,0.6,0.1c1.3,1.5,2.3,2.3,3.4,2.6c0.2,0.1,0.4,0.3,0.3,0.6C60.9,50.1,60.8,50.2,60.6,50.2z M86.7,50c-0.1,0-0.2,0-0.3-0.1c-1.2-1.1-2.4-1.9-3.7-2.4c-0.2-0.1-0.4-0.4-0.3-0.6s0.4-0.4,0.6-0.3c1.4,0.5,2.7,1.4,4,2.6c0.2,0.2,0.2,0.5,0,0.7C87,50,86.8,50,86.7,50z M65.1,50c-0.2,0-0.4-0.1-0.4-0.4c-0.1-0.2,0.1-0.5,0.3-0.6c1.6-0.4,3-0.9,4.3-1.4c0.2-0.1,0.5,0,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.3,0.5-2.8,1.1-4.4,1.5C65.2,50,65.1,50,65.1,50z M19.9,48.2c-0.1,0-0.2,0-0.3-0.1c-0.2-0.2-0.2-0.4-0.1-0.6c1-1.3,2-2.4,3-3.5c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c-1,1.1-2,2.2-3,3.5C20.2,48.2,20.1,48.2,19.9,48.2z M73.8,47c-0.2,0-0.4-0.1-0.4-0.4c-0.1-0.2,0.1-0.5,0.3-0.6c1.6-0.4,3.1-0.5,4.7-0.4c0.3,0,0.4,0.2,0.4,0.5c0,0.3-0.2,0.5-0.5,0.4c-1.5-0.1-2.9,0-4.4,0.4C73.9,47,73.9,47,73.8,47z M54.1,43.8c-0.1,0-0.3-0.1-0.4-0.2c-0.8-1.1-1.8-2.4-2.9-3.5c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0c1.1,1.2,2.1,2.5,3,3.6c0.2,0.2,0.1,0.5-0.1,0.6C54.3,43.8,54.2,43.8,54.1,43.8z M26.3,41.6c-0.1,0-0.3-0.1-0.4-0.2c-0.2-0.2-0.1-0.5,0.1-0.6c1.2-1,2.5-1.9,3.8-2.7c0.2-0.1,0.5-0.1,0.6,0.2c0.1,0.2,0.1,0.5-0.2,0.6c-1.2,0.7-2.5,1.6-3.7,2.6C26.5,41.6,26.4,41.6,26.3,41.6z M47.6,37.4c-0.1,0-0.2,0-0.2-0.1c-1.3-0.8-2.7-1.2-4.2-1.4c-0.3,0-0.4-0.3-0.4-0.5c0-0.3,0.3-0.4,0.5-0.4c1.6,0.2,3.1,0.8,4.5,1.6c0.2,0.1,0.3,0.4,0.2,0.6C47.9,37.3,47.8,37.4,47.6,37.4z M34.3,37c-0.2,0-0.4-0.1-0.4-0.3c-0.1-0.2,0-0.5,0.3-0.6c1.5-0.5,3-0.9,4.6-1.1c0.3,0,0.5,0.1,0.5,0.4c0,0.3-0.1,0.5-0.4,0.5c-1.5,0.2-2.9,0.5-4.4,1C34.4,37,34.3,37,34.3,37z" >
+    </path>
+
+    <path
+        android:fillColor="@color/grey_lighten_10"
+        android:pathData="M79.7,33.2c-1.3,0-2.5-0.3-3.6-0.9c-0.2-0.1-0.3-0.4-0.2-0.6c0.1-0.2,0.4-0.3,0.6-0.2c2.3,1.1,5.2,1,7.3-0.5c0.2-0.1,0.5-0.1,0.6,0.1c0.1,0.2,0.1,0.5-0.1,0.6C82.9,32.7,81.3,33.2,79.7,33.2z M72.9,29.2c-0.2,0-0.3-0.1-0.4-0.2c-0.8-1.3-1.1-2.8-1.1-4.3c0-0.1,0-0.3,0-0.4c0-0.3,0.2-0.5,0.5-0.4c0.3,0,0.5,0.2,0.4,0.5c0,0.1,0,0.2,0,0.3c0,1.3,0.4,2.7,1,3.8c0.1,0.2,0.1,0.5-0.2,0.6C73.1,29.2,73,29.2,72.9,29.2z M86.9,28.3c-0.1,0-0.1,0-0.2,0c-0.2-0.1-0.3-0.4-0.2-0.6c0.4-0.9,0.6-1.9,0.6-2.9c0-0.4,0-0.9-0.1-1.3c0-0.3,0.1-0.5,0.4-0.5c0.3,0,0.5,0.1,0.5,0.4c0.1,0.5,0.1,1,0.1,1.5c0,1.1-0.2,2.2-0.7,3.3C87.3,28.2,87.1,28.3,86.9,28.3z M73.3,20.5c-0.1,0-0.2,0-0.3-0.1c-0.2-0.1-0.3-0.4-0.1-0.6c1-1.3,2.3-2.4,3.8-2.9c0.2-0.1,0.5,0,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.4,0.5-2.5,1.4-3.4,2.6C73.6,20.5,73.5,20.5,73.3,20.5z M85.4,19.7c-0.1,0-0.2,0-0.3-0.1c-1-1.1-2.3-1.8-3.7-2.1c-0.2-0.1-0.4-0.3-0.3-0.6c0.1-0.2,0.3-0.4,0.6-0.3c1.6,0.4,3,1.2,4.2,2.4c0.2,0.2,0.2,0.5,0,0.7C85.6,19.7,85.5,19.7,85.4,19.7z" >
+    </path>
+
+    <path
+        android:fillColor="@color/grey_lighten_10"
+        android:pathData="M0.9,23.9l4.5-0.1c0.2,0,0.4,0.1,0.4,0.4c0,0.2-0.1,0.4-0.4,0.4l-4.5-0.1c-0.1,0-0.3-0.1-0.3-0.3C0.6,24,0.7,23.9,0.9,23.9z M7.8,21.7c0.4-1.5,1.2-2.9,2-4.2c0.1-0.2,0.4-0.2,0.6-0.1c0.2,0.1,0.2,0.4,0.1,0.6C9.6,19.2,9,20.6,8.6,22c-0.1,0.1-0.3,0.3-0.4,0.3C7.8,22,7.8,21.9,7.8,21.7z M13.5,14.4c0.7-0.3,1.6-0.4,2.4-0.4c0.8,0,1.6,0.1,2.4,0.4c0.2,0.1,0.4,0.4,0.3,0.6s-0.4,0.4-0.6,0.3c-1.3-0.5-2.8-0.6-4.1-0.1c-0.2,0.1-0.4,0-0.5-0.2V15C13.2,14.7,13.3,14.4,13.5,14.4z M21.4,17.8c0.2,0.1,0.4,0.1,0.6,0.1c0.4-0.2,0.7-0.4,1.1-0.4c0.8-0.2,1.6-0.3,2.4-0.3c0.3,0,0.4,0.2,0.4,0.4c0,0.3-0.2,0.4-0.4,0.4c-0.7,0-1.4,0.1-2.1,0.3c-0.4,0.1-0.7,0.3-1,0.4c-0.5,0.2-1.1,0.2-1.6-0.1c-0.2-0.2-0.2-0.6,0-0.8C20.9,17.8,21.1,17.7,21.4,17.8z M29.7,19.3c0.4,0.7,0.7,1.5,0.8,2.3c0.1,0.8,0.1,1.6,0.1,2.4c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.1-0.4-0.4c0.1-1.5-0.2-3-0.9-4.2c-0.1-0.2-0.1-0.4,0.1-0.6C29.2,19,29.6,19,29.7,19.3z M34.6,23.9H38c0.1,0,0.3,0.1,0.3,0.3c0,0.1-0.1,0.3-0.2,0.3h-3.5c-0.2,0-0.4-0.1-0.4-0.4C34.3,24.1,34.4,23.9,34.6,23.9z" >
+    </path>
+
+</vector>

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

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<LinearLayout
+    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:gravity="center"
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    android:orientation="vertical" >
+
+    <android.support.v4.widget.NestedScrollView
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent" >
+
+        <LinearLayout
+            android:layout_height="wrap_content"
+            android:layout_width="match_parent"
+            android:gravity="center"
+            android:orientation="vertical" >
+
+            <ImageView
+                android:id="@+id/image"
+                android:adjustViewBounds="true"
+                android:contentDescription="@string/content_description_person_reading_device_notification"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/margin_extra_large"
+                android:layout_marginTop="@dimen/margin_extra_large"
+                android:layout_width="wrap_content"
+                android:visibility="gone"
+                tools:srcCompat="@drawable/jetpack_connection_notifications"
+                tools:visibility="visible" >
+            </ImageView>
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/title"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                app:fixWidowWords="true"
+                tools:text="No comments yet"
+                style="@style/ActionableEmptyStateTitle" >
+            </org.wordpress.android.widgets.WPTextView>
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/subtitle"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:visibility="gone"
+                app:fixWidowWords="true"
+                tools:text="Join a conversation: comment on posts from blogs you follow"
+                tools:visibility="visible"
+                style="@style/ActionableEmptyStateSubtitle" >
+            </org.wordpress.android.widgets.WPTextView>
+
+            <android.support.v7.widget.AppCompatButton
+                android:id="@+id/button"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/margin_extra_large"
+                android:layout_width="wrap_content"
+                android:theme="@style/ActionableEmptyStateButton"
+                android:visibility="gone"
+                tools:text="Go to Reader"
+                tools:visibility="visible" >
+            </android.support.v7.widget.AppCompatButton>
+
+        </LinearLayout>
+
+    </android.support.v4.widget.NestedScrollView>
+
+</LinearLayout>

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

@@ -33,21 +33,15 @@
         </org.wordpress.android.util.widgets.CustomSwipeRefreshLayout>
     </LinearLayout>
 
-    <org.wordpress.android.widgets.WPTextView
-        android:id="@+id/empty_view"
-        style="@style/WordPress.EmptyList.Title"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center"
-        android:layout_marginBottom="@dimen/empty_list_title_bottom_margin"
-        android:layout_marginLeft="@dimen/empty_list_title_side_margin"
-        android:layout_marginRight="@dimen/empty_list_title_side_margin"
-        android:gravity="center"
-        android:text="@string/media_empty_list"
+    <org.wordpress.android.ui.ActionableEmptyView
+        android:id="@+id/actionable_empty_view"
+        android:layout_height="match_parent"
+        android:layout_width="match_parent"
         android:visibility="gone"
-        app:fixWidowWords="true"
-        tools:visibility="visible"
-        android:layout_marginStart="@dimen/empty_list_title_side_margin"
-        android:layout_marginEnd="@dimen/empty_list_title_side_margin"/>
+        app:aevButton="@string/media_empty_upload_media"
+        app:aevImage="@drawable/img_illustration_media"
+        app:aevTitle="@string/media_empty_list"
+        tools:visibility="visible" >
+    </org.wordpress.android.ui.ActionableEmptyView>
 
 </FrameLayout>

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

@@ -139,4 +139,18 @@
         <attr name="wpToolbarDisableScrollGestures" format="boolean"/>
     </declare-styleable>
 
+    <!--
+        Actionable Empty View
+    -->
+    <declare-styleable name="ActionableEmptyView">
+        <!-- Optional: string text of button -->
+        <attr name="aevButton" format="string"/>
+        <!-- Optional: resource id of image -->
+        <attr name="aevImage" format="reference"/>
+        <!-- Optional: string text of subtitle -->
+        <attr name="aevSubtitle" format="string"/>
+        <!-- Required: string text of title -->
+        <attr name="aevTitle" format="string"/>
+    </declare-styleable>
+
 </resources>

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

@@ -315,5 +315,9 @@
     <dimen name="activity_log_icon_size">40dp</dimen>
     <dimen name="activity_log_icon_margin">16dp</dimen>
 
+    <!-- actionable empty view -->
+    <dimen name="actionable_empty_view_text_margin_horizontal">30dp</dimen>
+    <dimen name="actionable_empty_view_text_maximum_width">440dp</dimen>
+
     <dimen name="snackbar_message_margin_bottom">18dp</dimen>
 </resources>

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

@@ -198,11 +198,12 @@
     <!-- Delete Media -->
     <string name="cannot_delete_multi_media_items">Some media can\'t be deleted at this time. Try again later.</string>
     <string name="cannot_retry_deleted_media_item">Media has been removed. Delete it from this post?</string>
-    <string name="media_empty_list">No media</string>
+    <string name="media_empty_list">You don\'t have any media</string>
     <string name="media_empty_image_list">You don\'t have any images</string>
     <string name="media_empty_videos_list">You don\'t have any videos</string>
     <string name="media_empty_documents_list">You don\'t have any documents</string>
     <string name="media_empty_audio_list">You don\'t have any audio</string>
+    <string name="media_empty_upload_media">Upload media</string>
     <string name="delete">Delete</string>
     <string name="confirm_delete_media_image">Delete this image?</string>
     <string name="confirm_remove_media_image">Remove this image from the post?</string>