Distribute titles evenly with PagerTitleStrip

Question

This is the XML for my PagerTitleStrip:

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:scaleType="centerCrop">

        <android.support.v4.view.PagerTitleStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/viepagertitlestrip"
            android:layout_gravity="top" />

    </android.support.v4.view.ViewPager>

The following is my custom PagerAdapter class:

public class CustomPagerAdapter extends PagerAdapter {

    private int[] image_resources = {
            R.drawable.1,
            R.drawable.2,
            R.drawable.3,
    };
    private Context ctx;
    private LayoutInflater layoutInflater;
    public CustomPagerAdapter(Context ctx) {
        this.ctx = ctx;
    }

    @Override
    public int getCount() {
        return image_resources.length;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        String[] titlesArray = {
                "Title 1",
                "Title 2",
                "Title 3",
        };

        return titlesArray[position];
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        layoutInflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View item_view = layoutInflater.inflate(R.layout.pager_item, container, false);
        ImageView imageview = (ImageView) item_view.findViewById(R.id.image_view);
        imageview.setImageResource(image_resources[position]);
        container.addView(item_view);
        return item_view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((RelativeLayout) object);
    }
}

My custom style for modifying the XML elements of my PagerTitleStrip:

<style name="viepagertitlestrip">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">#d3d3d3</item>
    <item name="android:textColor">#666666</item>
    <item name="android:textSize">12sp</item>
</style>

Personally, I find the PagerTitleStrip to be very ugly by default. I hate how the title of the next page is squished up to the side of the screen. My image array will have about 20 images. I basically want each pager title to be a little dot, and I'd like them all to be evenly distributed on one single page. Is this possible?

Answer 1

To get a GitHub project into your build:

1. Add the JitPack repository to your build file.

Add it in your build.gradle at the end of repositories:

repositories {
    // ...
    maven { url "https://jitpack.io" }
 }

2. Add the dependency

    dependencies { compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1@aar' }