How to add multiple Images in a RecyclerView Item similar to Instagrams

Question

I have a recyclerview in which I show items in a cardview successfully with a single image. I want to be able to add the ability to view more than one image in the cardview in a slider similar to Instagram.

I have implemented the slider in an activity using a viewpager and fragments.

My recyclerview is in a fragment and to add a viewpager, adapter and more fragments nested seems messy as you would have to pass the fragment manager so deep down, I was wondering if there was a better way?

I think you ca try an Horizontal `RecyclerView` with a `SnapHelper`, but probably UX won't feel the same — Ionut J. Bejan, Apr 05 '18 at 06:19
can you post the screenshot of desired design you're trying to achieve? — Somesh Kumar, Apr 05 '18 at 06:20
`ViewPager` is not inherently tied to `Fragment`s. You can use one with any sort of simple `View`s or layouts you want. — Mike M., Apr 05 '18 at 06:34
@IonutJ.Bejan your right and the UX isn't the same so will look at something closer to viewpager with indicators. — CaptRisky, Apr 05 '18 at 08:50
@SomeshKumar pretty much the same as instagram multiple images, just not sure how they implemented it. — CaptRisky, Apr 05 '18 at 08:51
@MikeM. cheers mate, on the lookout for an example with this style — CaptRisky, Apr 05 '18 at 08:51
u can use the only viewpager inside recyclerview and make adapter viewpageradapter and recyclerviewadapter and attach viewpageradpter into the recyclerviewadapter and recyclerviewadapter attach into fragment — MohammedAli, Aug 11 '18 at 06:15

score 0 · Answer 1 · answered Apr 05 '18 at 06:34

You can use a library called AndroidImageSider. Make sure you stop the auto slide by setting mDemoSlider.stopAutoCycle();

<com.daimajia.slider.library.SliderLayout
    android:id="@+id/slider"
    android:layout_width="match_parent"
    android:layout_height="200dp"
/>

HashMap<String,String> url_maps = new HashMap<String, String>();
    url_maps.put("Hannibal", "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
    url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
    url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");
    url_maps.put("Game of Thrones", "http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");

    HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
    file_maps.put("Hannibal",R.drawable.hannibal);
    file_maps.put("Big Bang Theory",R.drawable.bigbang);
    file_maps.put("House of Cards",R.drawable.house);
    file_maps.put("Game of Thrones", R.drawable.game_of_thrones);

    for(String name : file_maps.keySet()){
        TextSliderView textSliderView = new TextSliderView(this);
        // initialize a SliderLayout
        textSliderView
                .description(name)
                .image(file_maps.get(name))
                .setScaleType(BaseSliderView.ScaleType.Fit)
                .setOnSliderClickListener(this);

        //add your extra information
        textSliderView.bundle(new Bundle());
        textSliderView.getBundle()
                    .putString("extra",name);

       mDemoSlider.addSlider(textSliderView);
    }
    mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
    mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
    mDemoSlider.setCustomAnimation(new DescriptionAnimation());
    mDemoSlider.setDuration(4000);
    mDemoSlider.addOnPageChangeListener(this);
    ListView l = (ListView)findViewById(R.id.transformers);
    l.setAdapter(new TransformerAdapter(this));
    l.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            mDemoSlider.setPresetTransformer(((TextView) view).getText().toString());
            Toast.makeText(MainActivity.this, ((TextView) view).getText().toString(), Toast.LENGTH_SHORT).show();
        }
    });

This library is cool, but not exactly what I'm after, cheers for your time though — CaptRisky, Apr 05 '18 at 08:52

How to add multiple Images in a RecyclerView Item similar to Instagrams

1 Answers1