Status Update
No update yet.
Comments
fr...@gmail.com
After a couple tries it looked like the tabs showed up after onPause() (for example when a dialog activity shows up on top of the current activity).
So doing tabLayout.setupWithViewPager(viewPager); inside a postDelayed with a 250ms delay works and tabs show up. Without calling it with a delay they won't show up.
So doing tabLayout.setupWithViewPager(viewPager); inside a postDelayed with a 250ms delay works and tabs show up. Without calling it with a delay they won't show up.
[Deleted User] <[Deleted User]>
The tabs will show up after a rotation as well.
so...@gmail.com
I'm using the TabLayout inside a fragment and the tabs disappear after returning to said fragment from another fragment or activity. This never happened with 22.2.0. The tabs do reappear on orientation change as previous poster noted.
ma...@gmail.com
I have mine inside a Fragment too, and it only happens when I replace a previous fragment with the one containing the TabLayout. However, it works fine when starting the app and said Fragment is loaded as the first one (not replacing another).
7m...@gmail.com
I'm using different TabLayout in different fragments and when i switching between fragments it disappears. SO I switch back to 22.2.0 :|
go...@gmail.com
Is there any hacky way to fix this issue?
If not, I am switching back to 22.2.0 until this is fixed as well.
If not, I am switching back to 22.2.0 until this is fixed as well.
to...@gmail.com
tabLayout.post(new Runnable() {
@Override
public void run() {
tabLayout.setupWithViewPager(pager);
}
});
Did the trick for me (Nexus 5, Android M Preview 2)
@Override
public void run() {
tabLayout.setupWithViewPager(pager);
}
});
Did the trick for me (Nexus 5, Android M Preview 2)
go...@gmail.com
Thanks tobias! That did a trick for me as well.
ki...@gmail.com
It's seems to be a layout issue. The tabs are there but have zero width and height.
ch...@google.com
This looks like a layout timing issue. Can't recreate so far but I'm working on it.
ki...@gmail.com
Chris, try to do a fragment transition between fragments with tabs.
ma...@gmail.com
Chris, this bug is easily reproduced with these steps:
1) Create the FragmentA with TabLayout;
2) Create the FragmentB without TabLayout;
3) Show the FragmentA using replaceFragment(android.R.id.content, new FragmentA()). Now tabs are correctly shown.
4) Show the FragmentB using replaceFragment(android.R.id.content, new FragmentB()).
5) Show the FragmentA using replaceFragment(android.R.id.content, new FragmentA()). Now tabs are gone.
1) Create the FragmentA with TabLayout;
2) Create the FragmentB without TabLayout;
3) Show the FragmentA using replaceFragment(android.R.id.content, new FragmentA()). Now tabs are correctly shown.
4) Show the FragmentB using replaceFragment(android.R.id.content, new FragmentB()).
5) Show the FragmentA using replaceFragment(android.R.id.content, new FragmentA()). Now tabs are gone.
ch...@google.com
Where are you calling setupWithViewPager()?
ma...@gmail.com
Inside onViewCreated of a fragment.
ki...@gmail.com
Chris, check out this repo: https://github.com/cypressious/TabLayoutBug
Click on the button and the tabs are missing. Then rotate the device and they are showing.
Click on the button and the tabs are missing. Then rotate the device and they are showing.
ch...@google.com
Aha! So this is something which I've already fixed (unintentionally).
The problem was with how TabLayout works out the max tab width. There were instances where it could result in a 0dp max width.
Here's the workaround I would recommend for now:
TabLayout tabLayout;
if (ViewCompat.isLaidOut(tabLayout)) {
tabLayout.setupWithViewPager(viewPager);
} else {
tabLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
@Override
public void onLayoutChange(...) {
tabLayout.setupWithViewPager(viewPager);
tabLayout.removeOnLayoutChangeListener(this);
}
});
}
The problem was with how TabLayout works out the max tab width. There were instances where it could result in a 0dp max width.
Here's the workaround I would recommend for now:
TabLayout tabLayout;
if (ViewCompat.isLaidOut(tabLayout)) {
tabLayout.setupWithViewPager(viewPager);
} else {
tabLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
@Override
public void onLayoutChange(...) {
tabLayout.setupWithViewPager(viewPager);
tabLayout.removeOnLayoutChangeListener(this);
}
});
}
ma...@gmail.com
CoordinatorLayout, FloatingActionButton, TabLayout, Toolbar and AppBarLayout should be used and referenced in Activity - NOT in Fragment. Fragment should be put in Activity's container (like FrameLayout) and ask its Activity for the view it needs in onCreateActivity(). Other implementations are not correct and lead to such issues.
ho...@gmail.com
While somewhat OT (sorry):
@malloth...
Where whould you get the "correct" vs "incorrect" from?
In my opinion, your statement is plain wrong, especially with tablet layouts in mind where handling the Toolbar in a Fragment can be really important.
@malloth...
Where whould you get the "correct" vs "incorrect" from?
In my opinion, your statement is plain wrong, especially with tablet layouts in mind where handling the Toolbar in a Fragment can be really important.
fr...@gmail.com
Thanks Chris.
ma...@gmail.com
@Hoch...
From here:http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior
"For tabbed screens, the floating action button should not exit the screen in the same direction as the screen exits. Doing so creates visual noise. It would also cause a nonfunctional floating action button to appear on screen. Furthermore, it incorrectly implies that the floating action button is at the same the z-level as the content, rather than at the level of the primary UI elements at the root level."
The first thing I tried was to implement every new pattern inside Fragment, but I faced many design issues without solutions. When I created Activity templates (with views I mentioned) and used those from Fragments everything became clear to me. Android main designers are going this way when they create and test appcompat and design libs.
The issue like the one in this post is due to what I said, as I do not have ANY problems when TabLayout is set right in Activity.onCreate().
From here:
"For tabbed screens, the floating action button should not exit the screen in the same direction as the screen exits. Doing so creates visual noise. It would also cause a nonfunctional floating action button to appear on screen. Furthermore, it incorrectly implies that the floating action button is at the same the z-level as the content, rather than at the level of the primary UI elements at the root level."
The first thing I tried was to implement every new pattern inside Fragment, but I faced many design issues without solutions. When I created Activity templates (with views I mentioned) and used those from Fragments everything became clear to me. Android main designers are going this way when they create and test appcompat and design libs.
The issue like the one in this post is due to what I said, as I do not have ANY problems when TabLayout is set right in Activity.onCreate().
ho...@gmail.com
(This is my last OT post here, sorry everyone who starred this)
@malloth...
That's in no way an indication that the elements should only be used in the Activity. As I already mentioned, for tablet layouts with multiple Toolbars, you're pretty much forced to implement all of this in the fragment (which works fine for pretty much everything I throw at it). Just check the Google Calendar on tablets - while it might be a custom implementation, the add/edit view has a custom toolbar in what should be a Fragment.
As Chris already acknowledged, this is a bug in the design library which hopefully will be fixed soon.
(But thanks for the link, now I know that my FABs behave completely wrong when switching in the ViewPager. More work... :D)
@malloth...
That's in no way an indication that the elements should only be used in the Activity. As I already mentioned, for tablet layouts with multiple Toolbars, you're pretty much forced to implement all of this in the fragment (which works fine for pretty much everything I throw at it). Just check the Google Calendar on tablets - while it might be a custom implementation, the add/edit view has a custom toolbar in what should be a Fragment.
As Chris already acknowledged, this is a bug in the design library which hopefully will be fixed soon.
(But thanks for the link, now I know that my FABs behave completely wrong when switching in the ViewPager. More work... :D)
iv...@gmail.com
Unfortunately Chris's workaround is not sufficient when your tab gravity is GRAVITY_CENTER (app:tabGravity="center"). You still require an additional layout for those TabViews to get the correct width.
to...@gmail.com
Chris Banes, your workaround still is causing some of my users to not see the tabs without tapping an EditText on the screen, for example. Is this fixed already? Are we stuck waiting another 30 days for an already-fixed issue that just hasn't been released?
go...@gmail.com
The workaround doesn't work with non lollipop devices.
di...@gmail.com
The solution #7 posted by Tobias worked for me. Thank you Tobias!
t....@super-appli.co.jp
I wasn't using viewPager, but with Tobias' idea I was able to get it to work like this:
tabLayout.post(new Runnable() {
@Override
public void run() {
tabLayout.addTab(tabLayout.newTab().setText("Item1"));
tabLayout.addTab(tabLayout.newTab().setText("Item2"));
tabLayout.addTab(tabLayout.newTab().setText("Item3"));
}
});
tabLayout.post(new Runnable() {
@Override
public void run() {
tabLayout.addTab(tabLayout.newTab().setText("Item1"));
tabLayout.addTab(tabLayout.newTab().setText("Item2"));
tabLayout.addTab(tabLayout.newTab().setText("Item3"));
}
});
m3...@gmail.com
This solution does not work on android 4.1.1 (api 16)
TabLayout tabLayout;
if (ViewCompat.isLaidOut(tabLayout)) {
tabLayout.setupWithViewPager(viewPager);
} else {
tabLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
@Override
public void onLayoutChange(...) {
tabLayout.setupWithViewPager(viewPager);
tabLayout.removeOnLayoutChangeListener(this);
}
});
}
TabLayout tabLayout;
if (ViewCompat.isLaidOut(tabLayout)) {
tabLayout.setupWithViewPager(viewPager);
} else {
tabLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
@Override
public void onLayoutChange(...) {
tabLayout.setupWithViewPager(viewPager);
tabLayout.removeOnLayoutChangeListener(this);
}
});
}
[Deleted User] <[Deleted User]>
Fix posted in #7 seems to work for both API 21 and API 19 at the moment.
m3...@gmail.com
I have checked for API 22 and API 16, fix posted in #7 to work for these api. Other api I have not checked.
pa...@gmail.com
thanks chris it's working smoothly .
kr...@agileinfoways.com
[Comment deleted]
pa...@gmail.com
first time viewpager loads fragment but when i move to next fragment like (myprofile screen ) after that back to the tab fragment viewpager cant load any fragment,when swipe that pager then load few fragment
la...@gmail.com
When can we expect the future release since the last release came out in July?
de...@gmail.com
Hi Chris,
Your solution #17 work flawlessly on android L. But, looking for bug fixed design library soon. Thanks... :)
Your solution #17 work flawlessly on android L. But, looking for bug fixed design library soon. Thanks... :)
ua...@gmail.com
Guys, using runnable all times - is worst, pure and ridiculous idea , in my opinion...
pa...@gmail.com
#38 when you are using "FragmentPagerAdapter" for view page then bug still comes,
after i was trying to use "FragmentStatePagerAdapter" for viewpager adapter its work smoothly.there no issue on tabs in fragment,just one follow the chris bane solution #17 to visible tab text or indicator.
after i was trying to use "FragmentStatePagerAdapter" for viewpager adapter its work smoothly.there no issue on tabs in fragment,just one follow the chris bane solution #17 to visible tab text or indicator.
ch...@google.com
Released in the v23 support libs
de...@gmail.com
[Comment deleted]
de...@gmail.com
Hey Chris, Your solution #17 is working perfectly for Lollipop and kitkat(as I had tested on that only), but when i tested it on Ice Cream Sandwitch(4.0), the issue is still persist. Do you have any solution for that ??
[Deleted User] <[Deleted User]>
[Comment deleted]
[Deleted User] <[Deleted User]>
[Comment deleted]
al...@gmail.com
Using the v23 lib, i still have this problem.
ya...@gmail.com
I am kind of sick of this issue :)
de...@gmail.com
[Comment deleted]
de...@gmail.com
Using the v23 lib, I am still facing this problem on version 4.0(I don't have any idea about bug on lower version than 4.0). Is there any solution for that ?
[Deleted User] <[Deleted User]>
I am also facing this issue on older platforms like 2.3 where the workaround given by the chris doesn't work.
ng...@gmail.com
[Comment deleted]
no...@gmail.com
tabLayout.setupWithViewPager(viewPager);
tabLayout.removeAllTabs();
for(int i = 0;i<tabNames.length;i++){
tabLayout.addTab(tabLayout.newTab().setText(tabNames[i]));
}
this has worked for me while the above two methods havent. Dont know why.
I noticed something, if the tabLayout.addTab() is not called, blank(without text) tabs are added in my app according to the number of fragments in pagerAdapter. Removing those tabs and again adding with setText() works fine and references to corrent fragments!
tabLayout.removeAllTabs();
for(int i = 0;i<tabNames.length;i++){
tabLayout.addTab(tabLayout.newTab().setText(tabNames[i]));
}
this has worked for me while the above two methods havent. Dont know why.
I noticed something, if the tabLayout.addTab() is not called, blank(without text) tabs are added in my app according to the number of fragments in pagerAdapter. Removing those tabs and again adding with setText() works fine and references to corrent fragments!
ro...@gmail.com
I have moved to V23.0.1 and still have this problem. Any update on this issue?
al...@gmail.com
[Comment deleted]
[Deleted User] <[Deleted User]>
[Comment deleted]
is...@gmail.com
Any update on this issue?
mi...@gmail.com
[Comment deleted]
mi...@gmail.com
it does not reproduce on 23.0.1 for me, but reproduces on 23.1.0 and 23.1.1. Used the TabLayout example from: https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout . Ended up using a custom view from the same link...
// Iterate over all tabs and set the custom view
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
// Iterate over all tabs and set the custom view
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
a....@gmail.com
Why this issue is closed - it is not resolved at all!
mihaela....@gmail.com
- unfortunatelly your solution doesn't work - tried on 5.0.2
mihaela....@gmail.com
- unfortunatelly your solution doesn't work - tried on 5.0.2
ch...@google.com
It's closed because it's fixed. If you're still seeing this, attach a sample and repro instructions.
ed...@gmail.com
#7 working for me. Thanks
kh...@sycomore.vn
#7 working for me also. Thanks
ud...@gmail.com
Issue still exists, I don't know what are you doing there but for a simple UI componenet you succeeded to ruin it completely.
Why should I post/post delayed something that should be so easy to implement?
Using AppCompat Activity with simple linear layout (First child TabLayout second one is v4 view pager)
Why should I post/post delayed something that should be so easy to implement?
Using AppCompat Activity with simple linear layout (First child TabLayout second one is v4 view pager)
ch...@google.com
#67: See #64
ts...@gmail.com
#64 did the trick
mn...@gmail.com
Hey guys, this recently started happening within the NYTimes app. We can reproduce with 100% certainty by opening our app, then forcing slow network followed by pressing refresh to our main screen. Not sure what we'd need to show you to figure out a fix.
ch...@google.com
Provide a sample which recreates the problem. I can't recreate this on any device.
bv...@gmail.com
Found my remaining issue (23.0.1 did work, newer version did not):
the working of the style 'tabTextAppearance' did change. By removing the 'tabTextAppearance' from the style entry given to my android.support.design.widget.TabLayout, the text started showning again but with wrong colours. In the end had to switch from Widget.AppCompat.Light.ActionBar.TabText to TextAppearance.Design.Tab for the style entry pointed to by tabTextAppearance. Hope it helps some of you.
the working of the style 'tabTextAppearance' did change. By removing the 'tabTextAppearance' from the style entry given to my android.support.design.widget.TabLayout, the text started showning again but with wrong colours. In the end had to switch from Widget.AppCompat.Light.ActionBar.TabText to TextAppearance.Design.Tab for the style entry pointed to by tabTextAppearance. Hope it helps some of you.
al...@gmail.com
For those who still use previous version (22.2.1) - just call this method before adding any tab:
tabLayout.removeAllTabs();
This magically helped me to see tabs.
tabLayout.removeAllTabs();
This magically helped me to see tabs.
wz...@gmail.com
I'm still seeing a similar behaviour. Neither #7, #17 nor #56 helped.
I have 3 tabs with nested fragments. FragmentA, FragmentB and FragmentC (the ones given to the pager adapter) have the another child FragmentD injected using FragmentTransaction. After a couple of swipes FragmentD appears only in the middle one - FragmentB - while FragmentA and FragmentC have it blank. Rotating the screen resets the situation and display FragmentD in either tab (until navigating again).
Interestingly, swapping fragments A, B and C around doesn't make any difference. It's always only the middle fragment that is able to display the FragmentD.
I'm building with
compileSdkVersion 23
buildToolsVersion "23.0.3"
targetSdkVersion 23
com.android.support:appcompat-v7:23.3.0'
Tested on galaxy s7 Marshmallow 6.0.1 and galaxy s3 kitkat 4.4.4
I have 3 tabs with nested fragments. FragmentA, FragmentB and FragmentC (the ones given to the pager adapter) have the another child FragmentD injected using FragmentTransaction. After a couple of swipes FragmentD appears only in the middle one - FragmentB - while FragmentA and FragmentC have it blank. Rotating the screen resets the situation and display FragmentD in either tab (until navigating again).
Interestingly, swapping fragments A, B and C around doesn't make any difference. It's always only the middle fragment that is able to display the FragmentD.
I'm building with
compileSdkVersion 23
buildToolsVersion "23.0.3"
targetSdkVersion 23
com.android.support:appcompat-v7:23.3.0'
Tested on galaxy s7 Marshmallow 6.0.1 and galaxy s3 kitkat 4.4.4
m....@gmail.com
Have you tried with the latest version of the support library?
wz...@gmail.com
Managed to prevent this situation by calling .setOffscreenPageLimit(2); on my ViewPager since I know I will only have 3 pages.
Afterwards, I've tried adding a 4th FragmentE (also having FragmentD nested) and as expected only first FragmentA and last FragmentE had their FragmentD missing.
I deduce that FragmentD's onDestroyView was being called after its parent fragment was further than the OffscreenPageLimit from the currently viewed fragment. Later on navigating back the FragmentD was yet not correctly recreated.
Afterwards, I've tried adding a 4th FragmentE (also having FragmentD nested) and as expected only first FragmentA and last FragmentE had their FragmentD missing.
I deduce that FragmentD's onDestroyView was being called after its parent fragment was further than the OffscreenPageLimit from the currently viewed fragment. Later on navigating back the FragmentD was yet not correctly recreated.
wz...@gmail.com
mm...@gmail.com
I found in 23.1.0 that I had to do things in this order
1. assign TabLayout
2. set tabLayout.setupWithViewPager(viewPager);
3. add titles
The only thing is that I didn't find any documentation on this order. I only figured this out from reading what others have done.
1. assign TabLayout
2. set tabLayout.setupWithViewPager(viewPager);
3. add titles
The only thing is that I didn't find any documentation on this order. I only figured this out from reading what others have done.
ka...@gmail.com
Use ChildFragmentManager instead of FragmentManager
It worked for me.
It worked for me.
ka...@gmail.com
private void setupViewPager(ViewPager viewPager)
{
ViewPagerAdapter adapter=new ViewPagerAdapter(getChildFragmentManager());
adapter.addFragment(new DashboardMissedFragment(),"One");
adapter.addFragment(new DashboardAttendedFragment(),"Two");
viewPager.setAdapter(adapter);
}
{
ViewPagerAdapter adapter=new ViewPagerAdapter(getChildFragmentManager());
adapter.addFragment(new DashboardMissedFragment(),"One");
adapter.addFragment(new DashboardAttendedFragment(),"Two");
viewPager.setAdapter(adapter);
}
Description
Version used: 22.2.1
It was working correctly on 22.2.0, but right after updating to 22.2.1 tabs are not showing anymore, I didn't change a single line of code from one build to another.
For what it's worth this is my init code:
viewPager.setAdapter(pagerAdapter);
tabLayout.setTabsFromPagerAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
and the XML for reference:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:elevation="10dp">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="@dimen/_second_keyline"/>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Attached is a screenshot of what I see on my screen.
Using a Nexus 4 with Lollipop 5.1 build LMY470.