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 ImageGridpackage 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"> <ImageViewandroid:id="@+id/mImageView"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentTop="true" /> <TextViewandroid: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 ParentViewclass 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 RecyclerViewpublic 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 readyPart - 1Part - 2for getting full source code you can get from GitHub
