I'm using TabLayout and viewPager with an option to swipe the viewPager to the left or right in order to navigate between pages.
My problem is, that my application is RTL based (right-to-left) and the swipe direction is reversed.
I'm trying to change the swipe direction from the default to the reversed version.
I've been searching alot on the web and couldn't find a way how to do it.
I'm using android.support.v4.view.ViewPager;
and this is how I initialize my TabLayout with the viewPager:
// View Page Adapter
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
//View Page Adapter Configuration
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
viewPager.setOffscreenPageLimit(3);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
Summary: Currently, When I'm swiping the viewPager to the left, it shows the next page.
in RTL, when you swipe the viewPager to the right, it shows the next page.
It might be hard to understand, but here it is.
Swiping right shows the next page
while I need swiping right to show the previous page.
It is the very simple techniqe to change the swipe direction of the Viewpager.
There are two simple step which have to follow you,
1. Change the rotation of the View pager,
viewpager.setRotationY(180);
2. Then again change the direction of the each item view in adapter,
itemView.setRotationY(180);
This is 100% worked for me.
I faced the same problem month ago but I think I found a great solution.
Change your TabLayout direction to ltr in xml:
<android.support.design.widget.TabLayout
android:id="#+id/tl_activity_main"
android:layout_below="#id/toolbar_activity_main"
android:layoutDirection="ltr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/DisionTabLayout" />
Create custom adapter for ViewPager and override methods getItem(int position) and getPageTitle(int position):
#Override
public Fragment getItem(int position) {
if (mIsRtlOrientation && mTabs != null && mTabs.length > 0) {
return mTabs[mTabs.length - position - 1].getFragment();
} else {
return mTabs[position].getFragment();
}
}
#Override
public int getCount() {
return mTabs.length;
}
#Override
public CharSequence getPageTitle(int position) {
if (mIsRtlOrientation && mTabs != null && mTabs.length > 0) {
return mTabs[mTabs.length - position - 1].getTitle();
} else {
return mTabs[position].getTitle();
}
}
Set the adapter to ViewPager and then apply this ViewPager to TabLayout.
private void setAdapters() {
// initialize adapter
mTabsAdapter = new TabsAdapter(getSupportFragmentManager(), mTabs, true);
// set adapter to ViewPager
vp.setAdapter(mTabsAdapter);
// set ViewPager to TabLayout
tl.setupWithViewPager(vp);
// if RTL orientation, go to last item
vp.setCurrentItem(vp.getAdapter().getCount() - 1, false);
}
i know it's late but this is a smart question. as #CommonsWare said it's the matter of reversing the order of items in getItem() method in page adapter. but this isn't enought. as you reverse the order in getitem() method you should also NOT reverse the order in getPageTitle() method. something like this:
public static class AppSectionsPagerAdapter extends FragmentStatePagerAdapter {
public AppSectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new page1();
case 1:
return new page2();
case 2:
return new page3();
}
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "page 3 title";
case 1:
return "page 2 title";
case 2:
return "page 1 title";
}
}
#Override
public int getCount() {
return 3;
}
}
now comes the tricky part. you should use this simple method which converts zero based index order reversed using max index and current index.
public int calculateReverse(int maxIndex,int currentIndex){
return maxIndex-currentIndex;
}
than you should use this method in onTabSelected() like this: be aware you should use your own max index:
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
mViewPager.setCurrentItem(calculateReverse(2,tab.getPosition()));
}
the second part is to change page listener on page adapter. once again you should use your own max index number:
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(calculateReverse(2,position)); // reversing the tab selection
}
});
i tried to be as descriptive as i can. hope this helps :)
If you are using viewpager2 with fragments. you can use.
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/pager"
android:layout_width="0dp"
android:layout_height="0dp"
**android:orientation="vertical"**
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
I hope this helps somebody.
Yout can use ViewPager2, It support right to left direction. to make it possible:
Add android:supportsRtl="true" in app Manifest
Make viewpager2's parent viewgroup layout direction ltr (android:layoutDirection="ltr")
Now set viewpager2's layoutDirection ltr (android:layoutDirection="rtl")
also set adapter's layout to layoutDirection ltr (android:layoutDirection="ltr")
So I found that the easiest way for this to work for ViewPager (1)
is just to invert the array of items, and then before displaying set the current item of the pager at [array size] position.
Related
I have a working code for having 3 tabs, with 3 fragments that you can either horizontally swipe between to change, or you can click on the tab to go to the requested fragment.
However, I wanted to do some tweaks to my design, and I went over to the Android Developer's website: Creating swipe views with tabs
, and it looks completely different than mine. Now I wonder if I should use the code in the developer's website, or keep my own.
Right now I am using ViewPager + TabLayout.
So simple, yet working.
This also makes me wonder, how come this simple code works, but in the official documentation there's a long story. It just makes me think that if I keep my code in the current design, I might encounter some big problems in the future.
Or - if it works - then it works?
MainActivity.java:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Find the view pager that will allow the user to swipe between fragments
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
// Create an adapter that knows which fragment should be shown on each page
TabsAdapter adapter = new TabsAdapter(this, getSupportFragmentManager());
// Set the adapter onto the view pager
viewPager.setAdapter(adapter);
// Find the tab layout that shows the tabs
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
// Connect the tab layout with the view pager. This will
// 1. Update the tab layout when the view pager is swiped
// 2. Update the view pager when a tab is selected
// 3. Set the tab layout's tab names with the view pager's adapter's titles
// by calling onPageTitle()
tabLayout.setupWithViewPager(viewPager);
}
}
TabsAdapter.java:
public class TabsAdapter extends FragmentPagerAdapter {
/** Context of the app */
private Context mContext;
public TabsAdapter(Context context, FragmentManager fm) {
super(fm);
mContext = context;
}
/**
* Return the {#link Fragment} that should be displayed for the given page number.
*/
#Override
public Fragment getItem(int position) {
if (position == 0) {
return new NbFragment();
} else if (position == 1) {
return new LksFragment();
} else {
return new ChtFragment();
}
}
/**
* Return the total number of pages.
*/
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
if (position == 0) {
return mContext.getString(R.string.category_nb);
} else if (position == 1) {
return mContext.getString(R.string.category_lks);
} else {
return mContext.getString(R.string.category_cht);
}
}
activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary_color"
android:orientation="vertical"
tools:context="com.example.barebones.barebones.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
And you can see it is completely different than the one on their website. How could it be? I would love to get some clarification, because as a beginner, I feel lost in this sea of information. Which method should I use in order to have swiping tabs that represent different fragments?
I'm lost what you're trying to solve here. Are you perhaps trying to make it so that when you swipe horizontally, respectively changing fragments, your tab layout is updated as well? If so. I have a snippet down below, which you may have to adjust based on your variable names.
protected void initializeNavigationTransition() {
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int i, float v, int i1) {
}
#Override
public void onPageSelected(int i) {
tabs_bottom_nav.getTabAt(i).select();
}
#Override
public void onPageScrollStateChanged(int i) {
}
});
tabs_bottom_nav.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
updateTabIconOnSelect(current_tab, tab.getPosition());
current_tab = tab.getPosition();
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
I'll have an additional note that it is possible for fragments to refresh, meaning it will be reinitialized, which might be something you do not want, especially if you're displaying data unto these fragments, which you are fetching from your API or over the network, after swiping a couple of times to different fragments if you have probably at least 4 fragments within the view pager. Hence you would need to prevent the view pager from refreshing the fragments by using the code below
viewPager.setOffscreenPageLimit(4); // 4 is the number of fragments within your view pager
viewPager.setAdapter(sectionsPagerAdapter);
I believe the cause of fragments refreshing is caused by the viewpager trying to save memory
I am using ViewPager/TabLayout on Android TV, and I have 2 questions.
1) Currently, if I press DPAD_UP, the focus goes to the tabs, but the page does not actually change to the one corresponding to the focused tab until DPAD_CENTER is pressed. So, there is a difference between focused (shown as a grey box around the tab text) and selected (shown as an underline). I am wondering if it is possible to have whatever focused to be selected?
2) I have 3 tabs in my ViewPager where the fragment in tab1 needs to have focus in order to display things properly. When I switch from tab3 to tab1, the focus is not given to the fragment but stays with the tab. This causes my fragment to not display properly. I am wondering if there is a way to take focus away from the tab? I dug into the source code of ViewPager and TabLayout, and I know the focus is with TabView of TabLayout, but no matter what I try, I cannot take away the focus state of TabView (i.e. the grey box surrounding the tab text does not go away until I use DPAD_DOWN to "go down" to the fragment).
Tried
((ViewGroup) tabLayout.getChildAt(0)).getChildAt(desiredPosition).clearFocus() and it doesn't help.
I don't want to use viewPager.setOffscreenPageLimit(2);
// This is my viewpager activity class
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
adapterViewPager = new MyPagerAdapter(getFragmentManager());
viewPager.setAdapter(adapterViewPager);
// Give the TabLayout the ViewPager
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
// Tried to clear focus of tab here, didn't help
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
public static class MyPagerAdapter extends FragmentPagerAdapter {
private static int NUM_ITEMS = 3;
public MyPagerAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
// Returns total number of pages.
#Override
public int getCount() {
return NUM_ITEMS;
}
// Returns the fragment to display for a particular page.
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new OneFragment; // This is the fragment that needs focus
case 1:
return new TwoFragment();
case 2:
return new ThreeFragment();
default:
return null;
}
}
// Returns the page title for the top indicator
#Override
public CharSequence getPageTitle(int position) {
if (position == 0) {
return "Fragment 1";
} else if (position == 1) {
return "Fragment 2";
} else {
return "Fragment 3";
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
android:theme="#style/AppThemeTab" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
Any help is appreciated, thank you!
One liner solution :) . To suppress focus on Tablayout children views use the code fragment below assuming the tab is scrollable - i.e. tabs selection is scrolling by digipad:
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
I'm not quite sure if there's a "best way" to tackle the following design issue.
I have a Tablayout with 2 Tabs in my MainActivity. Each Tab is a different Fragment. I go to Tab1 and see Fragment1. I need to launch a new Fragment (1A) from Fragment 1 and am not sure the best way to do it? I was thinking about one of these.
A) Take the Tabs out of my MainActivity and place them in a separate MainFragment, which gets launched with the app. That way when the user launches Fragment 1A, it replaces just the 1 MainFragment with the Tabs.
or
B) Keep the Tabs in the MainActivity and find a way to replace Fragment 1 with Fragment 1A when under Tab1.
Any suggestions would be appreciated. Thank you.
I think you shouldn't do both of points... Frag1 visible under Tab1 should contain all the layout (including initialy hidden) and logic for this view. If you need to show smth new it may be smaller (then popup, dialog etc.) or expand some layout, maybe with some animation (you may still use ViewPager inside Fragment inside ViewPager, disable touch events and manipulate scrolling programmatically...).
When Action picked by user is intended to show smth so-much-improtant that previous screen is not needed at all then you should probably open new Activity
PS. If you insist to replace current "screen" (in fact Activitys content) note that title of Tab1 may not representing what contains Frag1A. It very depends what kind of content you have there. You may consider move TabLayout/RecyclerView to e.g. FrameLayout container and add to it you Frag1A covering whole previous view including Tabs. In current design guidelines you can even find suggested solution for way of showing new fragment - with circular reveal animation
I do not understand very well what you want, but possibly this.
Use FragmentPagerAdapter..
public class TabsPagerAdapter extends FragmentPagerAdapter {
private static final int NUM_TABS = 3;
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch(position){
case 0:
return Tab1Fragment.newInstance();
case 1:
return Tab2Fragment.newInstance();
default:
return Tab3Fragment.newInstance();
}
}
#Override
public int getCount() {
return NUM_TABS;
}
#Override
public CharSequence getPageTitle(int position) {
if (position == 0){
return "Tab 1";
}
if (position == 1){
return "Tab 2";
}
return "Tab 3";
}
In your activity...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Tabs
TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
ViewPager pager = (ViewPager) findViewById(R.id.pager);
TabsPagerAdapter adapter = new TabsPagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
tabs.setupWithViewPager(pager);
}
I'm getting a null pointer exception when trying to switch tabs programmatically of a tablayout inside a fragment,
So I have my main activity that has a tab layout (4 tabs) each tab has a view pager holding a fragment, and each of these fragments has a tab layout (x amount of tabs) with a view pager holding a fragment,
i can switch the tabs of my main activity tab layout from any fragment like this
TabLayout tabLayout = MainActivity.tabLayout;
TabLayout.Tab tab = tabLayout.getTabAt(2);
tab.select();
but if i try to change the tabs of one of the fragments in the same way i get a null pointer
TabLayout tabLayout2 = tabFragOne.tabLayout;
TabLayout.Tab tab2 = tabLayout2.getTabAt(2);
tab2.select();
it only happens if I click the button in question when the app first opens, which suggests that the reason for it is that the fragment hasn't been attached or created yet,
for instance if i scroll across to the fragments tab i want to switch to, and then go back to the main activity and press the button in question it will work.
does anyone know the best way to fix this?
Ok ive found half the crux to this question is actually that im using a view pager adapter, a question here sheds a lot of light on my issue
The correct way to set selected Tab, we should set selected index from Pager instead.
final ViewPager pager = (ViewPager) findViewById(R.id.pager);
final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(pager);
pager.setCurrentItem(0);//selected position
Here is my layout design in xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#ffffff"
android:background="#color/al_white"
android:elevation="0dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabTextColor="#494a43"
app:tabSelectedTextColor="#494a43"
app:tabIndicatorColor="#494a43"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
TabLayout tabhost = (TabLayout) getActivity().findViewById(R.id.tabLayout);
tabhost.getTabAt(2).select();
I use this inside my fragment's create function... and it works perfectly
R.id.tabLayout is the tablayout id in your main activity layout.
you can use the setCurrentItem(Postion) in viewpager
example :
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
// tabLayout.setupWithViewPager(mViewPager);
mViewPager.setCurrentItem(4);
Simple example to automatically scroll from the last page to the first. Note: I added a dummy fragment at the first and last position.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
if (position == 0) {
viewPager.setCurrentItem(viewPagerAdapter.getCount() - 2);
} else if (position == viewPagerAdapter.getCount() - 1) {
viewPager.setCurrentItem(1);
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
Using view pager, Its working simple and fine
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
CharSequence Titles[]; // This will Store the Titles of the Tabs which are Going to be passed when ViewPagerAdapter is created
int NumbOfTabs;
String mode;
AllDeals deals;
MyDeals myDeals; those are my fragments
public ViewPagerAdapter(FragmentManager fm, int mNumbOfTabsumb, String moe) {
super(fm);
this.NumbOfTabs = mNumbOfTabsumb;
mode=moe;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
if(mode.equals("Deals")){
deals=new AllDeals();
return deals;
}
break;
case 1:
if(mode.equals("Deals")){
myDeals=new MyDeals();
return myDeals;
}
break;
default:
break;
}
return null;
}
#Override
public int getCount() {
return NumbOfTabs;
}
}
add this lines into ur activity
containerViewone.setVisibility(View.VISIBLE);
tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.title_all_deals)));
tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.title_my_deals)));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabTextColors(getResources().getColor(R.color.tabunselect), getResources().getColor(R.color.black));
viewpagerad = new ViewPagerAdapter(getSupportFragmentManager(), Numboftabs, "Deals");
pager.setAdapter(viewpagerad);
pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
Try this:
TabLayout tablayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //your activity layout
tabLayout =(TabLayout)findViewById(R.id.tablayout); //your tab layout id
tabLayout.getTabAt(0).select(); //your tab index;
}
In Kotlin:
With TabLayout and ViewPager2 that works for me:
binding.tablayout.getTabAt(1)!!.select()
I've integrated PagerSlidingTabStrips in my application which runs as expected on Swipe of tabs.
But selecting tabs on PagerSlidingTabStrips doesn't switch to that fragment which works perfectly on swiping between tabs.
FragmentManager fm = getSupportFragmentManager();
mPager = (ViewPager) findViewById(R.id.pager);
ViewPagerAdapter viewpageradapter = new ViewPagerAdapter(fm);
mPager.setAdapter(viewpageradapter);
pagerSlidingTabStrp = (PagerSlidingTabStrip) findViewById(R.id.pager_sliding_tab_strip);
pagerSlidingTabStrp.setShouldExpand(true);
pagerSlidingTabStrp.setViewPager(mPager);
pagerSlidingTabStrp.setOnPageChangeListener(ViewPagerListener);
// Capture ViewPager page swipes
ViewPager.SimpleOnPageChangeListener ViewPagerListener = new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
super.onPageSelected(position);
switch(position)
{
case 0:
setMotherActionBarTitle(getString(R.string.str_all_contacts_fragment));
break;
case 1:
setMotherActionBarTitle(getString(R.string.str_group_contacts_fragment));
break;
case 2:
setMotherActionBarTitle(getString(R.string.str_call_logs_fragment));
break;
}
}
};
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter implements IconTabProvider {
final int PAGE_COUNT = 3;
private final int[] ICONS = { R.drawable.tab_icon_zname_contact_selector, R.drawable.tab_icon_zname_friends_selector,
R.drawable.tab_icon_zname_call_log_selector };
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int item) {
switch (item) {
case 0:
ContactsFragment homeFragment = new ContactsFragment();
return homeFragment;
case 1:
GroupsFragment groupsFragment = new GroupsFragment();
return groupsFragment;
case 2:
CallLogsFragment callLogsFragment = new CallLogsFragment();
return callLogsFragment;
}
return null;
}
#Override
public int getCount() {
return PAGE_COUNT;
}
#Override
public int getPageIconResId(int position) {
return ICONS[position];
}
}
How to make selecting tabs works with PagerSlidingTabStrips? Morever PagerSlidingTabStrips tabs are not even clickabe.
Did I missed out to implement something? Or to add pagerSlidingTabStrips.setClickable(true)? or something?
Again the selector of PagerSlidingTabStrips tabs not selected proper drawable with selector. What could be possible the reason for that?
Here's a picture of it.
I've found out why clicking tab was not working with PagerSlidingTabStrips after I've looked out for other options with sliding tabs functionality like SlidingTabsLayout which also was not able to click tabs.
Found out problem was with my xml layout which covers whole as ViewPager which doesn't make tabs clickable of eitherPagerSlidingTabStrips or SlidingTabsLayout works.
<com.netdoers.zname.utils.PagerSlidingTabStrip
android:id="#+id/pager_sliding_tab_strip"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:background="#android:color/white"
app:pstsDividerColor="#FFFFA500"
app:pstsIndicatorColor="#FFFFA500"
app:pstsTabPaddingLeftRight="14dip"
app:pstsUnderlineColor="#FFFFA500" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
Leaving same height in Viewpager as of PagerSlidingTabStips from top where PagerSlidingTabStrips rendered solved my issue.
Indeed the issue is in XML. The issue probably due to RelativeLayout is used om the XML. Consider using LinearLayout will ensure there's no overlap between views.