Over a million developers have joined DZone.

Android Triangle Pager Sliding Tabs

DZone's Guide to

Android Triangle Pager Sliding Tabs

· Java Zone ·
Free Resource

How do you break a Monolith into Microservices at Scale? This ebook shows strategies and techniques for building scalable and resilient microservices.

TriangleTabs is extension of PagerSlidingTabStrip

  Note: This is not a plug and play library that you can directly import in project and use. Triangle tabs is extension of PagerSlidingTabStrip library. In this article I will explain, how to modify PageSlidingTabStrip library to create Triangle Tabs.
Android Triangle Tabs Video 

Android Triangle Tabs Screenshot 
Customise  PageSlidingTabStrip
Step 1: Import PageSlidingTabStrip library in AndroidStudio.
Step 2: Let add new attribute for Triangle Tabs in attrs.xml (project -> res -> values). This attribute will allow developer to enable / disable triangle tabs.

1 <attr name="pstsTriangleIndicator" format="boolean"/>
Step 3: We need to modify Java code for Triangle Tabs.Goto source code and Open PagerSlidingTabStrip.java file
Step 4: Declare boolean variable above constructor, for pstsTriangleIndicator attribute.

private boolean triangleIndicator = false;
Step 5: Fatch pstsTriangleIndicator attribute, write following line in constructor

triangleIndicator = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsTriangleIndicator, triangleIndicator);
Step 6: Now it's time to draw triangle tab, goto onDraw method and add following code.
Original Code

canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
New Code, conditional code for triangle tabs
if (triangleIndicator) {
      Rect r = new Rect();
      int left = (int) lineLeft + (int) (((lineRight - lineLeft) / 2) - (indicatorHeight / 2)) - 20;
      int top = height - indicatorHeight;
      int right = (int) left + indicatorHeight + 30;
      int bottom = height;
      r.set(left, top, right, bottom);
      Path path = getEquilateralTriangle(r);
      canvas.drawPath(path, rectPaint);
else {
      canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
Step 7: This is last step, declare getEquilateralTriangle() function. This function has code for triangle.
public Path getEquilateralTriangle(Rect bounds) {
        Point startPoint = null, p2 = null, p3 = null;
        int width = bounds.right - bounds.left;
        int height = bounds.bottom - bounds.top;

        startPoint = new Point(bounds.left, bounds.bottom);

        p2 = new Point(startPoint.x + width, startPoint.y);
        p3 = new Point(startPoint.x + (width / 2), startPoint.y - height);

        Path path = new Path();
        path.moveTo(startPoint.x, startPoint.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);

        return path;
Step 1: Include the customized library as local library project or you can copy PagerSlidingTabStrip.java, attrs.xml and background_tab.xml in respective folders of your main project.
Step 2: Include the PagerSlidingTabStrip widget in your layout. This should usually be placed above the ViewPager it represents. Noticed pstsTriangleIndicator attribute
Step 3: In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager.
// Declar variable 
private ViewPager pager;
private PagerSlidingTabStrip pagertab;
private MyPageAdapter pageAdapter;

// Inside onCreate
pager = (ViewPager) findViewById(R.id.activity_main_pager);
pagertab = (PagerSlidingTabStrip) findViewById(R.id.activity_main_pagertabstrip);
List<fragment> fragments = getFragments();
pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
Step 4: Compile & Run application

How do you break a Monolith into Microservices at Scale? This ebook shows strategies and techniques for building scalable and resilient microservices.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}