feat: Swipeable tabs for Android

[Sturgelose]

Type: feat

Ionic Version: 2.x

Platform: android 4.4 webview

It would be great to have a swipeable tabs directive, or at least allow swipeable tabs option in the ion-tabs directive so we can swipe through tabs.

This is implemented in Android's Material Design by default (http://developer.android.com/design/patterns/swipe-views.html#between-tabs), so maybe this should be only applied to the Android platform. I'm requesting it in Ionic 2.x as I've seen that Material Design has been integrated into Ionic.

An example of it would be this one:

I found out that there is a trial of implementation here: https://github.com/JKnorr91/ion-slide-box-tabs, however, it has lots of flaws.

I'm sure that this could be implemented using the ion-slide-box directive, but according to documentation it will be deprecated and I'm not sure about the new API (can't be found anywhere)

[3dd13]

there was a PR to demonstrate how to do that in ionic v2 with ion-slides and ion-segment, the sample code is in the source code test folder:
#4970

[Sturgelose]

@3dd13, thanks a lot, I'll take a look at it! I was doing searches in the issues but I wasn't able to find this commit!

Also, I hope it works well, as the usual problem is that there is no tabs animation when changing tabs

[jgw96]

Just released my Ionic 2 app GitNinja yesterday for Android, and got three comments from users wanting to be able to swipe between tabs. This is what people are used to on Android, so I think this feature would be great.

[lordgreg]

+1

[nicobytes]

+1

[GoNode5]

It would be great (and logical) if the tabs itself are also swipable:

[rdesimone]

At least page transitions between tabs are needed for Android (Windows Phone). It is the standard behavior of an Android app. Switching without page transitions looks very strange actually - especially as the tab change in the tab bar is nicely animated. Swipe support would of course be perfect.

[pantonis]

+1 This is a core native ux on Android

[hlehmann]

+1 This feature is the most frequent request I receive from my users

[ghost]

+1 Here this feature is the most frequent request too

[cosemansp]

+1 (also for iOS)

[dasilvacontin]

I'm surprised this wasn't in v1. I guess it's because UI has been focused more on iOS? (or at least I got that impression)

[gbelmm]

:(

[barocsi]

not even sure why do these called rc.x :)

[mlynch]

@gbelmm just because we're moving it from milestones doesn't mean we aren't working on it or aren't taking it seriously. We try to get releases out at most every two weeks, that means some harder stuff is going to have to wait because we don't want to ship broken stuff to you all (we make mistakes, though).

We're trying to be very transparent but we never make guarantees that issues or features will come out at a certain time.

That's the nature of software engineering!

[Fdom92]

@mlynch i know that issue or feature is hard because there is not default behaviour on iOS. I want this feature for my app but i know that this hard so take the time you all need cause you deserve it haha you guys are doing a good work making RC so often.

[NgYueHong]

@jgw96 Why is this feature is now removed from the milestone? :(

[kodeine]

i was waiting for this feature as well :/

[newsof1111]

i make a simple example of 2 swipedTabs,hope it will help till i will complete the full plugin .
Youtube Link

github Link

[Fdom92]

Guys, they are working on RC's, it means that they only focus on bug fixing on the 2.0.0 features only. So first will be a final 2.0.0 version and then maybe they will introduce new features in 2.1 or 2.0.1 so be patient. Im waiting this too so wait.

Thats all :)

[Hollerweger]

I'm just a litte concerned about the ionic 2 architecture if such a high rated feature can't be resolved in a year.

[Sturgelose]

Ok, guys, OP of the issue here. Yes, this is taking long time, but guys, we have to realize that Ionic 2 has been created nearly from scratch in the last year, which means that there isn't so much time to handle big features such as this one. So, getting a platform such as this one from beta to nearly release in 1 year is a huge achievement. Also, if we read a bit through all the comments (and get rid of the spam) you will see that the feature is getting delayed because there are prerequisites. Copying from a post much upper:

It is a complicated feature to be implemented properly, we still need to fix a couple of things and ion-slides. But it is in between our priorities!

See also:
#7075
#7049
#6726
#5508

Out of all this issues, all have been closed but the last one, which is still open, still needs work.

Yes, I agree, this feature has had tons of requests and me the first one 😏 But we have to understand that if they provide us a badly implemented feature we will keep on complaining as well and I'm sure they don't want to deliver a bad experience when they know it won't work well because of the previous listed issues. So, I'd rather wait a bit more and have a properly implemented feature than trying to hack the code. Plus, we can still use a tabbed view without swiping, which is not so bad.

In sum, guys and gals, let's have patience and trust on them. Anyways, I'll take the chance to wish you all merry Christmas and holidays!

EXTRA COMMENT:
And please, we are all having the same thoughts on the delays and everything. Remember that messaging here is notifying everyone subscribing. Unless is something constructive, try to hold back yourself. Otherwise, you can always use reactions to the posts!! 👍

[thegust]

this got any solution?

[thegust]

@adamdbradley @brandyscarney @mlynch @jgw96

[NgYueHong]

Awesome, version 2.0 is finally released. Now let's get this long waited Swipeable Tab feature integrated by next updates.

[dominikstrasser]

If you don't want to wait for an official component you can use two sliders to create your own 'Swipeable Tab'-component.
i'm using two sliders (inside ion-navbar and ion-content area) and let them control each other.

@ViewChild('pageSlider') pageSlider: Slides;
@ViewChild('headerSlider') headerSlider: Slides;
...
this.headerSlider.control = this.pageSlider;
this.pageSlider.control = this.headerSlider;

This works quite good for my app (rc6 or final).

[joekukish]

I can't believe 2.0 was declared without this feature. If this is not implemented it is really obvious for the users that the app is not native as it is something expected for every android app.

[brandyscarney]

Hey everyone,

We know this is an important feature to all of you. We are well aware that it is something we need to add; it is at the top of our features list. Our goal was to release 2.0 final, get some bug fixes in, and then start adding features again. Trust me, we would love to spend most of our time adding features, but that isn't possible when there are bugs that prevent our user's from using their apps. This is not as simple as adding some CSS to some tabs. This will require updating our segment component, making sure it interacts with other gestures properly, adding additional styling, and more.

Adding comments to this issue asking for updates is distracting to us. I will be locking this issue for this reason. We will update the issue when we have news to share on it. We appreciate your patience. 🙂