Develop Reference

Take focus away from tabs in ViewPager/TabLayout

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

Change tab index of fragments with tabs programmatically

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()

How to delete a Tab and its associated fragment from TabLayout & FragmentStatePagerAdapter

I am trying to create a program with TabLayout and an option menu which when selected can add or delete the tab along with the fragment. I can delete the tab but I am not able to understand what else needs to be done because I have to delete the fragments that the tab holds, more over I may also have to rearrange the position of the fragments which I just can't seem to figure out. Could you please help me with this ?
under mainAcitivity this is how I add tabs
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tab1= tabLayout.newTab().setText("TAB 1");
tabLayout.addTab(tab1);
tab2 = tabLayout.newTab().setText("TAB 2");
tabLayout.addTab(tabKantipur);
This is the FragmentstatePagerAdapter
public class TabPagerAdapter extends FragmentStatePagerAdapter {
int tabCount;
public TabPagerAdapter(FragmentManager fm, int numberOfTabs) {
super(fm);
this.tabCount = numberOfTabs;
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return NewsFragment.newInstance("data for fragment 1");
case 1:
return NewsFragment.newInstance("data for fragment 2");
default:
return null;
}
}
#Override
public int getCount() {
return tabCount;
}
}
Basically here NewsFragment is the fragment whose new instance is used in the tabs. Under onActivityResult I am getting the data that has been requested from the options Menu to add or delete fragmetns
mpagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
removedTab = ..data received from ooption menu
// here I want to remove the Tab & the fragments (tab1 & its fragment)
if (removeTab == "tab1") {
tabLayout.removeTab(tab1);
mpagerAdapter.notifyDataSetChanged();
}
}
As I do this only the first tab gets removed I would like to know how to remove the associated fragment too.

You don't have to explicitly delete the fragment, you can remove the fragment.
You can remove the tab and do notifyDataSetChanged on the viewPagerAdapter instance.It will take care of removing the fragment.

I had asked a similar question using fragmentarray for which i got it to work . this is the link, Issue: Logic to find the position of a fragment in a fragment arraylist?

What's the difference between various Android tab navigation methods

I'm starting to write an Android app and want to have a tab navigation interface. It seems there are multiple choices, some of which may be deprecated:
Android TabHost (deprecated? but still available in Android Studio)
Tab Layout with Swipeable Views
Android Tab Activity
Material Design with Tabs
What is the best choice? Material Design with Tabs? How far back as far as APIs is this supported?
I know this isn't a pure coding question but it is probably a questions that others are pondering as well.
Thanks

extend your MainActivity to AppCompatActivity, and it will go till android version 7,
http://developer.android.com/reference/android/support/v7/app/AppCompatActivity.html
Use tabLayout and and View Pagers, To get the Swipe Effect on your Tabs
activity_main.xml
Add the Following to your MainActivity layout file.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:visibility="visible">
</android.support.v4.view.ViewPager>
MainActivity.java
public class MainActivity extends AppCompatActivity{
ViewPager viewPager;
FragmentPagerAdapter ft;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_viewpaggermain);
viewPager = (ViewPager) findViewById(R.id.vp_main);
ft = new FragmentPagerAdapter(getSupportFragmentManager()) {
String [] titles = {"Subscriber","Merchant"};
final int VIEW_COUNT = 2;
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new YourFirstFragment();
case 1:
return new YourSecondFragment();
}
return null;
}
#Override
public int getCount() {
return VIEW_COUNT;
}
#Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
};
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
viewPager.setAdapter(ft);
tabLayout.setupWithViewPager(viewPager);
}
}

Changing viewPager swipe direction

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.