> For the complete documentation index, see [llms.txt](https://jobinjj.gitbook.io/tutorials/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jobinjj.gitbook.io/tutorials/android-viewpager-slider.md).

# Android viewpager slider

## Design library

First make sure you have added the design library

```
implementation 'com.android.support:design:28.0.0'
```

You can add this library by simply copy pasting above line and paste in the application level build.gradle file located under app > build.gradle and click on the sync button on the top right corner.

Now create three drawable files **default\_indicator.xml, indicator\_selector.xml** and **selected\_indicator.xml** under the res > drawable folder.

{% code title="default\_indicator.xml" %}

```markup
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
</layer-list>
```

{% endcode %}

{% code title="indicator\_selector.xml" %}

```markup
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemxmlas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_indicator"
        android:state_selected="true"/>

    <item android:drawable="@drawable/default_indicator"/>
</selector>
```

{% endcode %}

{% code title="selected\_indicator.xml" %}

```markup
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>
```

{% endcode %}

We also need to create **item\_slider.xml** which will be our layout for viewpager content. Which is simply a **TextView** inside a **LinearLayout**.

{% code title="item\_slider.xml" %}

```markup
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"xm
    android:layout_height="match_parent"
    android:gravity="center"
    android:id="@+id/linearLayout"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

</LinearLayout>
```

{% endcode %}

And now we have created all the necessary layout files lets move to our main activity file which is **MainActivity**. In its layout file **activity\_main.xml**, add code snippet for **viewpager** note that we are also adding **tablayout** for indicators at the bottom.

{% code title="activity\_main.xml" %}

```markup
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent"
    android:background="#10101C"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.TabLayout
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabBackground="@drawable/indicator_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />
</RelativeLayout>
```

{% endcode %}

Now moving to java part, initialize our viewpager and tablayout

```java
package your_package_name;
....
import android.graphics.Color;
....

public class MainActivity extends AppCompatActivity {
 ViewPager viewPager;
    TabLayout indicator;
    List<Integer> color;
    List<String> colorName;
     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager=(ViewPager)findViewById(R.id.viewPager);
        indicator=(TabLayout)findViewById(R.id.indicator);
        }
}

```

Next we need to create an adapter class named SliderAdapter (ofcourse you can name as you like).

{% code title="SliderAdapter.java" %}

```java
package com.techpakka.tutorials;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

public class SliderAdapter extends PagerAdapter {
    private Context context;
    private List<Integer> color;
    private List<String> colorName;

    public SliderAdapter(Context context, List<Integer> color, List<String> colorName) {
        this.context = context;
        this.color = color;
        this.colorName = colorName;
    }

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

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view == o;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.item_slider,null);

        TextView textView = (TextView) view.findViewById(R.id.textView);
        LinearLayout linearLayout = (LinearLayout) view.findViewById(R.id.linearLayout);
        textView.setText(colorName.get(position));
        linearLayout.setBackgroundColor(color.get(position));
        ViewPager viewPager = (ViewPager) container;
        viewPager.addView(view, 0);

        return view;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        ViewPager viewPager = (ViewPager) container;
        View view = (View) object;
        viewPager.removeView(view);
    }
}
```

{% endcode %}

Lets finish this by adding some more code in **MainActivity.java** to get our working auto flipping viewpager slider&#x20;

{% code title="MainActivity.java" %}

```java
package your_package_name;
....
import android.graphics.Color;
....

public class MainActivity extends AppCompatActivity {
 ViewPager viewPager;
    TabLayout indicator;
    List<Integer> color;
    List<String> colorName;
     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager=(ViewPager)findViewById(R.id.viewPager);
        indicator=(TabLayout)findViewById(R.id.indicator);
        
        color = new ArrayList<>();
        color.add(Color.RED);
        color.add(Color.GREEN);
        color.add(Color.BLUE);

        colorName = new ArrayList<>();
        colorName.add("RED");
        colorName.add("GREEN");
        colorName.add("BLUE");

        viewPager.setAdapter(new SliderAdapter(this, color, colorName));
        indicator.setupWithViewPager(viewPager, true);

        Timer timer = new Timer();
        timer.scheduleAtFixedRate(new SliderTimer(), 4000, 6000);
        }
        private class SliderTimer extends TimerTask{

        @Override
        public void run() {
            MainActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    if (viewPager.getCurrentItem() < color.size() - 1) {
                        viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                    } else {
                        viewPager.setCurrentItem(0);
                    }
                }
            });
        }
    }
        }
}
```

{% endcode %}

## Explanation

* First we create two arraylist **color** and **colorNames** as its name suggests color is used to set the background color for each pages in viewpager as well as colorNames are used to set value for textview.
* **viewPager.setAdapter** is used to set the PagerAdapter, **SliderAdapter.java** that will supply views for this pager as needed.
* **indicator.setupWithViewPager** is used to link the tablayout and viewpager together.
* And finally we use **timer.scheduleAtFixedRate** to automatically flip the pages after a fixed duration by using the **SliderTimer** method created inside **MainActivity.java**.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jobinjj.gitbook.io/tutorials/android-viewpager-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.