Ionic-framework: feat: Swipeable tabs for Android

Created on 20 Jan 2016  ·  83Comments  ·  Source: ionic-team/ionic-framework

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:
SlideTabs Gif

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)

stale issue

Most helpful comment

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

ionic

All 83 comments

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:
https://github.com/driftyco/ionic/pull/4970

@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

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.

+1

+1

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

ionic

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.

+1 This is a core native ux on Android

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

+1 Here this feature is the most frequent request too

+1 (also for iOS)

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)

@dasilvacontin that is correct. In Ionic 2 we are making material design a focus along with ios design (:

My app is ready for production but I cannot take it live without swipeable tabs.

+1 My app too...
:+1:

+1

My first ever +1 comment on github 😄

+1

+1

Also here is a UX requirement... +1

From beta 3 it was moved to beta 12. :(

@pantonis Really expect this feature too..

I am expecting this feature from beta.3
A much needed feature for apps targeted towards android

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:
https://github.com/driftyco/ionic/issues/7075
https://github.com/driftyco/ionic/issues/7049
https://github.com/driftyco/ionic/issues/6726
https://github.com/driftyco/ionic/issues/5508

+1 looking forward to this

+1 i'm waiting only two things to migrate my app for ionic 2: swippable tabs and webworker support.

+1

+1

+1 Should be added to Ionic 1 and Ionic 2 asap.

Hey all! I'm subscribed to this to get useful updates. Does Ionic have a policy on +1 comments? I'm getting emails about this quite often, only to find out that somebody commented '+1', which doesn't seem constructive.

Hello @kz we do not really have an official policy on +1 comments, i would recommend changing your github notification settings if possible. Also, just so everyone knows we are planning on implementing this feature, and as you can see on right hand side of github it is assigned to beta.12, which means you can expect this feature in that release at this time. I would also just like to ask our community that before you comment a +1 just remember that the team here at ionic and anyone who is subscribed to this issue as @kz is will get notifications when you comment, including an email and that its best if your comment is adding content, ideas etc to the issue. Thanks everyone!

i'm waiting for ionic 2: swippable tabs

+1 Definitely would want to use this.

+1 A must have feature!!!!!

Why is it removed from beta 12 milestone? Moved all the way from beta 3 to beta 12, and now not even in beta 12?

:(

Yes, I'm looking forward to beta.12 release. When is the beta.12 release?

It would be great if the tabs can swiped.

Hello everyone! Since we are getting very close to our RC release we decided to take a step back and focus on show stopping bugs In beta.12. These are bugs that either can totally break an app, or breaks a big piece of functionality of the framework. This does not mean that we are not gonna implement new features such as this issue, but we really want to focus on getting what we have already super stable and prod ready. Also beta.12 will be updated to angular 2 rc5 and should finally include ahead of time compile!

@jgw96 how many release candidates you plan? If it's not a secret :smile:

Good question! Hopefully not too many! 😃

At the moment we only have 1 planned, but there may be more. You can always check out our roadmap here to see what were planning on doing. Thanks!

Just a note since by this news the influx of +1 posts and comments is going to drive everyone listening to this thread crazy who's waiting on actual news on this feature. You can get status updates by using the subscribe button on the right. You don't need to post unless you have something note worthy, and if you need to +1 you can just use the +1 emote that Github has added to reduce anger, but still allow vote casting. It's time to break this +1 culture that we are all guilty of proliferating.

All the information you need to judge and vote on upcoming features: Milestones and their Roadmap, as well as a Trello board for up voting.

Thanks @mtpultz ! We do not have an official policy on +1's but we do ask that you remember that everyone who is subscribed to this issue, as well as the team here at Ionic do get emails and notifications when a new comment is posted to an issue, so it is appreciated if the comment adds content, ideas, suggestions etc to the issue rather than just a +1. Again, this is not an official policy or anything, just something to remember.

  • 1 for swipeable tabs When will this feature be released?

So is it part of the Windows user interaction guideline, as I remember.
Maybe this feature should also be added to the Windows platform by default.

Looking forward to this feature, been battling to run it on my very complex app...

Hello! We are moving our feature requests to a new feature request doc. I have moved this feature request to the doc and because of this I will be closing this issue for now. Thanks for using Ionic!

@jgw96, hey, I'm the original poster of this issue here!
I have been trying to avoid spamming as I've seen tons of +1 or "I also need this" message.

Anyways, It's good that you are moving all the feature requests in a document, but, just as a small thought (to help in this process change), maybe it could be good to add there in the document the amount of 'Likes' or relevance that each issue has, as right now it just feels like a long list of issues ordered by the time it was posted. Up to now, we kinda knew that you had this in priority but there were other issues so this feature got halted. I'm just saying so as an issue is not just the feature but also the metadata with it (reactions of the people, though not saying that all of them are relevant).
And well, now seeing that document, I'd say it makes anyone feel a bit lost on which will be your next step..

So, in order to avoid losing this metadata, maybe (as a fast idea, aside of writing it in the doc), what about in the future, allow people to vote on the features, as we were kinda doing here. I'm sure it would really help you to decide which would be the next feature to implement ;) A small website like this, would take like 1-2 hours or less to create, and many other open source or similar projects have a tool like this ;)

But anyways, thanks a lot for the hard work of all the Ionic team, and glad to see this great framework look so awesome, and soon to be an RC :D

Cheers!

EDIT: If anyone else agrees, feel free to add a reaction to the post, but not as a message, but as a proper +1 reaction (see the button in the top right corner of the message? Yep, there :D)

@Sturgelose Thanks for the ideas! We are actually experimenting with zenhub now (sorry for any confusion) so we may not even keep the google doc feature list idea. Because of this im reopening this issue for now.

Helly everyone.

This means the http://ideas.ionic.io/ideas/top is not been used?

This feature is the second on community's priority, based on the popular votes. Things is, no word was given about that, and I wondered if the site was of any use, now that's a confirmation?

Anyway, congratulations on the good job, thanks.

@victorivens05 there was some confusion with that site, it is _not_ for Ionic Framework, it's for Ionic Cloud. We need to fix that.

Thanks for the feedback everyone, this is definitely on the list but we need to get the RC out first which should be happening shortly.

Hope this will be in RC1 milestone...

@NgYueHong Not yet in RC0?

@infinnie I don't see any mention of it in the changelog and this issue still remain open.

This should be on priority 1 lol ! +1
I hope its not implemented using ion-slides.
That screwed up UX in ionic 1. while user is trying to scroll faster as he would in normal native app , tab would change. It was not official though.

Fast scrolling and sliding tabs don't go hand in hand when ion-slides are used.

Take your time , but it would be great if slides are not used.

All the best ionic team 👍

I've updated 4970 that uses segments and slides to work with RC0.

It is available as a gist https://gist.github.com/aarjithn/d282b019f6046f0de2f0ded623554313.

The only problem I see with this is tabs itself are not swipable.

https://github.com/leoruhland/ion-slides-tabs looks neat, would be nice if anybody can port it to ionic2.

Hi tried your suggestion and example;
And implemented it; works fine for the beta 2 version.
Looks like:

#
screen shot 2016-10-14 at 18 41 01

What Im looking for is enhancment a little bit "tinder UI":

  • Not tabs UI but just icons
  • Where one would have an logo in the centre
  • Having an active class for the selected tab

tinder-ui

Any thoughts for modifying the example towards this?

Swipe-able tabs would be great, but implementing them with ion-slides is not optimal, at least not if you want to keep, for example, a separate navigation stack in one of them.

Agreed with @Alx101 .
My suggestion would be to use an attribute on the tab/segment tag. Like "ion-sweep=true".

This improvement will be fantastic, i am waiting this, day after day! :)

thanks!

Is there still any plan to include this feature in ionic2? Not mentioned in any Framework Meeting since 2016-07-29. I'm waiting for this feature since day one...

Perhaps this should be placed in a new issue, seeing as this one is closed and probably has trickled down the "pipe" in favour of open issues?

Hey everyone, this issue is still open. There's an open PR for this here: https://github.com/driftyco/ionic/pull/7185. However, it needs to be revisited. The latest goal is that we want our Segment component to be equal in design/functionality to the Material Design Tabs component, including the ability to swipe. A lot still needs to be done in order to achieve this. While we would love to spend some time on this, we are currently focusing on getting some bug fixes in and improving the existing framework. I will add this to the milestone though so I can remember to revisit it. Thanks for your patience, we know this is a highly sought feature and we definitely want to get it in the framework!

+1

+1 for Swipeable segments!

Any thoughts updates on how to change this to look like the tinder sliding tabs?
Could we remove the tabs on top or restyle them to look like the tinder UI or is there another way to do this?

The sliding tabs works fine as-is basically I would want to remove the tabs indicators and replace it with an icon instead.

Replacing this:

<ion-toolbar>
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
        <ion-segment-button value="first">
            Profiel
        </ion-segment-button>
        <ion-segment-button value="second">
            Voorstellen
        </ion-segment-button>
        <ion-segment-button value="third">
            Account
        </ion-segment-button>
    </ion-segment

Without loosing the "state" to highlight or display a certain icon.
Any thoughts?

Also what would be the best practice to loading the content of the sliding tabs?
Would one place the whole app inside this slidingpage.html or would it be better to have seperate pages and load them inside the tabs based on the page name?

captura de pantalla 2016-11-18 a las 10 08 56
:(

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

@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!

@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.

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

i was waiting for this feature as well :/

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

github Link


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

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

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!! 👍

this got any solution?

@adamdbradley @brandyscarney @mlynch @jgw96

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

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

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.

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. 🙂

Was this page helpful?
0 / 5 - 0 ratings

Related issues

SebastianGiro picture SebastianGiro  ·  3Comments

alan-agius4 picture alan-agius4  ·  3Comments

Nick-The-Uncharted picture Nick-The-Uncharted  ·  3Comments

Macstyg picture Macstyg  ·  3Comments

alexbainbridge picture alexbainbridge  ·  3Comments