PageStyle not working as expected

[AlaaZarifa]

I want to achieve the design below

but this what it looks like when I run the project

here's the code:

 mViewPager.apply {
            adapter = HomeBannerAdapter(requireContext())
            setLifecycleRegistry(lifecycle)
            setPageMargin(BannerUtils.dp2px(10f))
            setRevealWidth(BannerUtils.dp2px(50f))
            setPageStyle(PageStyle.MULTI_PAGE_SCALE)
        }.create()

                    <com.zhpan.bannerview.BannerViewPager
                        android:id="@+id/banner_view"
                        android:layout_width="match_parent"
                        android:layout_height="160dp"
                        android:layout_marginVertical="10dp"
                        app:bvp_auto_play="true"
                        app:bvp_can_loop="true"
                        app:bvp_indicator_checked_color="@color/colorPrimary"
                        app:bvp_indicator_gravity="center"
                        app:bvp_indicator_normal_color="@color/gray"
                        app:bvp_indicator_radius="5dp"
                        app:bvp_indicator_slide_mode="worm"
                        app:bvp_indicator_style="round_rect"
                        app:bvp_indicator_visibility="visible"
                        app:bvp_interval="5000"
                        app:bvp_round_corner="8dp" />

item_row

<?xml version="1.0" encoding="utf-8"?>
<com.makeramen.roundedimageview.RoundedImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginHorizontal="0dp"
    android:background="?selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:scaleType="centerCrop"
    android:src="@drawable/pic_intro_1"
    app:riv_corner_radius="8dp" />

---

I tried to mess with setPageMargin & setRevealWidth with different values and it didn't show excatly like the design. also the I want the indicator to be postioned below the cards.

[zhpanvip]

The IndicatorView is a View that you can used anywhere.Just need call setIndicatorView.

-------- 原始信息 -------- 发件人： Alaa AbuZarifa @.> 日期: 2022/3/15 00:23 (GMT+08:00) 收件人： zhpanvip/BannerViewPager @.> 抄送： Subscribed @.***> 主题： [zhpanvip/BannerViewPager] PageStyle not working as expected (Issue #247)

I want to achieve the design below

[image]https://user-images.githubusercontent.com/18426012/158214255-a7329070-1661-4bef-9769-996b45d3fae9.png

but this what it looks like when I run the project

[image]https://user-images.githubusercontent.com/18426012/158214744-bd8f9301-c5ff-456a-8c43-772f992d42ab.png

here's the code:

mViewPager.apply { adapter = HomeBannerAdapter(requireContext()) setLifecycleRegistry(lifecycle) setPageMargin(BannerUtils.dp2px(10f)) setRevealWidth(BannerUtils.dp2px(50f)) setPageStyle(PageStyle.MULTI_PAGE_SCALE) }.create()

                <com.zhpan.bannerview.BannerViewPager
                    android:id="@+id/banner_view"
                    android:layout_width="match_parent"
                    android:layout_height="160dp"
                    android:layout_marginVertical="10dp"
                    app:bvp_auto_play="true"
                    app:bvp_can_loop="true"
                    ***@***.***/colorPrimary"
                    app:bvp_indicator_gravity="center"
                    ***@***.***/gray"
                    app:bvp_indicator_radius="5dp"
                    app:bvp_indicator_slide_mode="worm"
                    app:bvp_indicator_style="round_rect"
                    app:bvp_indicator_visibility="visible"
                    app:bvp_interval="5000"
                    app:bvp_round_corner="8dp" />

item_row

<?xml version="1.0" encoding="utf-8"?> <com.makeramen.roundedimageview.RoundedImageView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginHorizontal="0dp" android:background="?selectableItemBackground" android:clickable="true" android:focusable="true" android:scaleType="centerCrop" @.***/pic_intro_1" app:riv_corner_radius="8dp" />

---

I tried to mess with setPageMargin & setRevealWidth with different values and it didn't show excatly like the design. also the I want the indicator to be postioned below the cards.

― Reply to this email directly, view it on GitHubhttps://github.com/zhpanvip/BannerViewPager/issues/247, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEXPBI4Z4QRXHFF2BXF2Y2DU75RXJANCNFSM5QWBQNUQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[AlaaZarifa]

@zhpanvip I got it, but my main issue is not the IndicatorView, the real purpose of the issue is to achieve the same gap between the cards just like the design (first image), but the side cards don't show at all unless i set setRevealWidth = 50 or higher, but that shrinks the widgth of the card in the middle just like in the second image.

[TwilightKHQ]

same problem

[zhpanvip]

what’s the version did you used? I test v3.5.5,it worked very well.

        mViewPager
            .setPageMargin(resources.getDimensionPixelOffset(dimen.dp_10))
            .setScrollDuration(800)
            .setRevealWidth(BannerUtils.dp2px(50f))
            .setPageStyle(PageStyle.MULTI_PAGE_SCALE)
            .create(getPicList(4))

[TwilightKHQ]

version: 3.5.5 item的imageview宽高不是match_parent就会显得两边空余较多 item_slide_mode->CornerImageView->android:layout_width="240dp"

item_slide_mode->CornerImageView->android:layout_width="match_parent"

[TwilightKHQ]

所以问题点在于 一个Item的内容不是match_parent 怎么调整两个item的间距

[AlaaZarifa]

It worked after adjusting the horizontal width of the item

<com.makeramen.roundedimageview.RoundedImageView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginHorizontal="-20dp"     // I had to add a negtaive value 
    android:background="?selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:scaleType="centerCrop"
    android:src="@drawable/pic_intro_1"
    app:riv_corner_radius="8dp" />