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.
implementation 'com.github.smarteist:autoimageslider:1.4.0'If you are using appcompat libraries use this one, but please migrate to androidx as soon as you can.
implementation 'com.github.smarteist:autoimageslider:1.4.0-appcompat'- Ability to disable default indicator.
- Auto cycle bugs fixed.
- Swiping debounce implemented.
First put the slider view in your layout xml :
<com.smarteist.autoimageslider.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: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"> <com.smarteist.autoimageslider.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: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 SliderAdapterExample extends SliderViewAdapter<SliderAdapterExample.SliderAdapterVH> { private Context context; private List<SliderItem> mSliderItems = new ArrayList<>(); public SliderAdapterExample(Context context) { this.context = context; } public void renewItems(List<SliderItem> sliderItems) { this.mSliderItems = sliderItems; notifyDataSetChanged(); } public void deleteItem(int position) { this.mSliderItems.remove(position); notifyDataSetChanged(); } public void addItem(SliderItem sliderItem) { this.mSliderItems.add(sliderItem); notifyDataSetChanged(); } @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, final int position) { SliderItem sliderItem = mSliderItems.get(position); viewHolder.textViewDescription.setText(sliderItem.getDescription()); viewHolder.textViewDescription.setTextSize(16); viewHolder.textViewDescription.setTextColor(Color.WHITE); Glide.with(viewHolder.itemView) .load(sliderItem.getImageUrl()) .fitCenter() .into(viewHolder.imageViewBackground); viewHolder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(context, "This is item in position " + position, Toast.LENGTH_SHORT).show(); } }); } @Override public int getCount() { //slider view count could be dynamic size return mSliderItems.size(); } class SliderAdapterVH extends SliderViewAdapter.ViewHolder { View itemView; ImageView imageViewBackground; ImageView imageGifContainer; TextView textViewDescription; public SliderAdapterVH(View itemView) { super(itemView); imageViewBackground = itemView.findViewById(R.id.iv_auto_image_slider); imageGifContainer = itemView.findViewById(R.id.iv_gif_container); textViewDescription = itemView.findViewById(R.id.tv_auto_image_slider); this.itemView = itemView; } } }###Kotlin
class ImageSliderAdapter(context: Context) : SliderViewAdapter<ImageSliderAdapter.SliderAdapterVH>() { private val context: Context private var mSliderItems: MutableList<SliderItem> = ArrayList() fun renewItems(sliderItems: MutableList<SliderItem>) { mSliderItems = sliderItems notifyDataSetChanged() } fun deleteItem(position: Int) { mSliderItems.removeAt(position) notifyDataSetChanged() } fun addItem(sliderItem: SliderItem) { mSliderItems.add(sliderItem) notifyDataSetChanged() } override fun onCreateViewHolder(parent: ViewGroup): SliderAdapterVH { val inflate: View = LayoutInflater.from(parent.context).inflate(R.layout.image_slider_layout_item, null) return SliderAdapterVH(inflate) } override fun onBindViewHolder(viewHolder: SliderAdapterVH, position: Int) { val sliderItem: SliderItem = mSliderItems[position] viewHolder.textViewDescription.setText("Demo Description") viewHolder.textViewDescription.textSize = 16f viewHolder.textViewDescription.setTextColor(Color.WHITE) // Glide.with(viewHolder.itemView) // .load(sliderItem.image) // .fitCenter() // .into(viewHolder.imageViewBackground) viewHolder.imageViewBackground.load(sliderItem.image_url) viewHolder.itemView.setOnClickListener { Toast.makeText(context, "This is item in position $position", Toast.LENGTH_SHORT) .show() } } override fun getCount(): Int { //slider view count could be dynamic size return mSliderItems.size } inner class SliderAdapterVH(itemView: View) : ViewHolder(itemView) { var _itemView: View var imageViewBackground: ImageView var imageGifContainer: ImageView var textViewDescription: TextView init { imageViewBackground = itemView.findViewById(R.id.iv_auto_image_slider) imageGifContainer = itemView.findViewById(R.id.iv_gif_container) textViewDescription = itemView.findViewById(R.id.tv_auto_image_slider) _itemView = itemView } } init { this.context = context } }you can make your own layout for slider view
here is an example for adapter implementation :
<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_auto_image_slider" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" /> <ImageView android:id="@+id/iv_gif_container" android:layout_width="80dp" android:layout_height="80dp" android:layout_gravity="bottom|start" android:layout_margin="50dp" /> <FrameLayout android:id="@+id/fl_shadow_container" android:background="@drawable/bg_overlay" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom"> <TextView android:id="@+id/tv_auto_image_slider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:layout_marginBottom="25dp" android:padding="6dp" android:textColor="#FFF" android:textSize="18sp" /> </FrameLayout> </FrameLayout>After the instantiating of the sliderView (inside the activity or fragment with findViewById|BindView...), set the adapter to the slider.
SliderView sliderView = findViewById(R.id.imageSlider); sliderView.setSliderAdapter(new SliderAdapterExample(context));You can call this method if you want to start flipping automatically and you can also set up the slider animation :
sliderView.setIndicatorAnimation(IndicatorAnimationType.WORM); sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION); sliderView.startAutoCycle();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); SliderAdapterExample adapter = new SliderAdapterExample(this); sliderView.setSliderAdapter(adapter); sliderView.setIndicatorAnimation(IndicatorAnimationType.WORM); //set indicator animation by using IndicatorAnimationType. :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. Special Thanks [Roman Danylyk] (https://github.com/romandanylyk) for nice indicator!
Copyright [2019] [Ali Hosseini]
Licensed under the Apache License, Version 2.0; 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.