Sliding Tabs for the web

More and more companies are ditching their native Android apps in favour of a web app or responsive website. There are only a few reasons left to invest time in developing a native Android app. Connecting a Bluetooth peripheral for example is difficult to do from the browser. Another example is one of Androids UI components, namely the sliding tabs. Once implemented correctly, sliding tabs really give your app some extra swag. You’ll probably know them from the Google Play Store. Categories are listed horizontally as tabs, but it is also possible to switch categories by swiping horizontally.

An example of Sliding Tabs in the Play Store app

An example of Sliding Tabs in the Play Store app

Last time I developed an app for android using the sliding tabs it took way too much time to get working, so I converted this particular UI component of android in HTML and JS , making it available for responsive websites as well.

You can find a working example and the code on this codepen, it relies on jQuery and HammerJS as well.

By the way, I wouldn’t directly use this code in any production, it’s just a proof-of-concept.