asknilesh / carousel-layout-using-viewpager2 Goto Github PK

View Code? Open in Web Editor NEW

70.0 4.0 8.0 172 KB

Kotlin 48.84% Java 51.16%

android viewpager2 kotlin viewpager viewpagertransformer viewpager-transformer animation

carousel-layout-using-viewpager2's Introduction

carousel-layout-using-viewPager2

Here is the output of this repository

if you want make current page zoom like this image

Then please use this PageTransformer

 private fun createCardHolder() {

    viewPager?.orientation = ViewPager2.ORIENTATION_HORIZONTAL
    viewPager?.adapter = myAdapter
    viewPager?.offscreenPageLimit = 1

    val nextItemVisibleWidth = resources.getDimension(R.dimen.next_item_visible_width)
    val currentItemMargin =
        resources.getDimension(R.dimen.viewpager_horizontal_margin)
    val pageTranslation = nextItemVisibleWidth + currentItemMargin
    viewPager?.setPageTransformer { page: View, position: Float ->
        page.translationX = -pageTranslation * position
        page.scaleY = 1 - (0.25f * abs(position))
        page.alpha = 0.25f + (1 - abs(position))
    }
    val itemDecoration = PagerMarginItemDecoration(
        this,
        R.dimen.viewpager_horizontal_margin
    )
    viewPager?.addItemDecoration(itemDecoration)
}

Other Transformation with ViewPager2 https://github.com/askNilesh/Viewpager-Transformation

carousel-layout-using-viewpager2's People

Contributors

Stargazers

Watchers

Forkers

nurcwb iamkurtgoz elcas21 lbfjo basirsharif usman-banodev morristech onurserbes

carousel-layout-using-viewpager2's Issues

when i swipe current view, it smoothly doesn't change..

First, i appreciate your code for zoom of viewPager2. also i applied your code into my Project and Worked well.

but i'd like to smoothly zoom when i swipe current View. im trying to it,but so difficult.

How can I zoom smoothly? thank you sir.

Hey, Can you make this Carousel Infinite?

We have many ways to make infinite carousel to ViewPager, still, I'm making an Infinite Carousel with ViewPager 2! And the PageTransformer you used here doesn't work for RTL layout? ViewPager2 supports RTL as well!

Viewpager library option

Can the zoom implementation be used with viewpager and not viewpager2?

Scaling looks stretched.

Hi sir. I need support.
I have a pie chart in viewpager2. It looks stretched. How can I fix this.

Stretched image.

Normal image

Code to zoom center card.
`float pageMargin= getResources().getDimensionPixelOffset(R.dimen.pageMargin);//20dp
float pageOffset = getResources().getDimensionPixelOffset(R.dimen.offset);//20sp
//pagemargin=30dp

    myViewPager2.setPageTransformer((page, position) -> {
        float myOffset = position * -(2 * pageOffset + pageMargin);
        if (position < -1) {
            page.setTranslationX(-myOffset);
        } else if (position <= 1) {
            float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
            //Log.i("blb07",position+" = "+scaleFactor);
            page.setTranslationX(myOffset);
            page.setScaleY(scaleFactor);
            //page.setScaleX(scaleFactor);
            page.setAlpha(scaleFactor);

        } else {
            page.setAlpha(0);
            page.setTranslationX(myOffset);
        }

});`

Please help.

APK https://drive.google.com/open?id=1x5Oi6kDFggXk89J_SnETMORZHHyn7ZiL

Transparent Layout Problem

I am using this viewPager project but ı didn't understand why those views are transparent. I checked both XML and JAVA file but ı couldn't find the problem.

You can find the codes that ı'm using:

I convert to Kotlin

`myViewPager2 = findViewById(R.id.viewpager);

  view.viewpager.orientation = ViewPager2.ORIENTATION_HORIZONTAL;
    view.viewpager.adapter = myAdapter;
    view.viewpager.offscreenPageLimit = 3;

    val pageMargin = resources.getDimensionPixelOffset(R.dimen.pageMargin).toFloat()
    val pageOffset = resources.getDimensionPixelOffset(R.dimen.offset).toFloat()

    view.viewpager.setPageTransformer(ViewPager2.PageTransformer { page: View, position: Float ->
        val myOffset = position * -(2 * pageOffset + pageMargin)
        when {
            position < -1 -> {
                page.translationX = -myOffset
            }
            position <= 1 -> {
                val scaleFactor =
                    max(0.7f, 1 - abs(position - 0.14285715f))
                page.translationX = myOffset
                page.scaleY = scaleFactor
                page.alpha = scaleFactor
            }
            else -> {
                page.alpha = 0f
                page.translationX = myOffset
            }
        }
    })`

and here is the XML

<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="5dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.19" />

asknilesh / carousel-layout-using-viewpager2 Goto Github PK

carousel-layout-using-viewpager2's Introduction

carousel-layout-using-viewPager2

Other Transformation with ViewPager2 https://github.com/askNilesh/Viewpager-Transformation

carousel-layout-using-viewpager2's People

Contributors

Stargazers

Watchers

Forkers

carousel-layout-using-viewpager2's Issues

when i swipe current view, it smoothly doesn't change..

Hey, Can you make this Carousel Infinite?

Viewpager library option

Scaling looks stretched.

Transparent Layout Problem

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent