CODEWITHSUNDEEP
androidandroid-viewpagerviewpagerindicator
Nirav Shah
Nirav Shah

Reputation: 67

view pager view like playstore

i have tired code for view pager but its not works for me because i want to display same like play store

HashMap<String, String> url_maps = new HashMap<String, String>();
        url_maps.put("PragYal Gold", "http://sponsorimage/9434654.jpg");
        url_maps.put("", "http://sponsorimage/4322132.jpg");
        url_maps.put("Zee Bangles", "http://sponsorimage/2312958.png");
        url_maps.put("", "http://sponsorimage/5134998.png");
        url_maps.put("Mahapragya", "http://sponsorimage/6830009.png");
        url_maps.put("", "http://sponsorimage/8537751.png");
        url_maps.put("Zee Bangles", "http://sponsorimage/3549573.png");
        url_maps.put("Shah & Comapny", "http://sponsorimage/5400190.png");
        url_maps.put("", "http://sponsorimage/8135090.png");
        for (String name : url_maps.keySet()) {
            TextSliderView textSliderView = new TextSliderView(getApplicationContext());
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(url_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);

this is my tryout and its display like enter image description here

but i want like this please give me solution enter image description here

thank you

Upvotes: 0

Views: 700

Answers (3)

Suraj Vaishnav
Suraj Vaishnav

Reputation: 8305

For old ViewPager, you can do it easily like this:

viewPager.setClipToPadding(false);
viewPager.setPadding(48, 0, 48, 0);
viewPager.setPageMargin(24);

For ViewPagger2 Do this: In xml:

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager2"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_120sdp" />

In Kotlin: 

 viewPager2.adapter=SliderAdapter()
            val rvInstance=viewPager2.children.first { it is RecyclerView } as RecyclerView
            rvInstance.also {
                it.setPadding(32.toPx(), 0, 16.toPx(), 0)
                it.clipToPadding = false
                it.addItemDecoration(ItemDecoration())
            }

Your ItemDecoration class:

class ItemDecoration: RecyclerView.ItemDecoration() {
  override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
    super.getItemOffsets(outRect, view, parent, state)
    outRect.right = 16.toPx()
 //   outRect.left=16.toPx()
  }
}

fun Int.toPx(): Int {
  val metrics = Resources.getSystem().displayMetrics
  val px = this * (metrics.densityDpi / 160f)
  return Math.round(px)
}

Upvotes: 1

jazzbpn
jazzbpn

Reputation: 7348

Please checkout this VIEW PAGER library:

https://github.com/Devlight/InfiniteCycleViewPager

Upvotes: 1

mnp343
mnp343

Reputation: 329

You will have to use card view as row in horizontal recyclerview .

You will have to use snaphelper with recyclerview for this behavior.

Snaphelper is the key. No need of using any library.

http://www.devexchanges.info/2016/09/android-tip-recyclerview-snapping-with.html?m=1

Upvotes: 1

Related Questions