Convert subscriptions screen to cards (#6261)

4 files changed, 182 insertions, 170 deletions

diff --git a/app/src/main/java/de/danoeh/antennapod/adapter/CoverLoader.java b/app/src/main/java/de/danoeh/antennapod/adapter/CoverLoader.java
index dc82e3adc..1d06bf07c 100644
--- a/app/src/main/java/de/danoeh/antennapod/adapter/CoverLoader.java
+++ b/app/src/main/java/de/danoeh/antennapod/adapter/CoverLoader.java
@@ -1,40 +1,28 @@
 package de.danoeh.antennapod.adapter;
 
-import android.content.Context;
 import android.graphics.drawable.Drawable;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.core.content.ContextCompat;
-import androidx.core.graphics.ColorUtils;
-import androidx.palette.graphics.Palette;
-
 import android.view.View;
 import android.widget.ImageView;
 import android.widget.TextView;
-
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.RequestBuilder;
 import com.bumptech.glide.request.RequestOptions;
 import com.bumptech.glide.request.target.CustomViewTarget;
-
-import java.lang.ref.WeakReference;
-
 import com.bumptech.glide.request.transition.Transition;
-
-import de.danoeh.antennapod.R;
 import de.danoeh.antennapod.activity.MainActivity;
-import de.danoeh.antennapod.storage.preferences.UserPreferences;
-import de.danoeh.antennapod.ui.common.ThemeUtils;
-import de.danoeh.antennapod.ui.glide.PaletteBitmap;
+
+import java.lang.ref.WeakReference;
 
 public class CoverLoader {
     private int resource = 0;
     private String uri;
     private String fallbackUri;
-    private TextView txtvPlaceholder;
     private ImageView imgvCover;
     private boolean textAndImageCombined;
     private MainActivity activity;
+    private TextView fallbackTitle;
 
     public CoverLoader(MainActivity activity) {
         this.activity = activity;
@@ -60,31 +48,30 @@ public class CoverLoader {
         return this;
     }
 
-    public CoverLoader withPlaceholderView(TextView placeholderView) {
-        txtvPlaceholder = placeholderView;
+    public CoverLoader withPlaceholderView(TextView title) {
+        this.fallbackTitle = title;
         return this;
     }
 
     /**
      * Set cover text and if it should be shown even if there is a cover image.
-     *
-     * @param placeholderView      Cover text.
+     * @param fallbackTitle Fallback title text
      * @param textAndImageCombined Show cover text even if there is a cover image?
      */
     @NonNull
-    public CoverLoader withPlaceholderView(@NonNull TextView placeholderView, boolean textAndImageCombined) {
-        this.txtvPlaceholder = placeholderView;
+    public CoverLoader withPlaceholderView(TextView fallbackTitle, boolean textAndImageCombined) {
+        this.fallbackTitle = fallbackTitle;
         this.textAndImageCombined = textAndImageCombined;
         return this;
     }
 
     public void load() {
-        CoverTarget coverTarget = new CoverTarget(txtvPlaceholder, imgvCover, textAndImageCombined);
+        CoverTarget coverTarget = new CoverTarget(fallbackTitle, imgvCover, textAndImageCombined);
 
         if (resource != 0) {
             Glide.with(activity).clear(coverTarget);
             imgvCover.setImageResource(resource);
-            CoverTarget.setPlaceholderVisibility(txtvPlaceholder, textAndImageCombined, null);
+            CoverTarget.setTitleVisibility(fallbackTitle, textAndImageCombined);
             return;
         }
 
@@ -92,14 +79,14 @@ public class CoverLoader {
                 .fitCenter()
                 .dontAnimate();
 
-        RequestBuilder<PaletteBitmap> builder = Glide.with(activity)
-                .as(PaletteBitmap.class)
+        RequestBuilder<Drawable> builder = Glide.with(activity)
+                .as(Drawable.class)
                 .load(uri)
                 .apply(options);
 
-        if (fallbackUri != null && txtvPlaceholder != null && imgvCover != null) {
+        if (fallbackUri != null) {
             builder = builder.error(Glide.with(activity)
-                    .as(PaletteBitmap.class)
+                    .as(Drawable.class)
                     .load(fallbackUri)
                     .apply(options));
         }
@@ -107,64 +94,41 @@ public class CoverLoader {
         builder.into(coverTarget);
     }
 
-    static class CoverTarget extends CustomViewTarget<ImageView, PaletteBitmap> {
-        private final WeakReference<TextView> placeholder;
+    static class CoverTarget extends CustomViewTarget<ImageView, Drawable> {
+        private final WeakReference<TextView> fallbackTitle;
         private final WeakReference<ImageView> cover;
-        private boolean textAndImageCombined;
+        private final boolean textAndImageCombined;
 
-        public CoverTarget(TextView txtvPlaceholder, ImageView imgvCover, boolean textAndImageCombined) {
-            super(imgvCover);
-            if (txtvPlaceholder != null) {
-                txtvPlaceholder.setVisibility(View.VISIBLE);
-            }
-            placeholder = new WeakReference<>(txtvPlaceholder);
-            cover = new WeakReference<>(imgvCover);
+        public CoverTarget(TextView fallbackTitle, ImageView coverImage, boolean textAndImageCombined) {
+            super(coverImage);
+            this.fallbackTitle = new WeakReference<>(fallbackTitle);
+            this.cover = new WeakReference<>(coverImage);
             this.textAndImageCombined = textAndImageCombined;
         }
 
         @Override
         public void onLoadFailed(Drawable errorDrawable) {
-            setPlaceholderVisibility(this.placeholder.get(), true, null);
+            setTitleVisibility(fallbackTitle.get(), true);
         }
 
         @Override
-        public void onResourceReady(@NonNull PaletteBitmap resource,
-                                    @Nullable Transition<? super PaletteBitmap> transition) {
+        public void onResourceReady(@NonNull Drawable resource,
+                                    @Nullable Transition<? super Drawable> transition) {
             ImageView ivCover = cover.get();
-            ivCover.setImageBitmap(resource.bitmap);
-            setPlaceholderVisibility(placeholder.get(), textAndImageCombined, resource.palette);
+            ivCover.setImageDrawable(resource);
+            setTitleVisibility(fallbackTitle.get(), textAndImageCombined);
         }
 
         @Override
         protected void onResourceCleared(@Nullable Drawable placeholder) {
             ImageView ivCover = cover.get();
             ivCover.setImageDrawable(placeholder);
-            setPlaceholderVisibility(this.placeholder.get(), textAndImageCombined, null);
+            setTitleVisibility(fallbackTitle.get(),  textAndImageCombined);
         }
 
-        static void setPlaceholderVisibility(TextView placeholder, boolean textAndImageCombined, Palette palette) {
-            boolean showTitle = UserPreferences.shouldShowSubscriptionTitle();
-            if (placeholder != null) {
-                if (textAndImageCombined || showTitle) {
-                    final Context context = placeholder.getContext();
-                    placeholder.setVisibility(View.VISIBLE);
-                    int bgColor = ContextCompat.getColor(context, R.color.feed_text_bg);
-                    if (palette == null || !showTitle) {
-                        placeholder.setBackgroundColor(bgColor);
-                        placeholder.setTextColor(ThemeUtils.getColorFromAttr(placeholder.getContext(),
-                                android.R.attr.textColorPrimary));
-                        return;
-                    }
-                    int dominantColor = palette.getDominantColor(bgColor);
-                    int textColor = ContextCompat.getColor(context, R.color.white);
-                    if (ColorUtils.calculateLuminance(dominantColor) > 0.5) {
-                        textColor = ContextCompat.getColor(context, R.color.black);
-                    }
-                    placeholder.setTextColor(textColor);
-                    placeholder.setBackgroundColor(dominantColor);
-                } else {
-                    placeholder.setVisibility(View.INVISIBLE);
-                }
+        static void setTitleVisibility(TextView fallbackTitle, boolean textAndImageCombined) {
+            if (fallbackTitle != null) {
+                fallbackTitle.setVisibility(textAndImageCombined ? View.VISIBLE : View.GONE);
             }
         }
     }
diff --git a/app/src/main/java/de/danoeh/antennapod/adapter/SubscriptionsRecyclerAdapter.java b/app/src/main/java/de/danoeh/antennapod/adapter/SubscriptionsRecyclerAdapter.java
index 7be417984..bfa37b600 100644
--- a/app/src/main/java/de/danoeh/antennapod/adapter/SubscriptionsRecyclerAdapter.java
+++ b/app/src/main/java/de/danoeh/antennapod/adapter/SubscriptionsRecyclerAdapter.java
@@ -5,7 +5,6 @@ import android.graphics.Canvas;
 import android.graphics.Rect;
 import android.graphics.drawable.Drawable;
 import android.os.Build;
-import android.text.TextUtils;
 import android.view.ContextMenu;
 import android.view.InputDevice;
 import android.view.LayoutInflater;
@@ -17,20 +16,19 @@ import android.view.ViewGroup;
 import android.widget.CheckBox;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
-import android.widget.RelativeLayout;
 import android.widget.TextView;
 
 import androidx.annotation.NonNull;
 import androidx.appcompat.content.res.AppCompatResources;
-import androidx.core.content.ContextCompat;
+import androidx.cardview.widget.CardView;
 import androidx.fragment.app.Fragment;
 import androidx.recyclerview.widget.RecyclerView;
 
+import com.google.android.material.elevation.SurfaceColors;
 import java.lang.ref.WeakReference;
 import java.text.NumberFormat;
 import java.util.ArrayList;
 import java.util.List;
-import java.util.Locale;
 
 import de.danoeh.antennapod.R;
 import de.danoeh.antennapod.activity.MainActivity;
@@ -39,7 +37,6 @@ import de.danoeh.antennapod.core.storage.NavDrawerData;
 import de.danoeh.antennapod.fragment.FeedItemlistFragment;
 import de.danoeh.antennapod.fragment.SubscriptionFragment;
 import de.danoeh.antennapod.model.feed.Feed;
-import de.danoeh.antennapod.ui.common.TriangleLabelView;
 
 /**
  * Adapter for subscriptions
@@ -52,6 +49,7 @@ public class SubscriptionsRecyclerAdapter extends SelectableAdapter<Subscription
     private List<NavDrawerData.DrawerItem> listItems;
     private NavDrawerData.DrawerItem selectedItem = null;
     int longPressedPosition = 0; // used to init actionMode
+    private int columnCount = 3;
 
     public SubscriptionsRecyclerAdapter(MainActivity mainActivity) {
         super(mainActivity);
@@ -60,6 +58,10 @@ public class SubscriptionsRecyclerAdapter extends SelectableAdapter<Subscription
         setHasStableIds(true);
     }
 
+    public void setColumnCount(int columnCount) {
+        this.columnCount = columnCount;
+    }
+
     public Object getItem(int position) {
         return listItems.get(position);
     }
@@ -72,24 +74,7 @@ public class SubscriptionsRecyclerAdapter extends SelectableAdapter<Subscription
     @Override
     public SubscriptionViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
         View itemView = LayoutInflater.from(mainActivityRef.get()).inflate(R.layout.subscription_item, parent, false);
-        TextView feedTitle = itemView.findViewById(R.id.txtvTitle);
-        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) feedTitle.getLayoutParams();
-        int topAndBottomItemId = R.id.imgvCover;
-        int belowItemId = 0;
-
-        if (viewType == COVER_WITH_TITLE) {
-            topAndBottomItemId = 0;
-            belowItemId = R.id.imgvCover;
-            feedTitle.setBackgroundColor(
-                    ContextCompat.getColor(feedTitle.getContext(), R.color.feed_text_bg));
-            int padding = (int) convertDpToPixel(feedTitle.getContext(), 6);
-            feedTitle.setPadding(padding, padding, padding, padding);
-        }
-        params.addRule(RelativeLayout.BELOW, belowItemId);
-        params.addRule(RelativeLayout.ALIGN_TOP, topAndBottomItemId);
-        params.addRule(RelativeLayout.ALIGN_BOTTOM, topAndBottomItemId);
-        feedTitle.setLayoutParams(params);
-        feedTitle.setSingleLine(viewType == COVER_WITH_TITLE);
+        itemView.findViewById(R.id.titleLabel).setVisibility(viewType == COVER_WITH_TITLE ? View.VISIBLE : View.GONE);
         return new SubscriptionViewHolder(itemView);
     }
 
@@ -107,11 +92,11 @@ public class SubscriptionsRecyclerAdapter extends SelectableAdapter<Subscription
             holder.selectCheckbox.setChecked((isSelected(position)));
             holder.selectCheckbox.setOnCheckedChangeListener((buttonView, isChecked)
                     -> setSelected(holder.getBindingAdapterPosition(), isChecked));
-            holder.imageView.setAlpha(0.6f);
+            holder.coverImage.setAlpha(0.6f);
             holder.count.setVisibility(View.GONE);
         } else {
             holder.selectView.setVisibility(View.GONE);
-            holder.imageView.setAlpha(1.0f);
+            holder.coverImage.setAlpha(1.0f);
         }
 
         holder.itemView.setOnLongClickListener(v -> {
@@ -224,55 +209,74 @@ public class SubscriptionsRecyclerAdapter extends SelectableAdapter<Subscription
     }
 
     public class SubscriptionViewHolder extends RecyclerView.ViewHolder {
-        private final TextView feedTitle;
-        private final ImageView imageView;
-        private final TriangleLabelView count;
+        private final TextView title;
+        private final ImageView coverImage;
+        private final TextView count;
+        private final TextView fallbackTitle;
         private final FrameLayout selectView;
         private final CheckBox selectCheckbox;
+        private final CardView card;
 
         public SubscriptionViewHolder(@NonNull View itemView) {
             super(itemView);
-            feedTitle = itemView.findViewById(R.id.txtvTitle);
-            imageView = itemView.findViewById(R.id.imgvCover);
-            count = itemView.findViewById(R.id.triangleCountView);
-            selectView = itemView.findViewById(R.id.selectView);
+            title = itemView.findViewById(R.id.titleLabel);
+            coverImage = itemView.findViewById(R.id.coverImage);
+            count = itemView.findViewById(R.id.countViewPill);
+            fallbackTitle = itemView.findViewById(R.id.fallbackTitleLabel);
+            selectView = itemView.findViewById(R.id.selectContainer);
             selectCheckbox = itemView.findViewById(R.id.selectCheckBox);
+            card = itemView.findViewById(R.id.outerContainer);
         }
 
         public void bind(NavDrawerData.DrawerItem drawerItem) {
             Drawable drawable = AppCompatResources.getDrawable(selectView.getContext(),
                     R.drawable.ic_checkbox_background);
             selectView.setBackground(drawable); // Setting this in XML crashes API <= 21
-            feedTitle.setText(drawerItem.getTitle());
-            imageView.setContentDescription(drawerItem.getTitle());
-            feedTitle.setVisibility(View.VISIBLE);
-            if (TextUtils.getLayoutDirectionFromLocale(Locale.getDefault()) == View.LAYOUT_DIRECTION_RTL) {
-                count.setCorner(TriangleLabelView.Corner.TOP_LEFT);
-            }
-
+            title.setText(drawerItem.getTitle());
+            fallbackTitle.setText(drawerItem.getTitle());
+            coverImage.setContentDescription(drawerItem.getTitle());
             if (drawerItem.getCounter() > 0) {
-                count.setPrimaryText(NumberFormat.getInstance().format(drawerItem.getCounter()));
+                count.setText(NumberFormat.getInstance().format(drawerItem.getCounter()));
                 count.setVisibility(View.VISIBLE);
             } else {
                 count.setVisibility(View.GONE);
             }
 
+            CoverLoader coverLoader = new CoverLoader(mainActivityRef.get());
+            boolean textAndImageCombined;
             if (drawerItem.type == NavDrawerData.DrawerItem.Type.FEED) {
                 Feed feed = ((NavDrawerData.FeedDrawerItem) drawerItem).feed;
-                boolean textAndImageCombind = feed.isLocalFeed()
-                        && feed.getImageUrl() != null && feed.getImageUrl().startsWith(Feed.PREFIX_GENERATIVE_COVER);
-                new CoverLoader(mainActivityRef.get())
-                        .withUri(feed.getImageUrl())
-                        .withPlaceholderView(feedTitle, textAndImageCombind)
-                        .withCoverView(imageView)
-                        .load();
+                textAndImageCombined = feed.isLocalFeed() && feed.getImageUrl() != null
+                        && feed.getImageUrl().startsWith(Feed.PREFIX_GENERATIVE_COVER);
+                coverLoader.withUri(feed.getImageUrl());
             } else {
-                new CoverLoader(mainActivityRef.get())
-                        .withResource(R.drawable.ic_tag)
-                        .withPlaceholderView(feedTitle, true)
-                        .withCoverView(imageView)
-                        .load();
+                textAndImageCombined = true;
+                coverLoader.withResource(R.drawable.ic_tag);
+            }
+            if (UserPreferences.shouldShowSubscriptionTitle()) {
+                // No need for fallback title when already showing title
+                fallbackTitle.setVisibility(View.GONE);
+            } else {
+                coverLoader.withPlaceholderView(fallbackTitle, textAndImageCombined);
+            }
+            coverLoader.withCoverView(coverImage);
+            coverLoader.load();
+
+            float density = mainActivityRef.get().getResources().getDisplayMetrics().density;
+            card.setCardBackgroundColor(SurfaceColors.getColorForElevation(mainActivityRef.get(), 1 * density));
+
+            int textPadding = columnCount <= 3 ? 16 : 8;
+            title.setPadding(textPadding, textPadding, textPadding, textPadding);
+            fallbackTitle.setPadding(textPadding, textPadding, textPadding, textPadding);
+
+            int textSize = 14;
+            if (columnCount == 3) {
+                textSize = 15;
+            } else if (columnCount == 2) {
+                textSize = 16;
             }
+            title.setTextSize(textSize);
+            fallbackTitle.setTextSize(textSize);
         }
     }
 
diff --git a/app/src/main/java/de/danoeh/antennapod/fragment/SubscriptionFragment.java b/app/src/main/java/de/danoeh/antennapod/fragment/SubscriptionFragment.java
index 15886cf9a..cc13f4ce3 100644
--- a/app/src/main/java/de/danoeh/antennapod/fragment/SubscriptionFragment.java
+++ b/app/src/main/java/de/danoeh/antennapod/fragment/SubscriptionFragment.java
@@ -142,7 +142,6 @@ public class SubscriptionFragment extends Fragment
         }
 
         subscriptionRecycler = root.findViewById(R.id.subscriptions_grid);
-        setColumnNumber(prefs.getInt(PREF_NUM_COLUMNS, getDefaultNumOfColumns()));
         subscriptionRecycler.addItemDecoration(new SubscriptionsRecyclerAdapter.GridDividerItemDecorator());
         registerForContextMenu(subscriptionRecycler);
         subscriptionRecycler.addOnScrollListener(new LiftOnScrollListener(root.findViewById(R.id.appbar)));
@@ -153,6 +152,7 @@ public class SubscriptionFragment extends Fragment
                 MenuItemUtils.setOnClickListeners(menu, SubscriptionFragment.this::onContextItemSelected);
             }
         };
+        setColumnNumber(prefs.getInt(PREF_NUM_COLUMNS, getDefaultNumOfColumns()));
         subscriptionAdapter.setOnSelectModeListener(this);
         subscriptionRecycler.setAdapter(subscriptionAdapter);
         setupEmptyView();
@@ -251,6 +251,7 @@ public class SubscriptionFragment extends Fragment
     private void setColumnNumber(int columns) {
         GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(),
                 columns, RecyclerView.VERTICAL, false);
+        subscriptionAdapter.setColumnCount(columns);
         subscriptionRecycler.setLayoutManager(gridLayoutManager);
         prefs.edit().putInt(PREF_NUM_COLUMNS, columns).apply();
         refreshToolbarState();
diff --git a/app/src/main/res/layout/subscription_item.xml b/app/src/main/res/layout/subscription_item.xml
index 50cb9745f..0b689fa28 100644
--- a/app/src/main/res/layout/subscription_item.xml
+++ b/app/src/main/res/layout/subscription_item.xml
@@ -1,64 +1,107 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout
+<FrameLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:squareImageView="http://schemas.android.com/apk/de.danoeh.antennapod"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:foreground="?attr/selectableItemBackground">
+    android:padding="4dp">
 
-    <de.danoeh.antennapod.ui.common.SquareImageView
-        android:id="@+id/imgvCover"
+    <androidx.cardview.widget.CardView
+        android:id="@+id/outerContainer"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/non_square_icon_background"
-        android:scaleType="fitCenter"
-        squareImageView:direction="width"
-        tools:src="@tools:sample/avatars" />
+        android:clickable="false"
+        android:foreground="?attr/selectableItemBackground"
+        app:cardCornerRadius="12dp"
+        app:cardElevation="0dp">
 
-    <com.joanzapata.iconify.widget.IconTextView
-        android:id="@+id/txtvTitle"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_alignStart="@+id/imgvCover"
-        android:layout_alignLeft="@+id/imgvCover"
-        android:layout_alignTop="@+id/imgvCover"
-        android:layout_alignEnd="@+id/imgvCover"
-        android:layout_alignRight="@+id/imgvCover"
-        android:layout_alignBottom="@+id/imgvCover"
-        android:background="@color/non_square_icon_background"
-        android:ellipsize="end"
-        android:gravity="center"
-        android:textColor="?android:attr/textColorPrimary"
-        tools:text="@string/app_name" />
-
-    <de.danoeh.antennapod.ui.common.TriangleLabelView
-        android:id="@+id/triangleCountView"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_alignParentTop="true"
-        android:layout_alignParentEnd="true"
-        android:layout_alignParentRight="true"
-        app:backgroundColor="?attr/colorSecondary"
-        app:corner="rightTop"
-        app:primaryText="Test"
-        app:primaryTextColor="?attr/colorOnSecondary"
-        app:primaryTextSize="12sp" />
-
-    <FrameLayout
-        android:id="@+id/selectView"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content">
-
-        <CheckBox
-            android:id="@+id/selectCheckBox"
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <androidx.cardview.widget.CardView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="1px"
+                android:clickable="false"
+                app:cardBackgroundColor="@color/non_square_icon_background"
+                app:cardCornerRadius="12dp"
+                app:cardElevation="0dp">
+
+                <RelativeLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <de.danoeh.antennapod.ui.common.SquareImageView
+                        android:id="@+id/coverImage"
+                        android:layout_width="match_parent"
+                        android:layout_height="match_parent"
+                        android:scaleType="fitCenter"
+                        android:outlineProvider="background"
+                        squareImageView:direction="width"
+                        tools:src="@tools:sample/avatars" />
+
+                    <TextView
+                        android:id="@+id/fallbackTitleLabel"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_alignStart="@+id/coverImage"
+                        android:layout_alignLeft="@+id/coverImage"
+                        android:layout_alignTop="@+id/coverImage"
+                        android:layout_alignEnd="@+id/coverImage"
+                        android:layout_alignRight="@+id/coverImage"
+                        android:layout_alignBottom="@+id/coverImage"
+                        android:background="@color/feed_text_bg"
+                        android:gravity="center"
+                        android:ellipsize="end"
+                        android:padding="6dp"
+                        android:textColor="#fff"
+                        tools:text="@sample/episodes.json/data/title" />
+
+                    <TextView
+                        android:id="@+id/countViewPill"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="3"
+                        android:layout_alignParentEnd="true"
+                        android:textSize="14sp"
+                        style="@style/TextPill" />
+
+                </RelativeLayout>
+
+            </androidx.cardview.widget.CardView>
+
+            <TextView
+                android:id="@+id/titleLabel"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:ellipsize="end"
+                android:gravity="start"
+                android:textColor="?android:attr/textColorPrimary"
+                android:lines="2"
+                tools:text="@sample/episodes.json/data/title" />
+
+        </LinearLayout>
+
+        <FrameLayout
+            android:id="@+id/selectContainer"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:minWidth="0dp"
-            android:minHeight="0dp"
-            android:layout_margin="8dp" />
+            android:clickable="false">
+
+            <CheckBox
+                android:id="@+id/selectCheckBox"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:minWidth="0dp"
+                android:minHeight="0dp"
+                android:layout_margin="8dp" />
+
+        </FrameLayout>
 
-    </FrameLayout>
+    </androidx.cardview.widget.CardView>
 
-</RelativeLayout>
+</FrameLayout>