How to Create Auto Image Slider In Android Studio?

Auto Image Slider in android studio is used to show the multiple images at one place in the form of slides by replacing the old screen or the previous data. Only one image shown at a time.

In this tutorial we will use github’s smarteist autoimageslider library. You can create it by using ViewPager in android. If you are ok with this library then continue further.

How to use github smarteist auto image slider library in android studio?

To use this github library first implement its library in your build.gradle ( Module ) file which is below –

implementation 'com.github.smarteist:autoimageslider:1.4.0'

Add Bumptech library for image

Bumptech library , used to set the image in imageView. So implement this library also.

implementation 'com.github.bumptech.glide:glide:4.11.0'

For SerializedName

  implementation 'com.google.code.gson:gson:2.9.0'

Add Internet Permission In Android Studio

I am loading images from the URL, so you have to add internet permission also. If you are using images from a local database then no need to add this library.

<uses-permission android:name="android.permission.INTERNET" />

Enable DataBinding in Android Studio

Please note that I used dataBinding in this tutorial for accessing the id of any widget. DataBinding in android is the best way to increase the development process. So first enable the dataBinding in android studio. See how to enable dataBinding in android.

Smarteist Auto Image Slider in Android Studio Full Example

I created a list of those required classes and layout with widgets as below and .

fragment_home.xml
HomeFragment.java
item_image_slider.xml
HomeImageSliderAdapter.java
HomeImageSliderModel.java

I provided the name of avobeclasses and layouts as my requirements because these are taken from live projects. You can change these names according to you.

Add smarteist autoimageslider SliderView widget in your xml file like as below.

Create Following Class For Auto Image Slider In Android

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/lightGrey"
            android:orientation="vertical"
            tools:context=".Fragment.HomeFragment">

            <com.smarteist.autoimageslider.SliderView
                android:id="@+id/autoImageSlider"
                android:layout_width="match_parent"
                android:layout_height="140dp"
                android:layout_marginStart="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:background="@color/white"
                app:sliderAnimationDuration="200"
                app:sliderAutoCycleDirection="back_and_forth"
                app:sliderIndicatorAnimationDuration="600"
                app:sliderIndicatorEnabled="true"
                app:sliderIndicatorOrientation="horizontal"
                app:sliderIndicatorPadding="5dp"
                app:sliderIndicatorRadius="3dp"
                app:sliderScrollTimeInSec="3" />

        </LinearLayout>

</layout>

HomeImageSliderModel.java class

This is the pojo model class which holds the images and other data. It has a getter and setter method with a constructor. I named it as my way you can change it.

package com.example.androidtestingproject.Model;

import com.google.gson.annotations.SerializedName;

import java.io.Serializable;

public class HomeImageSliderModel {
    @SerializedName("url_slider_image") private String url_slider_image;
    @SerializedName("slider_number") private String slider_number;


    public HomeImageSliderModel(String url_slider_image, String slider_number) {
        this.url_slider_image = url_slider_image;
        this.slider_number = slider_number;
    }

    public String getUrl_slider_image() {
        return url_slider_image;
    }

    public void setUrl_slider_image(String url_slider_image) {
        this.url_slider_image = url_slider_image;
    }

    public String getSlider_number() {
        return slider_number;
    }

    public void setSlider_number(String slider_number) {
        this.slider_number = slider_number;
    }
}

item_image_slider.xml layout

Following is the single view of the image, you can manage it as you want. Create it inside the res->layout folder.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/img_slider"
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:layout_centerInParent="true" />

        <FrameLayout
            android:id="@+id/shadow_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_gravity="bottom">

            <TextView
                android:id="@+id/text_imageSlider"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:text="Slder"
                android:textColor="@color/black"
                android:textStyle="bold"
                android:layout_gravity="center_horizontal"
                android:textSize="18dp" />

        </FrameLayout>

    </RelativeLayout>

</layout>

HomeImageSliderAdapter.java Adapter Class

package com.example.androidtestingproject.Adapters;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.databinding.DataBindingUtil;

import com.bumptech.glide.Glide;
import com.example.androidtestingproject.Model.HomeImageSliderModel;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.ItemImageSliderBinding;
import com.smarteist.autoimageslider.SliderViewAdapter;

import java.util.ArrayList;
import java.util.List;

public class HomeImageSliderAdapter extends SliderViewAdapter<HomeImageSliderAdapter.mySliderAdapter> {
    private Context context;
    private List<HomeImageSliderModel> imageList = new ArrayList<>();

    public HomeImageSliderAdapter(Context context,  List<HomeImageSliderModel> imageList) {
        this.context = context;
        this.imageList = imageList;
    }

    @Override
    public mySliderAdapter onCreateViewHolder(ViewGroup parent) {
        ItemImageSliderBinding binding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.item_image_slider, parent, false);
        return new mySliderAdapter(binding);
    }

    @Override
    public void onBindViewHolder(mySliderAdapter viewHolder, int position) {
        HomeImageSliderModel model = imageList.get(position);
        Glide.with(context).load(model.getUrl_slider_image()).into(viewHolder.binding.imgSlider);
        Log.e("sliderImageurl : " ,model.getUrl_slider_image());
        viewHolder.binding.textImageSlider.setText(model.getSlider_number());

//        Glide.with(viewHolder.itemView)
//                .load(model.getUrl_slider_image())
//                .fitCenter()
//                .into(viewHolder.binding.imgSlider);
    }

    @Override
    public int getCount() {
        return imageList.size();
    }

    public class mySliderAdapter extends SliderViewAdapter.ViewHolder {
        private ItemImageSliderBinding binding;

        public mySliderAdapter(ItemImageSliderBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
        }
    }
}

HomeFragment.java Class

Create the object of the Model class of list type. Also call the Adapter class constructor and pass context and model objects into it. Please note that I used images from internet URLs that can be deleted in future so you have to use your own URL of images.

package com.example.androidtestingproject.Fragment;

import android.os.Bundle;

import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.androidtestingproject.Adapters.HomeImageSliderAdapter;
import com.example.androidtestingproject.Model.HomeImageSliderModel;

import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.FragmentHomeBinding;
import com.smarteist.autoimageslider.IndicatorView.animation.type.IndicatorAnimationType;
import com.smarteist.autoimageslider.SliderView;

import java.util.ArrayList;
import java.util.List;

public class HomeFragment extends Fragment{
    private FragmentHomeBinding binding;
    private View view;
    private HomeImageSliderAdapter adapter;
    private List<HomeImageSliderModel> modelList = new ArrayList<>();

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false);
        view = binding.getRoot();
        initView();
        return view;
    }

    private void initView() {
        setSlider();

    }

    private void setSlider() {
        HomeImageSliderModel model = new HomeImageSliderModel(
                "https://5.imimg.com/data5/NJ/DW/YW/SELLER-8673553/namkeen-packaging-pouch-500x500.jpg", "1");
        modelList.add(model);

        HomeImageSliderModel mode2 = new HomeImageSliderModel(
                "https://5.imimg.com/data5/AV/FR/QL/SELLER-9988068/laminated-namkeen-packaging-packet-500x500.jpg", "2");
        modelList.add(mode2);

        HomeImageSliderModel mode3 = new HomeImageSliderModel(
                "https://thumbs.dreamstime.com/b/new-delhi-india-november-packets-chips-indian-brand-haldirams-packaged-food-182551372.jpg", "3");
        modelList.add(mode3);

        HomeImageSliderModel mode4 = new HomeImageSliderModel(
                "https://vinayakfoodsgroup.com/indian-ready-to-eat/wp-content/uploads/2019/07/delicious-healthy-breakfast2-4.jpg", "4");
        modelList.add(mode4);

        adapter = new HomeImageSliderAdapter(getActivity(), modelList);
        binding.autoImageSlider.startAutoCycle();
        binding.autoImageSlider.setAutoCycle(true);
        binding.autoImageSlider.setIndicatorAnimation(IndicatorAnimationType.WORM);
        binding.autoImageSlider.setAutoCycleDirection(SliderView.AUTO_CYCLE_DIRECTION_BACK_AND_FORTH);
        binding.autoImageSlider.setScrollTimeInSec(3);
        binding.autoImageSlider.setSliderAdapter(adapter);
//        adapter.renewItems(modelList);
    }

}

Conclusion of Auto Image Slider In Android Studio Tutorial

We created the Auto Image Slider using github’s smarteist library. If you want to visit this library in github, click here to go there.

smarteist image slider in android github

Please do comment for your any query and if this tutorial is helpful to you. Please also see more Android and Flutter tutorials which will help you to grow your development skills.