AutoImageFlipper

Auto Scrolling Image Pager with Pager Indicator and Text

Note: It works only on Apps which are using AndroidX dependencies, if you're not using AndroidX,
you can migrate to AndroidX by selecting Refactor -> Migrate to AndroidX from the
Android Studio top bar.

Gradle

Using jCenter

• Maven

<dependency>
<groupId>com.github.technolifestyle</groupId>
<artifactId>AutoImageFlipper</artifactId>
<version>1.6.0</version>
<type>pom</type>
</dependency>

• Gradle

implementation 'com.github.technolifestyle:AutoImageFlipper:1.6.0'

• Ivy

<dependencyorg="com.github.technolifestyle"name="AutoImageFlipper"rev="1.6.0">
<artifactname="AutoImageFlipper"ext="pom"></artifact>
</dependency>

Using Jitpack

• Gradle

1. In your top level build.gradle file, in the repository section add the maven { url 'https://jitpack.io' } as shown below

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

2. Add the AutoImageFlipper dependency in your app level build.gradle file

dependencies {
implementation 'com.github.therealshabi:AutoImageFlipper:1.6.0'
}

• Maven

1. Add the JitPack repository to your build file

<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>

2. Add the dependency

<dependency>
<groupId>com.github.therealshabi</groupId>
<artifactId>AutoImageFlipper</artifactId>
<version>1.6.0</version>
</dependency>

Implementation

This is an Automatic scrolling Image Slider Library with the functionality of adding an image with its optional description, it also has a View Pager Indicator and built in listeners and much more.

The library is open for contributions. You can contribute by simply creating a new PR or in case you find any issue/question/any other thing you can report it here.

GIFs

Usage

• In XML layout:

<technolifestyle.com.imageslider.FlipperLayout
xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/flipper_layout"android:layout_width="match_parent"android:layout_height="200dp"/>

• In Java File: For View Pager with 3 Views

FlipperLayoutflipperLayout = (FlipperLayout) findViewById(R.id.flipper_layout);
intnum_of_pages = 3;
for (inti = 0; i < num_of_pages; i++) {
FlipperViewview = newFlipperView(getBaseContext());
view.setImageScaleType(ScaleType.CENTER_CROP) // You can use any ScaleType
.setDescription("Description") // Add custom description for your image in the flipper view
.setImage(R.mipmap.ic_launcher, newFunction2<ImageView, Object, Unit>() {
@OverridepublicUnitinvoke(ImageViewimageView, Objectimage) {
// As per the user discretion as to how they want to load the URL/* E.g since an image of Drawable type is sent as a param in setImage method, The Object * image will be of type Drawable * imageView.setImageDrawable((Drawable)image); */returnUnit.INSTANCE;
}
})
.setOnFlipperClickListener(newFlipperView.OnFlipperClickListener() {
@OverridepublicvoidonFlipperClick(FlipperViewflipperView) {
// Handle View Click here
}
});
flipperLayout.setScrollTimeInSec(5); //setting up scroll time, by default it's 3 secondsflipperLayout.getScrollTimeInSec(); //returns the scroll time in secflipperLayout.getCurrentPagePosition(); //returns the current position of pagerflipperLayout.addFlipperView(view);
}

• FlipperView customization includes:

//Instantiate FlipperViewFlipperViewview = newFlipperView(getBaseContext());

Methods to set image resource into the Flipper View

• Kotlin

//Set Image into the flipperView using url
view.setImageUrl("https://source.unsplash.com/random") { imageView, image ->// Load image (url) into the imageview using any image loading library of your choice// E.g. Picasso.get().load(image as String).into(imageView);
}
//Set Image using Drawable resource
view.setImageDrawable(ContextCompat.getDrawable(context, R.drawable.placeholder)) { imageView, image ->
imageView.setImageDrawable(image asDrawable)
}
//Set Image using Bitmap image
view.setImageBitmap(bitmapImage) { imageView, image ->
imageView.setImageBitmap(image asBitmap)
}

or you can use a common method to set the image

view.setImage(R.drawable.error) { imageView, image ->
imageView.setImageDrawable(image asDrawable)
}

There are 4 types of values setImage method can take as the first param, a url of String type, an integer drawable resource Id of @DrawableRes Int type and images of Drawable and Bitmap type. In case any other values are send in this method, the method will throw IllegalArgumentException.

It's worth noting that for each type of image we provide as the first param in the method we need to type cast the image with the same type while setting the image into the image view via the second higher order function, i.e. for instance in method

view.setImageDrawable(ContextCompat.getDrawable(context, R.drawable.placeholder)) { imageView, image ->
imageView.setImageDrawable(image asDrawable)
}

we sent a Drawable resource file as the first param, so while setting the image in the ImageView in the higher order function, we have type cast it to Drawable type explicitly as we can see in the line imageView.setImageDrawable(image as Drawable), the only exception in this process being the instance when we send a drawable resource, we need to typecast the image to Drawable type, although we send an @DrawableRes Int param.

E.g.

view.setImage(R.drawable.error) { imageView, image ->
imageView.setImageDrawable(image asDrawable)
}

Besides that setImage method throws 3 kinds of Exception:-

1. When we send a string URL, which does not actually resolve to an actual URL, a MalformedURLException is thrown.
2. IllegalArgumentException is thrown when we try to send any Illegal typed first param i.e types in addition to the types a url of String type, an integer drawable resource Id of @DrawableRes Int type and images of Drawable or Bitmap type.
3. IllegalStateException this exception is thrown when the user tries to set more than one image into a single FlipperView.

• Java

  For java just replace the 2nd param of above methods with:-

  newFunction2<ImageView, Object, Unit>() {
  @OverridepublicUnitinvoke(ImageViewimageView, Objectimage) {
  // As per the user discretion as to how they want to load the URL/* E.g since an image of Drawable type is sent as a param in setImage method, The Object * image will be of type Drawable * imageView.setImageDrawable((Drawable)image); */returnUnit.INSTANCE;
  }
  }

  For Instance the equivalent of setImageDrawable method in Java would be:-

  view.setImageDrawable(ContextCompat.getDrawable(context, R.drawable.placeholder), newFunction2<ImageView, Object, Unit>() {
  @OverridepublicUnitinvoke(ImageViewimageView, Objectimage) {
  imageView.setImageDrawable((Drawable) IMAGE);
  returnUnit.INSTANCE;
  }
  });

  Similarly for all other methods

---

Other important FlipperView methods

// Set Image Description Text (Optional)view.setDescription("Great Image");

// Set Description text view background colorview.setDescriptionBackgroundColor(Color.Green);

// Set Description text view background alpha (0 <= alpha <= 1)view.setDescriptionBackgroundAlpha(0.5f);

// Set Description text view background with color and alpha (0 <= alpha <= 1)view.setDescriptionBackgroundAlpha(Color.BLUE, 0.5f);
// Set Description text view background with a drawable resourceview.setDescriptionBackgroundDrawable(R.drawable.bg_overlay);

// Reset Description text view background and text colorview.resetDescriptionTextView();

// Set Description Text Text colorview.setDescriptionTextColor(Color.WHITE);

// Set Image scale type (E.g. ScaleType.CENTRE_CROP)view.setImageScaleType(ScaleType.CENTER_INSIDE);

// Set click listenerview.setOnFlipperClickListener(newFlipperView.OnFlipperClickListener() {
@OverridepublicvoidonFlipperClick(FlipperViewflipperView) {
Toast.makeText(MainActivity.this, "I was clicked", Toast.LENGTH_SHORT).show();
}
});

• FlipperLayout methods includes:-

// InstantiationFlipperLayoutflipperLayout = (FlipperLayout) findViewById(R.id.flipper_layout);

// Set flipper scroll time in seconds (default 3s)flipperLayout.setScrollTimeInSec(5);

// Method to remove auto image sliding/flipping/cyclingflipperLayout.removeAutoCycle();

// Method to start auto image sliding/flipping/cyclingflipperLayout.startAutoCycle();
flipperLayout.startAutoCycle(5); // will start auto cycling image with a delay of 5 seconds

// Method to remove all existing Flipper Views from the Flipper LayoutflipperLayout.removeAllFlipperViews();

// Set Circle Indicator width (in dp)flipperLayout.setCircleIndicatorWidth(200);

// Set Circle Indicator height (in dp)flipperLayout.setCircleIndicatorHeight(20);

// Set Circle Indicator width and height (in dp)flipperLayout.setCircularIndicatorLayoutParams(200, 20);

// Metod set circular Indicator backgroundflipperLayout.setIndicatorBackgroundColor(Color.parseColor("#90000000")); // To set background colorflipperLayout.setIndicatorBackground(R.drawable.your_drawable); // To set background drawable using drawable resource idflipperLayout.setIndicatorBackground(ContextCompat.getDrawable(context, R.drawable.your_drawable)); // To set background drawable using drawable resource

// Remove Circular indicatorflipperLayout.removeCircleIndicator();

// Show Circular IndicatorflipperLayout.showCircleIndicator();

// Method to show inner circle indicator rather than an exterior indicatorflipperLayout.showInnerPagerIndicator();

// Method to customise the flipper layoutflipperLayout.customizeFlipperPager { flipperPager ->
// Do whatever you like to do with the flipperPager
};

// Method to customise flipper layout's default circular indicatorflipperLayout.customizeCircularIndicator { circularIndicator ->
// Do whatever you like to do with the circular indicator
};

// Returns the currently displayedflipperLayout.getCurrentPagePosition();

// Add flipperView into the flipperLayoutflipperLayout.addFlipperView(flipperView);

// Add list of flipperViews into the flipperLayout at onceArrayList<FlipperView> flipperViewList = newArrayList()
flipperViewList.add(newFlipperView(context));
flipperViewList.add(newFlipperView(context)
.setDescription("test flipper view"));
...
flipperLayout.addFlipperViewList(flipperViewList);

// Add different PageTransformer animation similar to ViewPagerflipperLayout.addPageTransformer(false, newZoomOutPageTransformer());

A couple of pre-defined PageTransformer is included in the library namely, ZoomOutPageTransformer and DepthPageTransformer, you can add your custom PageTransformer logic as well.

flipperLayout.addPageTransformer(false, newViewPager.PageTransformer() {
@OverridepublicvoidtransformPage(@NonNullViewpage, floatposition) {
//Write your animation logic here
}
});

---

Usage with the RecyclerView

To use FlipperLayout in the RecyclerView, before binding the layout remove all the existing flipper views from the FlipperLayout by calling flipperLayout.removeAllFlipperViews() and post that populate new flipper views in the flipperLayout. A sample code is present in the HomeRecyclerAdapter class.

License

Copyright 2021 Shahbaz Hussain
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.