Custom Tab Indicator(With Arrow down like Indicator)

Question

Is there a wat to make a indicator like this?
it has some pointed arrow down like in the selected item?

Answer 1

The only solution I could find is to grab the source code of the original TabLayout and customize it, according your needs.

In fact, all you need to do to get this custom pointing arrow is to override SlidingTabStrip 's void draw(Canvas canvas) method. Unfortunately, SlidingTabStrip is private inner class inside TabLayout .

Luckily, all support library code is open, so we can create our own TabLayoutWithArrow class. I replaced the standard void draw(Canvas canvas) by this one to draw the arrow:

        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);
            // i used <dimen name="pointing_arrow_size">3dp</dimen>
            int arrowSize = getResources().getDimensionPixelSize(R.dimen.pointing_arrow_size);

            if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
                canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight - arrowSize,
                        mIndicatorRight, getHeight() - arrowSize, mSelectedIndicatorPaint);
                canvas.drawPath(getTrianglePath(arrowSize), mSelectedIndicatorPaint);
            }
        }

        private Path getTrianglePath(int arrowSize) {
            mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            mSelectedIndicatorPaint.setAntiAlias(true);

            int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize*2;
            int rightPointX = leftPointX + arrowSize*2;
            int bottomPointX = leftPointX + arrowSize;
            int leftPointY = getHeight() - arrowSize;
            int bottomPointY = getHeight();

            Point left = new Point(leftPointX, leftPointY);
            Point right = new Point(rightPointX, leftPointY);
            Point bottom = new Point(bottomPointX, bottomPointY);

            Path path = new Path();
            path.setFillType(Path.FillType.EVEN_ODD);
            path.setLastPoint(left.x, left.y);
            path.lineTo(right.x, right.y);
            path.lineTo(bottom.x, bottom.y);
            path.lineTo(left.x, left.y);
            path.close();

            return path;
        }

Of course, the background, the particular design of the indicator can be improved/adjust according your needs.

To make my custom TabLayoutWithArrow , I had to copy these files into my project:

• AnimationUtils
• TabLayout
• ThemeUtils
• ValueAnimatorCompat
• ValueAnimatorCompatImplEclairMr1
• ValueAnimatorCompatImplHoneycombMr1
• ViewUtils
• ViewUtilsLollipop

To have transparency behind the arrow, you just need to set this Shape - drawable , as a background for the TabLayoutWithArrow :

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

    <item android:bottom="@dimen/pointing_arrow_size">
        <shape android:shape="rectangle" >
            <solid android:color="#FFFF00" />
        </shape>
    </item>
    <item android:height="@dimen/pointing_arrow_size"
        android:gravity="bottom">
        <shape android:shape="rectangle" >
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

And the actual usage is:

<klogi.com.viewpagerwithdifferentmenu.CustomTabLayout.TabLayoutWithArrow
    android:id="@+id/tabLayout"
    android:background="@drawable/tab_layout_background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

I've uploaded the whole project (the TabLayoutWithArrow + one-page app which is using it) to my dropbox - feel free to check it out .

I hope, it helps

Answer 2

现在它不起作用，从支持库23.2.0中删除了tintmanager类，我通过在运行时更改后台可绘制背景来管理相同的功能，以循环检测单击的位置，PS：检查此问题并回答我正在使用同一库： https： //github.com/astuetz/PagerSlidingTabStrip/issues/141

Answer 3

Here is the code for anyone requiring an upward triangle using @Konstantin Loginov code

private Path getTrianglePath(int arrowSize) {

        mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mSelectedIndicatorPaint.setAntiAlias(true);
        mSelectedIndicatorPaint.setColor(Color.WHITE);

        int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize * 1 / 2;
        int mTopX = leftPointX + arrowSize;
        int mTopY = getHeight() - arrowSize;
        int rightPointX = leftPointX + arrowSize * 2;

        int leftPointY = getHeight();

        Point left = new Point(leftPointX, leftPointY);
        Point right = new Point(rightPointX, leftPointY);
        Point bottom = new Point(mTopX, mTopY);

        Path path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.setLastPoint(left.x, left.y);
        path.lineTo(right.x, right.y);
        path.lineTo(bottom.x, bottom.y);
        path.lineTo(left.x, left.y);
        path.close();

        return path;
    }