Best way to display multiple image grid like facebook Part - 2

In the First part of the tutorial Best way to display multiple image grid like facebook Part - 1 we create the base structure for facebook grid,

Now we create the whole structure for making amazing facebook type grid

Here In Part - 2 we create the child view for multiple Images

for that 

Step - 1:

Create a POJO(model) class which implements AsymmetricItem for manage custom view

package com.at.facebooktypeimagegrid.model;

import android.os.Parcel;
import android.os.Parcelable;
import android.support.annotation.NonNull;

import com.at.facebooktypeimagegrid.Assymetric.AsymmetricItem;


public class ItemPosition implements AsymmetricItem {

  private int columnSpan;
  private int rowSpan;
  private int position;

  public ItemPosition() {
    this(1, 1, 0);
  }

  public ItemPosition(int columnSpan, int rowSpan, int position) {
    this.columnSpan = columnSpan;
    this.rowSpan = rowSpan;
    this.position = position;

  }



  public ItemPosition(Parcel in) {
    readFromParcel(in);
  }

  @Override public int getColumnSpan() {
    return columnSpan;
  }

  @Override public int getRowSpan() {
    return rowSpan;
  }

  public void setColumnSpan(int columnSpan) {
    this.columnSpan = columnSpan;
  }

  public void setPosition(int position) {
    this.position = position;
  }

  public void setRowSpan(int rowSpan) {
    this.rowSpan = rowSpan;
  }

  public int getPosition() {
    return position;
  }

  @Override public String toString() {
    return String.format("%s: %sx%s", position, rowSpan, columnSpan);
  }

  @Override public int describeContents() {
    return 0;
  }

  private void readFromParcel(Parcel in) {
    columnSpan = in.readInt();
    rowSpan = in.readInt();
    position = in.readInt();

  }

  @Override public void writeToParcel(@NonNull Parcel dest, int flags) {
    dest.writeInt(columnSpan);
    dest.writeInt(rowSpan);
    dest.writeInt(position);

  }

  /* Parcelable interface implementation */  public static final Parcelable.Creator<ItemPosition> CREATOR = new Parcelable.Creator<ItemPosition>() {

    @Override public ItemPosition createFromParcel(@NonNull Parcel in) {
      return new ItemPosition(in);
    }

    @Override @NonNull public ItemPosition[] newArray(int size) {
      return new ItemPosition[size];
    }
  };
}



Step - 2 :

Create another POJO(model) class for childView means ImageGrid



package com.at.facebooktypeimagegrid.model;

import android.os.Parcel;

public class ItemImage extends ItemPosition {

   private int ItemImageId;
   private String ImagePath;
   private String Thumb;

   
   public ItemImage(int itemImageId, String imagePath, String thumb) {
      super();
      ItemImageId = itemImageId;
      ImagePath = imagePath;
      Thumb = thumb;

   }

   protected ItemImage(Parcel in) {
      ItemImageId = in.readInt();
      ImagePath = in.readString();
      Thumb = in.readString();

   }

   @Override   public int describeContents() {
      return 0;
   }

   @Override   public void writeToParcel(Parcel dest, int flags) {
      dest.writeInt(ItemImageId);
      dest.writeString(ImagePath);
      dest.writeString(Thumb);

   }

   @Override   public String toString() {
      return "ItemImage{" +
            "ItemImageId=" + ItemImageId +
            ", ImagePath='" + ImagePath + '\'' +
            ", Thumb='" + Thumb + '\'' +
            '}';
   }

   public String getThumb() {
      return Thumb;
   }

   public void setThumb(String thumb) {
      Thumb = thumb;
   }

   public int getItemImageId() {
      return ItemImageId;
   }

   public void setItemImageId(int itemImageId) {
      ItemImageId = itemImageId;
   }

   public String getImagePath() {
      return ImagePath;
   }

   public void setImagePath(String imagePath) {
      ImagePath = imagePath;
   }



   public static final Creator<ItemImage> CREATOR = new Creator<ItemImage>() {
      @Override      public ItemImage createFromParcel(Parcel in) {
         return new ItemImage(in);
      }

      @Override      public ItemImage[] newArray(int size) {
         return new ItemImage[size];
      }
   };

}





Step - 3 :

make childView xml for manage Total Image count and display image




<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    


    android:id="@+id/rlImages"   


    android:layout_width="wrap_content"    


    android:layout_height="wrap_content"    


    android:background="#99000000">

    <ImageView    


        android:id="@+id/mImageView"    


        android:layout_width="match_parent"    


        android:layout_height="match_parent"    


        android:layout_alignParentTop="true"         />

    <TextView    


        android:id="@+id/tvCount"    


        android:layout_width="wrap_content"    


        android:layout_height="wrap_content"    


        android:layout_alignBottom="@+id/mImageView"    


        android:layout_alignLeft="@+id/mImageView"    


        android:layout_centerInParent="true"    


        android:gravity="center"    


        android:layout_alignRight="@+id/mImageView"    


        android:layout_alignTop="@+id/mImageView"    


        android:textColor="@android:color/white"    


        android:textSize="20sp"    


       android:text="+6" />
 


   </RelativeLayout>


 


Step - 4 :

Now make childAdapter for making customze grid on every child of ParentView





class ChildAdapter extends AGVRecyclerViewAdapter<ViewHolder> {
    private final List<ItemImage> items;
    private int mDisplay = 0;
    private int mTotal = 0;

    public ChildAdapter(List<ItemImage> items,int mDisplay, int mTotal) {
      this.items = items;
      this.mDisplay = mDisplay;
        this.mTotal = mTotal;

    }




    @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      Log.d("RecyclerViewActivity", "onCreateView");
      return new ViewHolder(parent, viewType,items);
    }

    @Override public void onBindViewHolder(ViewHolder holder, int position) {
      Log.d("RecyclerViewActivity", "onBindView position=" + position);
      holder.bind(items,position,mDisplay,mTotal);
    }

    @Override public int getItemCount() {
      return items.size();
    }

    @Override public AsymmetricItem getItem(int position) {
      return (AsymmetricItem) items.get(position);
    }

    @Override public int getItemViewType(int position) {
      return position % 2 == 0 ? 1 : 0;
    }
  }


  class ViewHolder extends RecyclerView.ViewHolder {
    private final ImageView mImageView;
    private final TextView textView;

    public ViewHolder(ViewGroup parent, int viewType, List<ItemImage> items) {
      super(LayoutInflater.from(parent.getContext()).inflate(
              R.layout.adapter_item, parent, false));

      mImageView = (ImageView) itemView.findViewById(R.id.mImageView);
      textView = (TextView) itemView.findViewById(R.id.tvCount);



    }


    public void bind(List<ItemImage> item, int position, int mDisplay, int mTotal) {
      ImageLoader.getInstance().displayImage(String.valueOf(item.get(position).getImagePath()), mImageView);
      textView.setText("+"+(mTotal-mDisplay));
      if(mTotal > mDisplay)
      {
        if(position  == mDisplay-1) {
          textView.setVisibility(View.VISIBLE);
          mImageView.setAlpha(72);
        }
        else {
          textView.setVisibility(View.INVISIBLE);
          mImageView.setAlpha(255);
        }
      }
      else      {
        mImageView.setAlpha(255);
        textView.setVisibility(View.INVISIBLE);
      }

    }
  }





step - 5 :

make SpaceItemDecoration.java for ItemDecoration for RecyclerView





public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
  private final int padding;

  public SpacesItemDecoration(int padding) {
    this.padding = padding;
  }

  @Override public void getItemOffsets(
      Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    outRect.bottom = padding;
  }


} 

Now Multiple Image grid like facebook is ready

Part - 1
Part - 2
 
for getting full source code you can get from GitHub