Recently google added android.support.design.widget.TabItem in supportDesign as documentation said:
TabItem is a special 'view' which allows you to declare tab items for
a TabLayout within a layout. This view is not actually added to
TabLayout, it is just a dummy which allows setting of a tab items's
text, icon and custom layout.
But when I add TabItems to my TabLayout:
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="#string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="#drawable/ic_android"/>
</android.support.design.widget.TabLayout>
Nothing displayed (in fact place of Tabs exist but Icon/Text not). Does any one knows How to use TabItem through xml?
Based on this answer, TabItem with tabLayout.setupViewPager have conflict and Icons disappear. To make it work you should implement two methods like following and avoid using setupViewPager method:
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
pager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
tabLayout.getTabAt(position).select();
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
you should set these attributes for the TabItems
android:layout_width
android:layout_height
Cheers
Related
I have a ViewPager2 in my activity and TabLayout attached to this viewpager2 as below:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
app:tabIndicatorColor="#color/colorPrimary"
app:tabMode="fixed"
android:layout_height="2dp" />
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/vpager"/>
I have attached the TabLayout to ViewPager as below
new TabLayoutMediator(tabLayout, vpager,
new TabLayoutMediator.TabConfigurationStrategy() {
#Override public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}).attach();
My target is to keep the indicator color selected in previous tab seeing by the user, so if the user go to next tab, the previous one must be coloring as the selected, like the images below
The images show the first indicator is selected and keep it selected when going to the next fragment, so it can be like a progress bar.
I choose to set the indicator color programmatically by index, how?
The TabLayout indicator color functionality is limited the current selected tab of the TabLayout; so it affects only the current tab; not any other tab.
Instead, you can use a ProgressBar for that and set the progress whenever the ViewPager changes the page:
Layout
<ProgressBar
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/intro_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Behavior
ProgressBar progressBar = findViewById(R.id.progress_bar);
progressBar.max = pageCount // Change pageCount to the number of pages in your ViewPager2
mViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
progressBar.setProgress(position + 1);
}
#Override
public void onPageSelected(int position) {
progressBar.setProgress(position + 1);
}
});
I want to interpolate between two colors while scrolling or "swiping" to the next tab in a TabLayout. To do this, I need some way to know when the user is swiping between tabs. I have tried using TabLayout.OnScrollChangeListener but the method is never called. Is it possible to know when the user is swiping to a new tab and, if so, how?
Edit:
libraryTabs.setOnScrollChangeListener(new TabLayout.OnScrollChangeListener() {
#Override
public void onScrollChange(View view, int i, int i1, int i2, int i3) {
}
});
is never called.
i think to achieve what you want then you will need a ViewPage
something like this
ViewPager mViewPager;
TabLayout mSlidingTabs;
mSlidingTabs = (TabLayout) findViewById(R.id.tabs);
mSlidingTabs.setupWithViewPager(mViewPager);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.w(TAG, "onPageScrolled");
// do what you want
}
#Override
public void onPageSelected(int position) {
Log.w(TAG, "onPageSelected");
// do what you want
}
#Override
public void onPageScrollStateChanged(int state) {
Log.w(TAG, "onPageScrollStateChanged");
// do what you want
}
});
Try this.
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
//Do whatever you want here.
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
i am using viewpager and tab layout
viewPager.setAdapter(Adapter);
tablayout.setupWithViewPager(viewPager);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
int cPage;
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
cPage = position;
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
now when i swipe selected tab color is changing but when i call
viewPager.setCurrentItem(1, true);
its not changing new tab layout color . say
i have 2 tabs when i am 1st it setting text color green for 1st tab and when i swipe it giving 2nd tab color green .. but when i call
viewPager.setCurrentItem(1, true);
in this my 1st tab is green not 2nd tab
https://stackoverflow.com/a/35843370/4302046
// mViewPager.setCurrentItem(position);
mTabLayout.getTabAt(position).select();
Try this worked for me...
tabLayout.setScrollPosition(position,0f,true);
In your activity:
// init TabLayout
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
if (mCallFrom.equalsIgnoreCase(ActivityConstantUtils.sCalledFromActPanel)) {
// To add Memory
tabLayout.addTab(tabLayout.newTab().setText(R.string.add_memory_caption));
tabLayout.addTab(tabLayout.newTab().setText(R.string.add_memory_effects));
// tabLayout.addTab(tabLayout.newTab().setText(R.string.add_memory_frames));
} else {
// To add Memory from Recipe & Blog
tabLayout.addTab(tabLayout.newTab().setText(R.string.add_memory_caption));
tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);
}
changeTabsFont(tabLayout);
showDivider(tabLayout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) getActivity().findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter(this.getFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab.getPosition() == 1) {
Utils.hideSoftKeyboard(view, getActivity());
}
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
//Style apply to tablayout
<style name="ActPanelTabLayout.Theme" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/memory_color_80</item>\
<item name="android:textColor">#color/act_tab_black</item>
<item name="tabSelectedTextColor">#color/act_tab_selector_text_color</item>
<item name="tabTextAppearance">#style/TextAppearance.Jacksonville.ActTab</item>
</style>
Faced unique problem. When we set setCurrentItem. It does not change tablayout's tab. Then you have to addOnPageChangeListener on viewpager in which you have to select the tablayout's tab manually for selected viewpager's position. Then setupWithViewPager.
Note : setupWithViewPager needs to be set only after addOnPageChangeListener added. God knows why. This is what worked. if I setupWithViewPager before, it does not work. Again, almighty only knows.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
viewPager.setCurrentItem(position,false);
tabLayout.getTabAt(position).select();
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
/*
NOTE: This is setup after addOnPageChangeListener. Don't know why but this is what works. Otherwise tabLayout.does not select.
*/
tabLayout.setupWithViewPager(this.viewPager);
Had the same issue, with tab in TabLayout not being selected after we have swiped the ViewPager, i.e. when we were swiping the ViewPager the tab stood the same.
Solution (Kotlin):
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
override fun onPageSelected(position: Int) {
viewPager.setCurrentItem(position, false)
tabLayout.getTabAt(position)?.select()
}
override fun onPageScrollStateChanged(state: Int) {}
})
viewPager.setCurrentItem(1, true);
has to be run on UI Thread
This is known bug in Design support library even in version 24.1.1 it exists, i was able to find a work around for this issue by using a co-ordinator layout as the parent(root) layout
I set up ViewPager with TabLayout like this:
tabLayoutOnPageChangeListener = new TabLayout.TabLayoutOnPageChangeListener(tabLayout);
mViewPager.addOnPageChangeListener(tabLayoutOnPageChangeListener);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
doSomething();
}
});
so when I swipe ViewPager, TabLayout will update its indicator and selected tab; and when a tab is selected, ViewPager will change to proper page.
But this causes onTabReselected to be called even if I do not reselect tab, because after onTabSelected, mViewPager.setCurrentItem() will trigger tab selecting again (via tabLayoutOnPageChangeListener). I have to do this:
#Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.removeOnPageChangeListener(tabLayoutOnPageChangeListener);
mViewPager.setCurrentItem(tab.getPosition());
mViewPager.addOnPageChangeListener(tabLayoutOnPageChangeListener);
}
to temporary remove listener when setCurrentItem() is called.
Is there any "more right" way to make ViewPager work with TabLayout? I'm using latest v23.0.1 design support library.
TabLayout's setupWithViewPager method is available for this purpose. You should able to replace your code with tabLayout.setupWithViewPager(mViewPager).
I'm trying to find way to achieve such effect https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsVlhxNGJCNTEzNFU/components-buttons-fab-behavior_04_xhdpi_009.webm
I'm using android.support.v4.view.ViewPager
I appreciate any hints and help
First, you need to have the layout with the floating action button anchored to the ViewPager:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:tabGravity="center"
app:tabIndicatorColor="?attr/colorAccent"
app:tabMode="scrollable"
app:tabSelectedTextColor="?attr/colorAccent"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|right|end"
android:layout_width="56dp"
android:layout_height="56dp"
android:src="#drawable/ic_add_white"
app:borderWidth="#dimen/fab_border_width"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
Now that you have the FAB anchored to the ViewPager (note: I've tried this on a fragment that is a tab in the viewpager; it does not seem to behave properly), add an OnPageChangeListener to your ViewPager like so:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
switch (position) {
case INDEX_OF_TAB_WITH_FAB:
fab.show();
break;
default:
fab.hide();
break;
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
The animations for the "pop" and the "shrink" upon switching tabs are handled automatically for you with the new version of the Support Library.
Here is another solution. The problem for me with other ones is that giving the control of the FAB to the activity that contains the ViewPager makes thing difficult to code.
I need lots of controls on the FAB by the Fragments to easily change the FAB icon and set specific listeners on it.
Roughly, the steps are:
Declares one FAB in the main activity that contains the ViewPager, and not in the fragments (it is a mandatory step that I wanted to avoid, but the magic comes after; doing otherwise makes things difficult for a good animation)
In each fragment to be displayed in the ViewPager, I create a method where I can pass a FAB, like public void shareFab(FloatingActionButton sharedFab); inside this method, each fragment will set the FAB icon and add the needed listeners
I set up a ViewPager.OnPageChangeListener listener on the ViewPager that will trigger animations and calls my shareFab methods.
So each time a fragment is displayed, the containing activity will give to the displayed fragment the reference of the FAB. The fragment then reset/recycle the FAB to suit its needs.
Here is an example:
The fragments to display
public void Fragment1 extends Fragment {
private FloatingActionButton mSharedFab;
#Override
public void onDestroy() {
super.onDestroy();
mSharedFab = null; // To avoid keeping/leaking the reference of the FAB
}
public void shareFab(FloatingActionButton fab) {
if (fab == null) { // When the FAB is shared to another Fragment
if (mSharedFab != null) {
mSharedFab.setOnClickListener(null);
}
mSharedFab = null;
}
else {
mSharedFab = fab;
mSharedFab.setImageResource(R.drawable.ic_search);
mSharedFab.setOnClickListener((fabView) -> {
// Your code
});
}
}
}
The container activity
public class ActivityMain extends AppCompatActivity {
FloatingActionButton mSharedFab;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mSharedFab = (FloatingActionButton) findViewById(R.id.shared_fab);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
Fragment1 fragment1 = new Fragment1();
Fragment2 fragment2 = new Fragment2();
adapter.addFragment(fragment1, "Fragment1");
adapter.addFragment(fragment2, "Fragment2");
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(adapter);
fragment1.shareFab(mSharedFab); // To init the FAB
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
#Override
public void onPageSelected(int position) { }
#Override
public void onPageScrollStateChanged(int state) {
switch (state) {
case ViewPager.SCROLL_STATE_DRAGGING:
mSharedFab.hide(); // Hide animation
break;
case ViewPager.SCROLL_STATE_IDLE:
switch (viewPager.getCurrentItem()) {
case 0:
fragment2.shareFab(null); // Remove FAB from fragment
fragment1.shareFab(mSharedFab); // Share FAB to new displayed fragment
break;
case 1:
default:
fragment1.shareFab(null); // Remove FAB from fragment
fragment2.shareFab(mSharedFab); // Share FAB to new displayed fragment
break;
}
mSharedFab.show(); // Show animation
break;
}
}
});
}
}
... and the classical layout of the main activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/shared_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin" />
</android.support.design.widget.CoordinatorLayout>
The pros are:
animation like the one described in the Material Design guidelines!
full control of the FAB by each fragments
The cons are:
since the FAB can be shared to another fragments, the reference of the FAB should be checked each time to be sure it is not null
declaration of the FAB at the level of the ViewPager, a little cumbersome
For good animation of hide and show use this :
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
switch (state){
case ViewPager.SCROLL_STATE_IDLE:
fab.show();
break;
case ViewPager.SCROLL_STATE_DRAGGING:
case ViewPager.SCROLL_STATE_SETTLING:
fab.hide();
break;
}
}
});
The solution that I discovered was:
My fragments that are shown within my ViewPager implement an Interface (in my case FloatingActionButtonFragment). This interface requires that the fragment have a method handleFABClick(View).
My ViewPager change listener then looks like below:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
switch (state) {
case ViewPager.SCROLL_STATE_SETTLING:
displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
break;
case ViewPager.SCROLL_STATE_IDLE:
displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
break;
default:
mFloatingActionButton.hide();
}
}
});
private void displayFloatingActionButtonIfNeeded(int position) {
if (mFragmentStatePagerAdapter.getItem(position) instanceof FloatingActionButtonFragment) {
final FloatingActionButtonFragment floatingActionButtonFragment = (FloatingActionButtonFragment) mFragmentStatePagerAdapter.getItem(position);
mFloatingActionButton.show();
mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
floatingActionButtonFragment.handleFABClick(v);
}
});
}
}
This makes the FAB 'hide' when the user is changing views, but then triggers the show method when the view state is either idle (it has settled) or is settling (I needed to do both as it didn't feel right only using idle).
I recently found much better solution that i am satisfied with. FAB hide method can also have a parameter - listener which is triggered when the button is hidden (show method also have this). The only drawback is that you have to implement viewpager and tablayout changes manually.
#Override
public void onPageSelected(int position) {
onToolbarTitleChanged(adapter.getPageTitle(position).toString());
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(final TabLayout.Tab tab) {
fab.hide(new FloatingActionButton.OnVisibilityChangedListener() { // Hide FAB
#Override
public void onHidden(FloatingActionButton fab) {
fab.show(); // After FAB is hidden show it again
}
});
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
If you want to show FAB only on specific tabs, you can change the onTabSelected method to:
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab.getPosition() == 2) {
createButton.hide();
}
viewPager.setCurrentItem(tab.getPosition());
}
For my problem, I did not want to show floating action button on first Tab; in order to achieve this I added
android:visibility="invisible"
in floating action bar.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:visibility="invisible"
app:srcCompat="#android:drawable/ic_input_add" />
And I have added ViewpagerListner in my activity as suggested by #chantell
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
switch (position) {
case 0:
addFloatingActionBt.hide();
break;
default:
addFloatingActionBt.show();
break;
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});