Android - Cycling through Images component

I'm looking for a component like this:

If you have used Tinder, i want something like when you view a profile, how you can cycle through their pictures.

I'm pretty sure i can implement this manually, but was wondering if something already exists, and i don't really know how to look it up.

Thanks!

Edit: Also sorry for the bad title, didn't really know how to name these types of questions.

You can do your own implementation or could use some libraries. For you own implementation I would suggest using either ViewPager passing Views instead of fragments or PageTransformer if you want something more elaborate.

If you prefer libraries, I would recommend InfiniteCycleViewPager, sayyam's carouselview or you can go in a tour here: https://android-arsenal.com/tag/154, there is a lot of libraries with different implementations.

Example of implementation of an image slider using ViewPager:

First create your activity's xml with a ViewPager component:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.stackoverflow.imageslider.MainActivity">

</android.support.v4.view.ViewPager>

Then in your activity's onCreate method instantiate the ViewPager and create an adapter for it:

    ViewPager viewPager = findViewById(R.id.view_pager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageList);
    viewPager.setAdapter(adapter);

In the ViewPagerAdapter class (that should extend PageAdapter), you will control the images overriding the method instantiateItem():

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    ImageView imageView = new ImageView(context);
    imageView.setImageDrawable(imageList.get(position));

    return imageView;
}

In this example imageList would be an List that is fulfilled somewhere else.

This example is based in a tutorial from codinginflow.com, and you can also take a look there.

Now let's see a simpler implementation, that would do just like you asked, touching the image sides instead of sliding.

Example of simpler implementation:

Create a layout with an ImageView and two buttons overriding it, one for next image on the right and one for previous image in the left:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonPrevious"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent" />

        <Button
            android:id="@+id/buttonNext"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent" />
    </LinearLayout>

</FrameLayout>

Then set the onClick of each button to get the images from a list and set in the ImageView.

    final ImageView imageView = findViewById(R.id.imageView);

    Button next = findViewById(R.id.buttonNext);
    next.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            currentPosition ++;
            imageView.setImageDrawable(drawableList.get(currentPosition));
        }
    });

    Button previous = findViewById(R.id.buttonPrevious);
    previous.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            currentPosition --;
            imageView.setImageDrawable(drawableList.get(currentPosition));
        }
    });

drawableList would be a Drawable that is fulfilled somewhere else. You could also change to a different kind of image list, doesn't matter. current position would be and int that starts at 0.

For PageTransformer I would recommend Bincy Baby's answer and phantomraa's answer.

In case the link gets broken I'll leave Bincy Baby's code here:

viewPagerMusicCategory.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            Log.e("pos",new Gson().toJson(position));
            if (position < -1) {
                page.setScaleY(0.7f);
                page.setAlpha(1);
            } else if (position <= 1) {
                float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
                page.setScaleX(scaleFactor);
                Log.e("scale",new Gson().toJson(scaleFactor));
                page.setScaleY(scaleFactor);
                page.setAlpha(scaleFactor);
            } else {
                page.setScaleY(0.7f);
                page.setAlpha(1);
            }
        }
    }
);

I think you could also mix PageTransformer with the examples I gave.

The libraries each one already have a good documentation, if not in the android arsenal you can find it in GitHub, and even if I post some code here, if the library closes, gets outdated or something like that, the code will not be useful anymore.