how to display multiply layout in RecyclerView

Question

I am getting data in jSON. Data contains images url. I am trying to display images in below layouts.

1Image
2Image
3Image  4Image  5Image  6Image  7image
8Image  9Image  10Image 11Image 12image
13image 14image 15image 16image 17image
....    ....     .....  ......   .....

So First two image will be in vertically. Other 5 images in horizontal scroll view and so on. So i am using RecyclerView with vertical orientation. but i am not able to creating the logic so images will be display above format.

please anyone guide me.

update:-

//Horizontal images view.
public class MoviesAdapterHorizontal extends RecyclerView.Adapter<MoviesAdapterHorizontal.MyViewHolder> {

    private List<String> moviesList;
   // private ThumbnailListener thumbnailListener;

    public class MyViewHolder extends RecyclerView.ViewHolder {
      //  YouTubeThumbnailView thumbnail;
        ImageView imageView2;
        public MyViewHolder(View view) {
            super(view);
              //  thumbnail = (YouTubeThumbnailView) view.findViewById(R.id.thumbnail);
            imageView2 = (ImageView) view.findViewById(R.id.imageView2);

        }
    }


    public MoviesAdapterHorizontal(List<String> moviesList) {
        this.moviesList = moviesList;
    //    thumbnailListener = new ThumbnailListener();
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {


        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.hotrow2, parent, false);

        return new MyViewHolder(itemView);

    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        final String url = moviesList.get(position);
        System.out.println("movie url = " + url);

       final String m = url.substring(url.lastIndexOf('/') + 1);
        System.out.println("url = "+m);

      int w = BasicDeviceInfo.getWidth(getActivity());
        //  int h = BasicDeviceInfo.getHeight(getActivity());


        LinearLayout.LayoutParams lParams =
                new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                        w/3);

        AQuery aq = new AQuery(holder.imageView2);

        aq.id(holder.imageView2).image("http://x.x.x.231/news-flicks/uploads/home/tulips_e84aa48cee1a2a25aef001cd74152663.jpg", true, true, 0,
                R.drawable.no_thumbnail);

        holder.imageView2.setLayoutParams(lParams);

       // holder.thumbnail.setLayoutParams(lParams);

      /*  holder.thumbnail.setTag(m);
        holder.thumbnail.initialize("AIzaSyDW-sxPUqy2rD6ZWs3vTNb0jKEKA21RjrY", thumbnailListener);

        holder.thumbnail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getActivity(), FullscreenDemoActivity.class);
                intent.putExtra("url",m);
               intent.putExtra("txt", "");
                startActivity(intent);

            }
        });*/

    }

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

    private final class ThumbnailListener implements
            YouTubeThumbnailView.OnInitializedListener,
            YouTubeThumbnailLoader.OnThumbnailLoadedListener {

        @Override
        public void onInitializationSuccess(
                YouTubeThumbnailView view, YouTubeThumbnailLoader loader) {
            loader.setOnThumbnailLoadedListener(this);
            String videoId = (String) view.getTag();
            loader.setVideo(videoId);
        }

        @Override
        public void onInitializationFailure(
                YouTubeThumbnailView view, YouTubeInitializationResult loader) {
            view.setImageResource(R.drawable.no_thumbnail);
        }

        @Override
        public void onThumbnailLoaded(YouTubeThumbnailView view, String videoId) {
        }

        @Override
        public void onThumbnailError(YouTubeThumbnailView view, YouTubeThumbnailLoader.ErrorReason errorReason) {
            view.setImageResource(R.drawable.no_thumbnail);
        }
    }

}

horizontal xml:-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>


<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/imageView2"
    android:src="@drawable/no_thumbnail"/>
</LinearLayout>

i am calling it parent recycle view onBindViewHolder()

@Override
    public void onBindViewHolder(final MyViewHolder holder, int position) {
        Videos movie = moviesList.get(position);
        System.out.println("Image = " + movie.getImage());

        int w = BasicDeviceInfo.getWidth(getActivity());
        //  int h = BasicDeviceInfo.getHeight(getActivity());
        if(position < 2) {

            final List<String> lst = new ArrayList<String>();
            lst.add(movie.getVideo_url());
            lst.add(movie.getVideo_url());
            lst.add(movie.getVideo_url());
            lst.add(movie.getVideo_url());
            lst.add(movie.getVideo_url());


            final MoviesAdapterHorizontal adapter = new MoviesAdapterHorizontal(lst);
            holder.recyclerView2.setAdapter(adapter);

            adapter.notifyDataSetChanged();

Now my horizontal onBindViewHolder is calling and able to see log messages. But ImageView is not displaying. i think it is hiding or overlapping

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

See onto this Answer for how to make different layout item in RecyclerView

For first two element layout file containing ImageView

For rest item view I will suggest take Horizontal RecyclerView as item

My Custom view for Horizontal `RecyclerView`

public class DocumentViewDynamic extends LinearLayout {
private static final String LOG_TAG = DocumentViewDynamic.class.getSimpleName();
private final String titleStr;
private OnDocumentItemClicked callBack;

public void updateImage(Bitmap bitmap, int postionOfView) {
    Log.e(LOG_TAG, "updateImage: ");
    documentAdapter.setImageFromCamera(bitmap, postionOfView);
}


public interface OnDocumentItemClicked {
    void onDocumentItemClicked(View v, int position);
}


public void setItemClickedListener(OnDocumentItemClicked callBack) {
    this.callBack = callBack;
}

@Bind(R.id.title)
TextView title;
@Bind(R.id.img_add)
FloatingActionButton imgAdd;
private DocumentAdapter documentAdapter;
private final Context context;

@Bind(R.id.rv_document)
RecyclerView rvDocument;

@OnClick(R.id.img_add)
public void addDummyImage() {
    documentAdapter.addSingelDummyImage();
    rvDocument.scrollToPosition(documentAdapter.getItemCount() - 1);
}


public DocumentViewDynamic(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.DocumentViewDynamic, 0, 0);
    try {
        titleStr = ta.getString(R.styleable.DocumentViewDynamic_titleDoc);
    } finally {
        ta.recycle();
    }

    init();
}

public ArrayList<DocumentModel> getAllImageData() {
    return documentAdapter.getImageData();
}

private void init() {

    setOrientation(VERTICAL);

    View view = LayoutInflater.from(context).inflate(R.layout.compund_view_document, this);
    ButterKnife.bind(this, view);

    if (!TextUtils.isEmpty(titleStr))
        title.setText(titleStr);
    initRecyclerView();

}

private void initRecyclerView() {

    rvDocument.setLayoutManager(new LinearLayoutManager(context, HORIZONTAL, false));
    ArrayList<DocumentModel> documentModels = new ArrayList<>();
    documentAdapter = new DocumentAdapter(documentModels);
    rvDocument.setAdapter(documentAdapter);

}


public class DocumentAdapter extends RecyclerView.Adapter<DocumentAdapter.DocViewHolder> {
    public ArrayList<DocumentModel> getImageData() {
        return documentModels;
    }

    private ArrayList<DocumentModel> documentModels = new ArrayList<>();

    public DocumentAdapter(ArrayList<DocumentModel> documentModels) {
        this.documentModels = documentModels;
        if (documentModels.size() == 0)
            documentModels.add(new DocumentModel());
    }


    @Override
    public DocViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_compund_document, parent, false);
        return new DocViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final DocViewHolder holder, int position) {

        if (documentModels.get(position).getBitmap() == null) {
            holder.imgDocument.setImageResource(R.drawable.camera);
            holder.imgBtnDelete.setVisibility(GONE);
        } else {
            holder.imgDocument.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
            holder.imgDocument.setScaleType(ImageView.ScaleType.FIT_XY);
            holder.imgDocument.setImageBitmap(documentModels.get(position).getBitmap());
            holder.imgBtnDelete.setVisibility(VISIBLE);
        }

        holder.itemView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                callBack.onDocumentItemClicked(DocumentViewDynamic.this, holder.getAdapterPosition());
            }
        });


        holder.imgBtnDelete.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (holder.getAdapterPosition() == 0 && documentModels.size() == 1) {
                    documentModels.get(holder.getAdapterPosition()).setBitmap(null);
                } else {
                    documentModels.remove(holder.getAdapterPosition());
                }
                notifyDataSetChanged();
            }
        });

    }

    @Override
    public int getItemCount() {

        return (documentModels != null && documentModels.size() > 0) ? documentModels.size() : 0;
    }

    public void setImageFromCamera(Bitmap imageFromCamera, int postionOfView) {
        documentModels.get(postionOfView).setBitmap(imageFromCamera);
        notifyDataSetChanged();

    }

    public class DocViewHolder extends RecyclerView.ViewHolder {


        @Bind(R.id.img_document)
        ImageView imgDocument;
        @Bind(R.id.img_btn_delete)
        ImageView imgBtnDelete;

        public DocViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }


    public void addSingelDummyImage() {

        if (documentModels.get(documentModels.size() - 1).getBitmap() != null) {
            documentModels.add(new DocumentModel());
            notifyDataSetChanged();
        } else {
            Snackbar.make(rvDocument, "Please Add image ", Snackbar.LENGTH_LONG).show();
        }
    }
}

}

layout file for compound view

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Title"
    android:textColor="#3399ff"
    android:textSize="15dp"
    android:textStyle="normal" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_document"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/img_add" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/img_add"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/fab_plus_bg" />
</RelativeLayout>

Inflate this compound view as item in Vertical `RecyclerView`

I created multiple view. One view is working good for displaying image. Here I am displaying one image in one row. But I am confuse how other view will work like as horizontal scroll. Because one row contain 5 images. kindly suggest to me. — Rahul Rawat, Apr 20 '16 at 06:58
For rest item view I will suggest take Horizontal RecyclerView as item — N J, Apr 20 '16 at 06:59
Thanks May you please share such type demo? I really new in android.I will be thank full for your help. — Rahul Rawat, Apr 20 '16 at 07:06
kindly see my update. My horizontal onBindViewHolder is calling but layout is not displaying — Rahul Rawat, Apr 20 '16 at 08:55

how to display multiply layout in RecyclerView

1 Answers1

My Custom view for Horizontal RecyclerView

layout file for compound view

Inflate this compound view as item in Vertical RecyclerView

My Custom view for Horizontal `RecyclerView`

Inflate this compound view as item in Vertical `RecyclerView`