Swipe to see gallery images in PostDetailRecyclerViewAdapter.

5 files changed, 289 insertions, 228 deletions

diff --git a/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostDetailRecyclerViewAdapter.java b/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostDetailRecyclerViewAdapter.java
index df6603d5..35606d65 100644
--- a/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostDetailRecyclerViewAdapter.java
+++ b/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostDetailRecyclerViewAdapter.java
@@ -15,10 +15,12 @@ import android.net.Uri;
 import android.os.Bundle;
 import android.os.Handler;
 import android.text.Spanned;
-import android.text.TextUtils;
 import android.view.LayoutInflater;
+import android.view.MotionEvent;
 import android.view.View;
+import android.view.ViewConfiguration;
 import android.view.ViewGroup;
+import android.widget.FrameLayout;
 import android.widget.ImageView;
 import android.widget.ProgressBar;
 import android.widget.RelativeLayout;
@@ -31,6 +33,7 @@ import androidx.appcompat.content.res.AppCompatResources;
 import androidx.constraintlayout.widget.ConstraintLayout;
 import androidx.constraintlayout.widget.ConstraintSet;
 import androidx.recyclerview.widget.ItemTouchHelper;
+import androidx.recyclerview.widget.PagerSnapHelper;
 import androidx.recyclerview.widget.RecyclerView;
 
 import com.bumptech.glide.RequestBuilder;
@@ -130,7 +133,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
     private RedditDataRoomDatabase mRedditDataRoomDatabase;
     private SharedPreferences mCurrentAccountSharedPreferences;
     private RequestManager mGlide;
-    private SaveMemoryCenterInisdeDownsampleStrategy mSaveMemoryCenterInsideDownSampleStrategy;
+    private SaveMemoryCenterInisdeDownsampleStrategy mSaveMemoryCenterInsideDownsampleStrategy;
     private Markwon mPostDetailMarkwon;
     private final MarkwonAdapter mMarkwonAdapter;
     private String mAccessToken;
@@ -225,7 +228,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
         mStreamableRetrofit = streamableRetrofit;
         mRedditDataRoomDatabase = redditDataRoomDatabase;
         mGlide = glide;
-        mSaveMemoryCenterInsideDownSampleStrategy = new SaveMemoryCenterInisdeDownsampleStrategy(Integer.parseInt(sharedPreferences.getString(SharedPreferencesUtils.POST_FEED_MAX_RESOLUTION, "5000000")));
+        mSaveMemoryCenterInsideDownsampleStrategy = new SaveMemoryCenterInisdeDownsampleStrategy(Integer.parseInt(sharedPreferences.getString(SharedPreferencesUtils.POST_FEED_MAX_RESOLUTION, "5000000")));
         mCurrentAccountSharedPreferences = currentAccountSharedPreferences;
         mSecondaryTextColor = customThemeWrapper.getSecondaryTextColor();
         int markdownColor = customThemeWrapper.getPostContentColor();
@@ -637,7 +640,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
                 Post.Preview preview = getSuitablePreview(mPost.getPreviews());
                 if (preview != null) {
                     ((PostDetailVideoAutoplayViewHolder) holder).aspectRatioFrameLayout.setAspectRatio((float) preview.getPreviewWidth() / preview.getPreviewHeight());
-                    mGlide.load(preview.getPreviewUrl()).centerInside().downsample(mSaveMemoryCenterInsideDownSampleStrategy).into(((PostDetailVideoAutoplayViewHolder) holder).previewImageView);
+                    mGlide.load(preview.getPreviewUrl()).centerInside().downsample(mSaveMemoryCenterInsideDownsampleStrategy).into(((PostDetailVideoAutoplayViewHolder) holder).previewImageView);
                 } else {
                     ((PostDetailVideoAutoplayViewHolder) holder).aspectRatioFrameLayout.setAspectRatio(1);
                 }
@@ -767,45 +770,30 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
                     }
                 }
             } else if (holder instanceof PostDetailGalleryViewHolder) {
-                Post.Preview preview = getSuitablePreview(mPost.getPreviews());
-                if (preview != null) {
-                    ((PostDetailGalleryViewHolder) holder).mRelativeLayout.setVisibility(View.VISIBLE);
-                    ((PostDetailGalleryViewHolder) holder).mImageView
-                            .setRatio((float) preview.getPreviewHeight() / preview.getPreviewWidth());
-
-                    loadImage((PostDetailGalleryViewHolder) holder, preview);
-
-                    loadCaptionPreview((PostDetailGalleryViewHolder) holder, preview);
-                } else {
+                if (mDataSavingMode && mDisableImagePreview) {
                     ((PostDetailGalleryViewHolder) holder).mNoPreviewPostTypeImageView.setVisibility(View.VISIBLE);
+                    ((PostDetailGalleryViewHolder) holder).mNoPreviewPostTypeImageView.setImageResource(R.drawable.ic_gallery_24dp);
+                } else {
+                    ((PostDetailGalleryViewHolder) holder).galleryFrameLayout.setVisibility(View.VISIBLE);
+                    ((PostDetailGalleryViewHolder) holder).imageIndexTextView.setText(mActivity.getString(R.string.image_index_in_gallery, 1, mPost.getGallery().size()));
+                    Post.Preview preview = getSuitablePreview(mPost.getPreviews());
+                    if (preview != null) {
+                        if (preview.getPreviewWidth() <= 0 || preview.getPreviewHeight() <= 0) {
+                            ((PostDetailGalleryViewHolder) holder).adapter.setRatio(-1);
+                        } else {
+                            ((PostDetailGalleryViewHolder) holder).adapter.setRatio((float) preview.getPreviewHeight() / preview.getPreviewWidth());
+                        }
+                    } else {
+                        ((PostDetailGalleryViewHolder) holder).adapter.setRatio(-1);
+                    }
+                    ((PostDetailGalleryViewHolder) holder).adapter.setGalleryImages(mPost.getGallery());
+                    ((PostDetailGalleryViewHolder) holder).adapter.setBlurImage(
+                            (mPost.isNSFW() && mNeedBlurNsfw && !(mDoNotBlurNsfwInNsfwSubreddits && mFragment != null && mFragment.getIsNsfwSubreddit())) || (mPost.isSpoiler() && mNeedBlurSpoiler));
                 }
             }
         }
     }
 
-    private void loadCaptionPreview(PostDetailBaseViewHolder holder, Post.Preview preview) {
-        if (holder instanceof PostDetailGalleryViewHolder) {
-            String previewCaption = preview.getPreviewCaption();
-            String previewCaptionUrl = preview.getPreviewCaptionUrl();
-            boolean previewCaptionIsEmpty = TextUtils.isEmpty(previewCaption);
-            boolean previewCaptionUrlIsEmpty = TextUtils.isEmpty(previewCaptionUrl);
-            if (!previewCaptionIsEmpty || !previewCaptionUrlIsEmpty) {
-                ((PostDetailGalleryViewHolder) holder).mCaptionConstraintLayout.setBackgroundColor(mCardViewColor & 0x0D000000); // Make 10% darker than CardViewColor
-                ((PostDetailGalleryViewHolder) holder).mCaptionConstraintLayout.setVisibility(View.VISIBLE);
-            }
-            if (!previewCaptionIsEmpty) {
-                ((PostDetailGalleryViewHolder) holder).mCaptionTextView.setTextColor(mCommentColor);
-                ((PostDetailGalleryViewHolder) holder).mCaptionTextView.setText(previewCaption);
-                ((PostDetailGalleryViewHolder) holder).mCaptionTextView.setSelected(true);
-            }
-            if (!previewCaptionUrlIsEmpty) {
-                String domain = Uri.parse(previewCaptionUrl).getHost();
-                domain = domain.startsWith("www.") ? domain.substring(4) : domain;
-                mPostDetailMarkwon.setMarkdown(((PostDetailGalleryViewHolder) holder).mCaptionUrlTextView, String.format("[%s](%s)", domain, previewCaptionUrl));
-            }
-        }
-    }
-
     @Nullable
     private Post.Preview getSuitablePreview(ArrayList<Post.Preview> previews) {
         Post.Preview preview;
@@ -860,7 +848,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
             if (blurImage) {
                 imageRequestBuilder.apply(RequestOptions.bitmapTransform(new BlurTransformation(50, 10))).into(((PostDetailImageAndGifAutoplayViewHolder) holder).mImageView);
             } else {
-                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownSampleStrategy).into(((PostDetailImageAndGifAutoplayViewHolder) holder).mImageView);
+                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownsampleStrategy).into(((PostDetailImageAndGifAutoplayViewHolder) holder).mImageView);
             }
         } else if (holder instanceof PostDetailVideoAndGifPreviewHolder) {
             RequestBuilder<Drawable> imageRequestBuilder = mGlide.load(preview.getPreviewUrl())
@@ -888,7 +876,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
                 imageRequestBuilder.apply(RequestOptions.bitmapTransform(new BlurTransformation(50, 10)))
                         .into(((PostDetailVideoAndGifPreviewHolder) holder).mImageView);
             } else {
-                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownSampleStrategy).into(((PostDetailVideoAndGifPreviewHolder) holder).mImageView);
+                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownsampleStrategy).into(((PostDetailVideoAndGifPreviewHolder) holder).mImageView);
             }
         } else if (holder instanceof PostDetailLinkViewHolder) {
             RequestBuilder<Drawable> imageRequestBuilder = mGlide.load(preview.getPreviewUrl())
@@ -916,34 +904,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
                 imageRequestBuilder.apply(RequestOptions.bitmapTransform(new BlurTransformation(50, 10)))
                         .into(((PostDetailLinkViewHolder) holder).mImageView);
             } else {
-                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownSampleStrategy).into(((PostDetailLinkViewHolder) holder).mImageView);
-            }
-        } else if (holder instanceof PostDetailGalleryViewHolder) {
-            RequestBuilder<Drawable> imageRequestBuilder = mGlide.load(preview.getPreviewUrl())
-                    .listener(new RequestListener<>() {
-                        @Override
-                        public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
-                            ((PostDetailGalleryViewHolder) holder).mLoadImageProgressBar.setVisibility(View.GONE);
-                            ((PostDetailGalleryViewHolder) holder).mLoadImageErrorTextView.setVisibility(View.VISIBLE);
-                            ((PostDetailGalleryViewHolder) holder).mLoadImageErrorTextView.setOnClickListener(view -> {
-                                ((PostDetailGalleryViewHolder) holder).mLoadImageProgressBar.setVisibility(View.VISIBLE);
-                                ((PostDetailGalleryViewHolder) holder).mLoadImageErrorTextView.setVisibility(View.GONE);
-                                loadImage(holder, preview);
-                            });
-                            return false;
-                        }
-
-                        @Override
-                        public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
-                            ((PostDetailGalleryViewHolder) holder).mLoadWrapper.setVisibility(View.GONE);
-                            return false;
-                        }
-                    });
-
-            if ((mPost.isNSFW() && mNeedBlurNsfw && !(mDoNotBlurNsfwInNsfwSubreddits && mFragment != null && mFragment.getIsNsfwSubreddit()) && !(mPost.getPostType() == Post.GIF_TYPE && mAutoplayNsfwVideos)) || (mPost.isSpoiler() && mNeedBlurSpoiler)) {
-                imageRequestBuilder.apply(RequestOptions.bitmapTransform(new BlurTransformation(50, 10))).into(((PostDetailGalleryViewHolder) holder).mImageView);
-            } else {
-                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownSampleStrategy).into(((PostDetailGalleryViewHolder) holder).mImageView);
+                imageRequestBuilder.centerInside().downsample(mSaveMemoryCenterInsideDownsampleStrategy).into(((PostDetailLinkViewHolder) holder).mImageView);
             }
         }
     }
@@ -1030,6 +991,9 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
                 mGlide.clear(((PostDetailImageAndGifAutoplayViewHolder) holder).mImageView);
             } else if (holder instanceof PostDetailLinkViewHolder) {
                 mGlide.clear(((PostDetailLinkViewHolder) holder).mImageView);
+            } else if (holder instanceof PostDetailGalleryViewHolder) {
+                ((PostDetailGalleryViewHolder) holder).galleryFrameLayout.setVisibility(View.GONE);
+                ((PostDetailGalleryViewHolder) holder).mNoPreviewPostTypeImageView.setVisibility(View.GONE);
             }
         }
     }
@@ -2308,24 +2272,12 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
         TextView mAwardsTextView;
         @BindView(R.id.upvote_ratio_text_view_item_post_detail_gallery)
         TextView mUpvoteRatioTextView;
-        @BindView(R.id.image_view_wrapper_item_post_detail_gallery)
-        RelativeLayout mRelativeLayout;
-        @BindView(R.id.load_wrapper_item_post_detail_gallery)
-        RelativeLayout mLoadWrapper;
-        @BindView(R.id.progress_bar_item_post_detail_gallery)
-        ProgressBar mLoadImageProgressBar;
-        @BindView(R.id.load_image_error_text_view_item_post_detail_gallery)
-        TextView mLoadImageErrorTextView;
-        @BindView(R.id.video_or_gif_indicator_image_view_item_post_detail)
-        ImageView videoOrGifIndicatorImageView;
-        @BindView(R.id.image_view_item_post_detail_gallery)
-        AspectRatioGifImageView mImageView;
-        @BindView(R.id.caption_constraint_layout_item_post_detail_gallery)
-        ConstraintLayout mCaptionConstraintLayout;
-        @BindView(R.id.caption_text_view_item_post_detail_gallery)
-        TextView mCaptionTextView;
-        @BindView(R.id.caption_url_text_view_item_post_detail_gallery)
-        TextView mCaptionUrlTextView;
+        @BindView(R.id.gallery_frame_layout_item_post_detail_gallery)
+        FrameLayout galleryFrameLayout;
+        @BindView(R.id.gallery_recycler_view_item_post_detail_gallery)
+        RecyclerView galleryRecyclerView;
+        @BindView(R.id.image_index_text_view_item_post_detail_gallery)
+        CustomTextView imageIndexTextView;
         @BindView(R.id.image_view_no_preview_link_item_post_detail_gallery)
         ImageView mNoPreviewPostTypeImageView;
         @BindView(R.id.content_markdown_view_item_post_detail_gallery)
@@ -2344,6 +2296,7 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
         ImageView mSaveButton;
         @BindView(R.id.share_button_item_post_detail_gallery)
         ImageView mShareButton;
+        PostGalleryTypeImageRecyclerViewAdapter adapter;
 
         PostDetailGalleryViewHolder(@NonNull View itemView) {
             super(itemView);
@@ -2373,27 +2326,103 @@ public class PostDetailRecyclerViewAdapter extends RecyclerView.Adapter<Recycler
                     mShareButton);
 
             if (mActivity.typeface != null) {
-                mLoadImageErrorTextView.setTypeface(mActivity.typeface);
-                mCaptionTextView.setTypeface(mActivity.typeface);
-                mCaptionUrlTextView.setTypeface(mActivity.typeface);
+                imageIndexTextView.setTypeface(mActivity.typeface);
             }
-            videoOrGifIndicatorImageView.setColorFilter(mMediaIndicatorIconTint, PorterDuff.Mode.SRC_IN);
-            videoOrGifIndicatorImageView.setBackgroundTintList(ColorStateList.valueOf(mMediaIndicatorBackgroundColor));
-            mLoadImageProgressBar.setIndeterminateTintList(ColorStateList.valueOf(mColorAccent));
-            mLoadImageErrorTextView.setTextColor(mPrimaryTextColor);
+
+            imageIndexTextView.setTextColor(mMediaIndicatorIconTint);
+            imageIndexTextView.setBackgroundColor(mMediaIndicatorBackgroundColor);
+            imageIndexTextView.setBorderColor(mMediaIndicatorBackgroundColor);
             mNoPreviewPostTypeImageView.setBackgroundColor(mNoPreviewPostTypeBackgroundColor);
             mNoPreviewPostTypeImageView.setColorFilter(mNoPreviewPostTypeIconTint, PorterDuff.Mode.SRC_IN);
 
-            mImageView.setOnClickListener(view -> {
+            adapter = new PostGalleryTypeImageRecyclerViewAdapter(mGlide, mActivity.typeface, mPostDetailMarkwon,
+                    mSaveMemoryCenterInsideDownsampleStrategy, mColorAccent, mPrimaryTextColor,
+                    mCardViewColor, mCommentColor, mScale);
+            galleryRecyclerView.setAdapter(adapter);
+            new PagerSnapHelper().attachToRecyclerView(galleryRecyclerView);
+            SwipeLockLinearLayoutManager layoutManager = new SwipeLockLinearLayoutManager(
+                    mActivity, RecyclerView.HORIZONTAL, false, new SwipeLockInterface() {
+                @Override
+                public void lockSwipe() {
+                    mActivity.lockSwipeRightToGoBack();
+                }
+
+                @Override
+                public void unlockSwipe() {
+                    mActivity.unlockSwipeRightToGoBack();
+                }
+            });
+            galleryRecyclerView.setLayoutManager(layoutManager);
+            galleryRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
+                @Override
+                public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
+                    super.onScrollStateChanged(recyclerView, newState);
+                }
+
+                @Override
+                public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
+                    super.onScrolled(recyclerView, dx, dy);
+                    imageIndexTextView.setText(mActivity.getString(R.string.image_index_in_gallery, layoutManager.findFirstVisibleItemPosition() + 1, mPost.getGallery().size()));
+                }
+            });
+            galleryRecyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
+                private float downX;
+                private float downY;
+                private boolean dragged;
+                private final int minTouchSlop = ViewConfiguration.get(mActivity).getScaledTouchSlop();
+
+                @Override
+                public boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {
+                    int action = e.getAction();
+                    switch (action) {
+                        case MotionEvent.ACTION_DOWN:
+                            downX = e.getRawX();
+                            downY = e.getRawY();
+                            break;
+                        case MotionEvent.ACTION_MOVE:
+                            if(Math.abs(e.getRawX() - downX) > minTouchSlop || Math.abs(e.getRawY() - downY) > minTouchSlop) {
+                                dragged = true;
+                            }
+                            break;
+                        case MotionEvent.ACTION_UP:
+                            if (!dragged) {
+                                int position = getBindingAdapterPosition();
+                                if (position >= 0) {
+                                    if (mPost != null) {
+                                        Intent intent = new Intent(mActivity, ViewRedditGalleryActivity.class);
+                                        intent.putParcelableArrayListExtra(ViewRedditGalleryActivity.EXTRA_REDDIT_GALLERY, mPost.getGallery());
+                                        intent.putExtra(ViewRedditGalleryActivity.EXTRA_SUBREDDIT_NAME, mPost.getSubredditName());
+                                        intent.putExtra(ViewRedditGalleryActivity.EXTRA_GALLERY_ITEM_INDEX, layoutManager.findFirstVisibleItemPosition());
+                                        mActivity.startActivity(intent);
+                                    }
+                                }
+                            }
+
+                            downX = 0;
+                            downY = 0;
+                            dragged = false;
+                    }
+                    return false;
+                }
+
+                @Override
+                public void onTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {
+
+                }
+
+                @Override
+                public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
+
+                }
+            });
+
+            mNoPreviewPostTypeImageView.setOnClickListener(view -> {
                 Intent intent = new Intent(mActivity, ViewRedditGalleryActivity.class);
                 intent.putParcelableArrayListExtra(ViewRedditGalleryActivity.EXTRA_REDDIT_GALLERY, mPost.getGallery());
                 intent.putExtra(ViewRedditGalleryActivity.EXTRA_SUBREDDIT_NAME, mPost.getSubredditName());
+                intent.putExtra(ViewRedditGalleryActivity.EXTRA_GALLERY_ITEM_INDEX, layoutManager.findFirstVisibleItemPosition());
                 mActivity.startActivity(intent);
             });
-
-            mNoPreviewPostTypeImageView.setOnClickListener(view -> {
-                mImageView.performClick();
-            });
         }
     }
 
diff --git a/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostGalleryTypeImageRecyclerViewAdapter.java b/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostGalleryTypeImageRecyclerViewAdapter.java
index 6d98405a..daabf9a1 100644
--- a/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostGalleryTypeImageRecyclerViewAdapter.java
+++ b/app/src/main/java/ml/docilealligator/infinityforreddit/adapters/PostGalleryTypeImageRecyclerViewAdapter.java
@@ -3,6 +3,8 @@ package ml.docilealligator.infinityforreddit.adapters;
 import android.content.res.ColorStateList;
 import android.graphics.Typeface;
 import android.graphics.drawable.Drawable;
+import android.net.Uri;
+import android.text.TextUtils;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
@@ -22,6 +24,7 @@ import com.bumptech.glide.request.target.Target;
 
 import java.util.ArrayList;
 
+import io.noties.markwon.Markwon;
 import jp.wasabeef.glide.transformations.BlurTransformation;
 import ml.docilealligator.infinityforreddit.SaveMemoryCenterInisdeDownsampleStrategy;
 import ml.docilealligator.infinityforreddit.databinding.ItemGalleryImageInPostFeedBinding;
@@ -30,13 +33,17 @@ import ml.docilealligator.infinityforreddit.post.Post;
 public class PostGalleryTypeImageRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
     private RequestManager glide;
     private Typeface typeface;
+    private Markwon mPostDetailMarkwon;
     private SaveMemoryCenterInisdeDownsampleStrategy saveMemoryCenterInisdeDownsampleStrategy;
     private int mColorAccent;
     private int mPrimaryTextColor;
+    private int mCardViewColor;
+    private int mCommentColor;
     private float mScale;
     private ArrayList<Post.Gallery> galleryImages;
     private boolean blurImage;
     private float ratio;
+    private boolean showCaption;
 
     public PostGalleryTypeImageRecyclerViewAdapter(RequestManager glide, Typeface typeface,
                                                    SaveMemoryCenterInisdeDownsampleStrategy saveMemoryCenterInisdeDownsampleStrategy,
@@ -47,6 +54,23 @@ public class PostGalleryTypeImageRecyclerViewAdapter extends RecyclerView.Adapte
         this.mColorAccent = mColorAccent;
         this.mPrimaryTextColor = mPrimaryTextColor;
         this.mScale = scale;
+        showCaption = false;
+    }
+
+    public PostGalleryTypeImageRecyclerViewAdapter(RequestManager glide, Typeface typeface, Markwon postDetailMarkwon,
+                                                   SaveMemoryCenterInisdeDownsampleStrategy saveMemoryCenterInisdeDownsampleStrategy,
+                                                   int mColorAccent, int mPrimaryTextColor, int mCardViewColor,
+                                                   int mCommentColor, float scale) {
+        this.glide = glide;
+        this.typeface = typeface;
+        this.mPostDetailMarkwon = postDetailMarkwon;
+        this.saveMemoryCenterInisdeDownsampleStrategy = saveMemoryCenterInisdeDownsampleStrategy;
+        this.mColorAccent = mColorAccent;
+        this.mPrimaryTextColor = mPrimaryTextColor;
+        this.mCardViewColor = mCardViewColor;
+        this.mCommentColor = mCommentColor;
+        this.mScale = scale;
+        showCaption = true;
     }
 
     @NonNull
@@ -78,6 +102,10 @@ public class PostGalleryTypeImageRecyclerViewAdapter extends RecyclerView.Adapte
                 }
             });
 
+            if (showCaption) {
+                loadCaptionPreview((ImageViewHolder) holder);
+            }
+
             loadImage((ImageViewHolder) holder);
         }
     }
@@ -90,6 +118,11 @@ public class PostGalleryTypeImageRecyclerViewAdapter extends RecyclerView.Adapte
     @Override
     public void onViewRecycled(@NonNull RecyclerView.ViewHolder holder) {
         super.onViewRecycled(holder);
+        if (holder instanceof ImageViewHolder) {
+            ((ImageViewHolder) holder).binding.captionConstraintLayoutItemGalleryImageInPostFeed.setVisibility(View.GONE);
+            ((ImageViewHolder) holder).binding.captionTextViewItemGalleryImageInPostFeed.setText("");
+            ((ImageViewHolder) holder).binding.captionUrlTextViewItemGalleryImageInPostFeed.setText("");
+        }
     }
 
     private void loadImage(ImageViewHolder holder) {
@@ -116,6 +149,27 @@ public class PostGalleryTypeImageRecyclerViewAdapter extends RecyclerView.Adapte
         }
     }
 
+    private void loadCaptionPreview(ImageViewHolder holder) {
+        String previewCaption = galleryImages.get(holder.getBindingAdapterPosition()).caption;
+        String previewCaptionUrl = galleryImages.get(holder.getBindingAdapterPosition()).captionUrl;
+        boolean previewCaptionIsEmpty = TextUtils.isEmpty(previewCaption);
+        boolean previewCaptionUrlIsEmpty = TextUtils.isEmpty(previewCaptionUrl);
+        if (!previewCaptionIsEmpty || !previewCaptionUrlIsEmpty) {
+            holder.binding.captionConstraintLayoutItemGalleryImageInPostFeed.setBackgroundColor(mCardViewColor & 0x0D000000); // Make 10% darker than CardViewColor
+            holder.binding.captionConstraintLayoutItemGalleryImageInPostFeed.setVisibility(View.VISIBLE);
+        }
+        if (!previewCaptionIsEmpty) {
+            holder.binding.captionTextViewItemGalleryImageInPostFeed.setTextColor(mCommentColor);
+            holder.binding.captionTextViewItemGalleryImageInPostFeed.setText(previewCaption);
+            holder.binding.captionTextViewItemGalleryImageInPostFeed.setSelected(true);
+        }
+        if (!previewCaptionUrlIsEmpty) {
+            String domain = Uri.parse(previewCaptionUrl).getHost();
+            domain = domain.startsWith("www.") ? domain.substring(4) : domain;
+            mPostDetailMarkwon.setMarkdown(holder.binding.captionUrlTextViewItemGalleryImageInPostFeed, String.format("[%s](%s)", domain, previewCaptionUrl));
+        }
+    }
+
     public void setGalleryImages(ArrayList<Post.Gallery> galleryImages) {
         this.galleryImages = galleryImages;
         notifyDataSetChanged();
diff --git a/app/src/main/java/ml/docilealligator/infinityforreddit/customviews/SwipeLockFrameLayout.java b/app/src/main/java/ml/docilealligator/infinityforreddit/customviews/SwipeLockLinearLayout.java
index 5b62bbfb..85c95e63 100644
--- a/app/src/main/java/ml/docilealligator/infinityforreddit/customviews/SwipeLockFrameLayout.java
+++ b/app/src/main/java/ml/docilealligator/infinityforreddit/customviews/SwipeLockLinearLayout.java
@@ -4,29 +4,29 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
-import android.widget.FrameLayout;
+import android.widget.LinearLayout;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
-public class SwipeLockFrameLayout extends FrameLayout implements SwipeLockView {
+public class SwipeLockLinearLayout extends LinearLayout implements SwipeLockView {
     @Nullable
     private SwipeLockInterface swipeLockInterface = null;
     private boolean locked = false;
 
-    public SwipeLockFrameLayout(@NonNull Context context) {
+    public SwipeLockLinearLayout(@NonNull Context context) {
         super(context);
     }
 
-    public SwipeLockFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
+    public SwipeLockLinearLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
         super(context, attrs);
     }
 
-    public SwipeLockFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+    public SwipeLockLinearLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
     }
 
-    public SwipeLockFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
+    public SwipeLockLinearLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
         super(context, attrs, defStyleAttr, defStyleRes);
     }
 
diff --git a/app/src/main/res/layout/item_gallery_image_in_post_feed.xml b/app/src/main/res/layout/item_gallery_image_in_post_feed.xml
index 54e443fb..7b741342 100644
--- a/app/src/main/res/layout/item_gallery_image_in_post_feed.xml
+++ b/app/src/main/res/layout/item_gallery_image_in_post_feed.xml
@@ -1,30 +1,92 @@
 <?xml version="1.0" encoding="utf-8"?>
-<ml.docilealligator.infinityforreddit.customviews.SwipeLockFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<ml.docilealligator.infinityforreddit.customviews.SwipeLockLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
-    <ml.docilealligator.infinityforreddit.customviews.AspectRatioGifImageView
-        android:id="@+id/image_view_item_gallery_image_in_post_feed"
+    <FrameLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:adjustViewBounds="true" />
+        android:layout_height="wrap_content">
 
-    <ProgressBar
-        android:id="@+id/progress_bar_item_gallery_image_in_post_feed"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center" />
+        <ml.docilealligator.infinityforreddit.customviews.AspectRatioGifImageView
+            android:id="@+id/image_view_item_gallery_image_in_post_feed"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:adjustViewBounds="true" />
+
+        <ProgressBar
+            android:id="@+id/progress_bar_item_gallery_image_in_post_feed"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center" />
+
+        <TextView
+            android:id="@+id/error_text_view_item_gallery_image_in_post_feed"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:drawableTop="@drawable/ic_error_outline_black_24dp"
+            android:layout_gravity="center"
+            android:gravity="center"
+            android:text="@string/error_loading_image_tap_to_retry"
+            android:textSize="?attr/font_default"
+            android:fontFamily="?attr/font_family"
+            android:visibility="gone" />
+
+    </FrameLayout>
 
-    <TextView
-        android:id="@+id/error_text_view_item_gallery_image_in_post_feed"
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/caption_constraint_layout_item_gallery_image_in_post_feed"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:drawableTop="@drawable/ic_error_outline_black_24dp"
-        android:layout_gravity="center"
-        android:gravity="center"
-        android:text="@string/error_loading_image_tap_to_retry"
-        android:textSize="?attr/font_default"
-        android:fontFamily="?attr/font_family"
-        android:visibility="gone" />
-
-</ml.docilealligator.infinityforreddit.customviews.SwipeLockFrameLayout>
\ No newline at end of file
+        android:background="?attr/colorBackgroundFloating"
+        android:visibility="gone">
+
+        <TextView
+            android:id="@+id/caption_text_view_item_gallery_image_in_post_feed"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:ellipsize="marquee"
+            android:focusable="true"
+            android:focusableInTouchMode="true"
+            android:fontFamily="?attr/content_font_family"
+            android:gravity="start"
+            android:marqueeRepeatLimit="marquee_forever"
+            android:paddingHorizontal="8dp"
+            android:scrollHorizontally="true"
+            android:singleLine="true"
+            android:textColor="?attr/primaryTextColor"
+            android:textSize="?attr/content_font_default"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/caption_url_text_view_item_gallery_image_in_post_feed"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/caption_url_text_view_item_gallery_image_in_post_feed"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:fontFamily="?attr/content_font_family"
+            android:gravity="end"
+            android:maxLines="1"
+            android:paddingHorizontal="8dp"
+            android:textColor="?attr/primaryTextColor"
+            android:textSize="?attr/content_font_default"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintHorizontal_bias="1"
+            app:layout_constraintLeft_toRightOf="@id/guideline4"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline4"
+            android:layout_width="1dp"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.50" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</ml.docilealligator.infinityforreddit.customviews.SwipeLockLinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_post_detail_gallery.xml b/app/src/main/res/layout/item_post_detail_gallery.xml
index dbdd849e..bb9f2903 100644
--- a/app/src/main/res/layout/item_post_detail_gallery.xml
+++ b/app/src/main/res/layout/item_post_detail_gallery.xml
@@ -202,61 +202,31 @@
 
     </com.nex3z.flowlayout.FlowLayout>
 
-    <RelativeLayout
-        android:id="@+id/image_view_wrapper_item_post_detail_gallery"
+    <FrameLayout
+        android:id="@+id/gallery_frame_layout_item_post_detail_gallery"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:visibility="gone">
 
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content">
-
-            <ml.docilealligator.infinityforreddit.customviews.AspectRatioGifImageView
-                android:id="@+id/image_view_item_post_detail_gallery"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:adjustViewBounds="true" />
-
-            <ImageView
-                android:id="@+id/video_or_gif_indicator_image_view_item_post_detail"
-                android:layout_width="36dp"
-                android:layout_height="36dp"
-                android:layout_margin="16dp"
-                android:layout_gravity="start"
-                android:scaleType="center"
-                android:background="@drawable/play_button_round_background"
-                android:src="@drawable/ic_gallery_24dp" />
-
-        </FrameLayout>
-
-        <RelativeLayout
-            android:id="@+id/load_wrapper_item_post_detail_gallery"
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/gallery_recycler_view_item_post_detail_gallery"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_centerInParent="true">
-
-            <ProgressBar
-                android:id="@+id/progress_bar_item_post_detail_gallery"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_centerInParent="true" />
-
-            <TextView
-                android:id="@+id/load_image_error_text_view_item_post_detail_gallery"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:drawableTop="@drawable/ic_error_outline_black_24dp"
-                android:layout_centerInParent="true"
-                android:gravity="center"
-                android:text="@string/error_loading_image_tap_to_retry"
-                android:textSize="?attr/font_default"
-                android:fontFamily="?attr/font_family"
-                android:visibility="gone" />
-
-        </RelativeLayout>
-
-    </RelativeLayout>
+            android:orientation="horizontal" />
+
+        <com.libRG.CustomTextView
+            android:id="@+id/image_index_text_view_item_post_detail_gallery"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_margin="16dp"
+            android:textSize="?attr/font_12"
+            android:fontFamily="?attr/font_family"
+            android:padding="4dp"
+            app:lib_setRadius="6dp"
+            app:lib_setRoundedView="true"
+            app:lib_setShape="rectangle" />
+
+    </FrameLayout>
 
     <ImageView
         android:id="@+id/image_view_no_preview_link_item_post_detail_gallery"
@@ -266,60 +236,6 @@
         android:src="@drawable/ic_link"
         android:visibility="gone" />
 
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/caption_constraint_layout_item_post_detail_gallery"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="?attr/colorBackgroundFloating"
-        android:visibility="gone">
-
-        <TextView
-            android:id="@+id/caption_text_view_item_post_detail_gallery"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:ellipsize="marquee"
-            android:focusable="true"
-            android:focusableInTouchMode="true"
-            android:fontFamily="?attr/content_font_family"
-            android:gravity="start"
-            android:marqueeRepeatLimit="marquee_forever"
-            android:paddingHorizontal="8dp"
-            android:scrollHorizontally="true"
-            android:singleLine="true"
-            android:textColor="?attr/primaryTextColor"
-            android:textSize="?attr/content_font_default"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toStartOf="@id/caption_url_text_view_item_post_detail_gallery"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-            android:id="@+id/caption_url_text_view_item_post_detail_gallery"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:fontFamily="?attr/content_font_family"
-            android:gravity="end"
-            android:maxLines="1"
-            android:paddingHorizontal="8dp"
-            android:textColor="?attr/primaryTextColor"
-            android:textSize="?attr/content_font_default"
-            app:layout_constrainedWidth="true"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintHorizontal_bias="1"
-            app:layout_constraintLeft_toRightOf="@id/guideline4"
-            app:layout_constraintRight_toRightOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <androidx.constraintlayout.widget.Guideline
-            android:id="@+id/guideline4"
-            android:layout_width="1dp"
-            android:layout_height="wrap_content"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent="0.50" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/content_markdown_view_item_post_detail_gallery"
         android:layout_width="match_parent"