Android - Cycling through Images component

Question

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.

Answer 1

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.