How to make a dot for highlighted title in PagerTitleStrip in android

Question

I am using PagerTitleStrip for swiping Fragment, I need to make a dot for selected item or Highlighted title. My XML Code :

<android.support.v4.view.PagerTitleStrip
            android:id="@+id/pager_title_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#fff"
            android:paddingBottom="6dp"
            android:paddingTop="6dp"
            android:textColor="@color/blueColorSwipeText" />

I also need to change the highlighted title color. Please help me out. Thanks Suggestions appreciated.

What have you tried, and what specific problems have you encountered? Were you successful in creating a fork of `PagerTitleStrip`, for example? — CommonsWare, Nov 05 '14 at 11:49
http://stackoverflow.com/questions/10008309/android-implement-a-page-counter-like-the-one-on-the-home-screen Try this — Danial Hussain, Nov 05 '14 at 11:50
You want to replace the indicator bar with a dot, is that right ? — vovahost, Nov 05 '14 at 12:16

vovahost · Answer 1 · 2014-11-05T12:46:37.210

Use the textColor attribute; Create a new style in res/values/styles.xml:

<style name="Pager">
    <item name="android:textColor">#4DB849</item>
    <item name="android:indicatorColor">#E95044</item>
</style>

You will get a green title and a red indicator.

You may want to see ViewPagerIndicator

To change the indicator you have to change onDraw(Canvas canvas) method.
Here is the source code PagerTabStrip.java.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    final int height = getHeight();
    final int bottom = height;
    final int left = mCurrText.getLeft() - mTabPadding;
    final int right = mCurrText.getRight() + mTabPadding;
    final int top = bottom - mIndicatorHeight;

    mTabPaint.setColor(mTabAlpha << 24 | (mIndicatorColor & 0xFFFFFF));
    canvas.drawRect(left, top, right, bottom, mTabPaint);

    if (mDrawFullUnderline) {
        mTabPaint.setColor(0xFF << 24 | (mIndicatorColor & 0xFFFFFF));
        canvas.drawRect(getPaddingLeft(), height - mFullUnderlineHeight,
                getWidth() - getPaddingRight(), height, mTabPaint);
    }
}

You have to change this line:

canvas.drawRect(left, top, right, bottom, mTabPaint);

Test if you get a dot when replacing with:

canvas.drawCircle(left, top, 15, mTabPaint);

For drawing custom views check out the Android documentation.

Custom Drawing

I want a dot instead of indicator. – Shoeb Ahmed Siddique Nov 05 '14 at 12:21 — Shoeb Ahmed Siddique, Nov 05 '14 at 12:21

How to make a dot for highlighted title in PagerTitleStrip in android

1 Answers1