Android: How to implement a image gallery with RecyclerView

Question

I want to create a image gallery with a TextView as header and ImageViews in a HorizontalScrollView like it is displayed in this figure.

I use a RecyclerViewto reduce the ressources for my app and implement the images with many ArrayList like:

        itemFotoIDs.addAll(Arrays.asList(
                R.drawable.cable_crunches_1
                ,R.drawable.dips_1
                ,R.drawable.kabelrudern_breit_1
                ,R.drawable.kabelrudern_eng_1
                ,R.drawable.klimmzug_1
                ,R.drawable.kh_schulterdruecken_1
                ,R.drawable.kh_curls_1
                ,R.drawable.lh_bankdruecken_1
                ,R.drawable.lh_bankdruecken_eng_1
                ,R.drawable.lh_kniebeuge_1
                ,R.drawable.lh_kreuzheben_1
                ,R.drawable.lh_schraegbankdruecken_1
                ,R.drawable.latzug_obergriff_1
                ,R.drawable.seitheben_1
                ,R.drawable.szhantel_curls_1
        ));

Now my question: What is the best solution to create a empty entry in a line of this ArrayList, if e.g. i've got five ArrayList with 15 entries and two only have 14 or 13 entries. But I want the empty entry at the exact row and not at the end. I tried to implement a null instead of the R.drawable. but this leads to a crash of the app.

Answer 1

I'd like refer my own answer in a slightly similar question: https://stackoverflow.com/a/34462696/1658267 (NB! going forward, I'd use class/methods naming from there)

The only difference would be to replace TextViews with ImageViews. Like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/rounded_background"
    android:layout_margin="4dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/chipImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

Regarding the empty slots - there're multiple options:

• You can pass nulls, and then in something which was called ChipView(in your case - view with image), in displayItem() method check if parameter is null - then just set proper width to the View

• You can create separate viewType for horizontal RecyclerView and create an empty view for it(as a placeholder). Then you need slightly to update ChipsAdapter:

  static int IMAGE_VIEW_TYPE = 1;
  static int EMPTY_SLOP_TYPE = 2;
  
  @Override
  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      if (viewType = IMAGE_VIEW_TYPE) {
          return new ChipViewHolder(new ChipView(parent.getContext()));
      } else {
          return new ChipViewHolder(new EmptyView(parent.getContext()));
      }
  }
  
  @Override
  public int getItemViewType(int position) {
      return chipsArray[position] == null? EMPTY_SLOP_TYPE : IMAGE_VIEW_TYPE;
  }
  
  @Override
  public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
      if (holder.itemView instanceof ChipView) {
          ((ChipView) holder.itemView).displayItem(chipsArray[position]);
      }
  }
  

  And create an EmptyView, with pre-defined not-0 width.

Personally I prefer the second option (decoupling, easier to maintain onClick - without extra logic there, etc.)

I hope, it helps.