Displaying content with their corresponding Images in a RecylerView

Question

I have an adapter MyAdapter.java For recyclerView

I have row view Model.xml

<android.support.v7.widget.CardView>
<RelativeLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="@dimen/padd_10dp">

    <TextView
        android:ellipsize="end"
        android:id="@+id/subject"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:maxLines="1"
        android:paddingLeft="@dimen/padd_10dp"
        android:textAppearance="@style/TextAppearance.AppCompat"
        android:textStyle="bold" />

    <TextView
        android:ellipsize="end"
        android:id="@+id/message"
        android:layout_below="@+id/subject"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:maxLines="2"
        android:paddingLeft="@dimen/padd_10dp"
        android:textAppearance="@style/TextAppearance.AppCompat" />

    <TextView
        android:alpha="1.87"
        android:id="@+id/uploadedDate"
        android:layout_alignParentRight="true"
        android:layout_below="@id/message"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="@dimen/padd_4db"
        android:text="2018-07-21"
        android:textSize="@dimen/text_size_12sp" />

    //Display Array of images/media here

</RelativeLayout>

How do I Display Array of images/media on onBindViewHolder of my adapter class.

Can someone give an Idea?

Possible duplicate of [Images in RecyclerView](https://stackoverflow.com/questions/26890190/images-in-recyclerview) — Mohamed Mohaideen AH, Sep 05 '18 at 14:59
Note Duplicate. [Images in RecyclerView – Mohamed Mohaideen AH](https://stackoverflow.com/questions/26890190/images-in-recyclerview) display single image with other content in the row. Mine display has list of images in the row with other content — Navigator, Sep 06 '18 at 06:58
If you want to display array of images to number of rows in recylerview.. or you have only one row that is horizontal scroll.. — Mohamed Mohaideen AH, Sep 06 '18 at 07:05
You want vertical recylerview with group of images in a row or you want the horizontal recylerview in single row.. — Mohamed Mohaideen AH, Sep 06 '18 at 07:56
recylerview with group of images with other content in a row — Navigator, Sep 06 '18 at 08:21
Just like that in whatsap where content is the message and list of user uploaded media/Images — Navigator, Sep 06 '18 at 08:23

Mohamed Mohaideen AH · Answer 1 · 2018-09-18T16:10:01.507

Here i share my workaround you can check..

How to show group of images in a single row

Add horizontal scrollview in a row.

 <LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:background="@color/white"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

   /* OTHER VIEWS */

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <LinearLayout
            android:id="@+id/imgEvents"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />
    </HorizontalScrollView>

</LinearLayout>

Note am using glide library you can find here https://github.com/bumptech/glide

Add this method in adapter class to create imageview at runtime.

 private View getImageView(String url) {
    ImageView imageView = new ImageView(mContext);
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    lp.setMargins(0, 0, 10, 0);
    imageView.setLayoutParams(lp);
    Glide.with(mContext).load(url).into(imageView);
    return imageView;
}

Adjust the imageview parameters according to your needs.

  public class MyViewHolder extends RecyclerView.ViewHolder {

    private LinearLayout imgEvevts;
    // Add other views also
    public MyViewHolder(View itemView) {
        super(itemView);

        imgEvevts = itemView.findViewById(R.id.imgEvents);
    }
}

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


    String[] event_images = item.getImages(); //get array of strings here & declare string array at top.

    for (int i = 0;i < event_images.length;i++)
    {
        holder.imgEvevts.addView(getImageView(event_images[i]));
    }


}

How whever. Can I have Recyler view with another adapter to render image? — Navigator, Sep 09 '18 at 16:12
I mean instead of having a horizontalscrollview with linearlayout where we add image progamaticaly to the linear layout. Can we have recylerview instead of linearlayout to display images — Navigator, Sep 09 '18 at 16:29
Yes you can use recylerview inside recylerview instead of scrollview & use seperate adapter.. — Mohamed Mohaideen AH, Sep 09 '18 at 16:30
I have updated your answer with my new code. Could you please check why I cant get recyclerview displayed? @mohamed-mohaideen-ah — Navigator, Sep 14 '18 at 08:23

Displaying content with their corresponding Images in a RecylerView

1 Answers1