This is an amazing image slider for the Android .
You can easily load images with your custom layout, and there are many kinds of amazing animations you can choose.
Copy & Past this line in to your app level Gradle
implementation 'com.github.PatelPinal:imageslider:1.0.0'Copy & Past this line in to your project Gradle
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}- Added new adapter based slider view, Provides the ability to add custom views
- Bugs fixed
- Fixed animation issues
- Indicator attributes added
- Migrated to androidx
First put the slider view in your layout xml :
<om.peenal.slider.SliderView
android:id="@+id/imageSlider"
android:layout_width="match_parent"
android:layout_height="300dp"
app:sliderAnimationDuration="600"
app:sliderAutoCycleDirection="back_and_forth"
app:sliderAutoCycleEnabled="true"
app:sliderCircularHandlerEnabled="true"
app:sliderIndicatorAnimationDuration="600"
app:sliderIndicatorGravity="center_horizontal|bottom"
app:sliderIndicatorMargin="15dp"
app:sliderIndicatorOrientation="horizontal"
app:sliderIndicatorPadding="3dp"
app:sliderIndicatorRadius="2dp"
app:sliderIndicatorSelectedColor="#5A5A5A"
app:sliderIndicatorUnselectedColor="#FFF"
app:sliderScrollTimeInSec="1"
app:sliderStartAutoCycle="true" />Or you can put it inside the cardView to look more beautiful :
<androidx.cardview.widget.CardView
app:cardCornerRadius="6dp"
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<om.peenal.slider.SliderView
android:id="@+id/imageSlider"
android:layout_width="match_parent"
android:layout_height="300dp"
app:sliderAnimationDuration="600"
app:sliderAutoCycleDirection="back_and_forth"
app:sliderAutoCycleEnabled="true"
app:sliderCircularHandlerEnabled="true"
app:sliderIndicatorAnimationDuration="600"
app:sliderIndicatorGravity="center_horizontal|bottom"
app:sliderIndicatorMargin="15dp"
app:sliderIndicatorOrientation="horizontal"
app:sliderIndicatorPadding="3dp"
app:sliderIndicatorRadius="2dp"
app:sliderIndicatorSelectedColor="#5A5A5A"
app:sliderIndicatorUnselectedColor="#FFF"
app:sliderScrollTimeInSec="1"
app:sliderStartAutoCycle="true" />
</androidx.cardview.widget.CardView>The new version requires an slider adapter plus your custom layout for slider items, Although its very similar to RecyclerView & RecyclerAdapter, and it's familiar and easy to implement this adapter... here is an example for adapter implementation :
public class SliderAdapter extends SliderViewAdapter<SliderAdapter.SliderAdapterVH> {
private Context context;
public SliderAdapter(Context context) {
this.context = context;
}
@Override
public SliderAdapterVH onCreateViewHolder(ViewGroup parent) {
View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_slider_layout_item, null);
return new SliderAdapterVH(inflate);
}
@Override
public void onBindViewHolder(SliderAdapterVH viewHolder, int position) {
viewHolder.textViewDescription.setText("This is slider item " + position);
switch (position) {
case 0:
Glide.with(viewHolder.itemView)
.load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
.into(viewHolder.imageViewBackground);
break;
case 1:
Glide.with(viewHolder.itemView)
.load("https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
.into(viewHolder.imageViewBackground);
break;
case 2:
Glide.with(viewHolder.itemView)
.load("https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
.into(viewHolder.imageViewBackground);
break;
default:
Glide.with(viewHolder.itemView)
.load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
.into(viewHolder.imageViewBackground);
break;
}
}
@Override
public int getCount() {
//slider view count could be dynamic size
return 4;
}
class SliderAdapterVH extends SliderViewAdapter.ViewHolder {
View itemView;
ImageView imageViewBackground;
TextView textViewDescription;
public SliderAdapterVH(View itemView) {
super(itemView);
imageViewBackground = itemView.findViewById(R.id.iv_auto_image_slider);
textViewDescription = itemView.findViewById(R.id.tv_auto_image_slider);
this.itemView = itemView;
}
}
}After the instantiating of the sliderView (inside the activity or fragment with findViewById blah blah...), set the adapter to the slider.
sliderView.setSliderAdapter(new SliderAdapter(context));You can call this method if you want to start flipping automatically and you can also set up the slider animation :
sliderView.startAutoCycle();
sliderView.setIndicatorAnimation(IndicatorAnimations.WORM);
sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);Here is a more realistic and more complete example :
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SliderView sliderView = findViewById(R.id.imageSlider);
SliderAdapter adapter = new SliderAdapter(this);
sliderView.setSliderAdapter(adapter);
sliderView.setIndicatorAnimation(IndicatorAnimations.WORM); //set indicator animation by using SliderLayout.IndicatorAnimations. :WORM or THIN_WORM or COLOR or DROP or FILL or NONE or SCALE or SCALE_DOWN or SLIDE and SWAP!!
sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);
sliderView.setAutoCycleDirection(SliderView.AUTO_CYCLE_DIRECTION_BACK_AND_FORTH);
sliderView.setIndicatorSelectedColor(Color.WHITE);
sliderView.setIndicatorUnselectedColor(Color.GRAY);
sliderView.setScrollTimeInSec(4); //set scroll delay in seconds :
sliderView.startAutoCycle();
}Suggestions and pull requests are always welcome.