Jun 21, 2014

Android Triangle Pager Sliding Tabs

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 




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.

<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;
    }

Usage

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

<com.kpbird.triangletabs.PagerSlidingTabStrip
        android:id="@+id/activity_main_pagertabstrip"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        custom:pstsTextAllCaps="true"
        custom:pstsIndicatorColor="#FF3F9FE0"
        custom:pstsDividerColor="#FF3F9FE0"
        custom:pstsUnderlineColor="#FF3F9FE0"
        custom:pstsTriangleIndicator="true"
        custom:pstsShouldExpand="true"
        custom:pstsIndicatorHeight="15dp"
/>
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 fragments = getFragments();
pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
pager.setAdapter(pageAdapter);
pagertab.setViewPager(pager);
Step 4: Compile & Run application



3 comments:

  1. Ankit Thakkar6:00 PM

    Good Demonstration! Easy to use...this is very useful post..

    ReplyDelete
  2. himen patel11:11 PM

    very useful article. Thank you KP Bird.

    ReplyDelete
  3. Shivang Trivedi10:40 AM

    Nice article.

    ReplyDelete