{"id":18532240,"url":"https://github.com/weibeld/androidtabsexample","last_synced_at":"2025-04-09T14:31:24.415Z","repository":{"id":43630218,"uuid":"71797323","full_name":"weibeld/AndroidTabsExample","owner":"weibeld","description":"An Example Android Application with Tabs","archived":false,"fork":false,"pushed_at":"2016-10-24T15:47:40.000Z","size":155,"stargazers_count":18,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T07:56:54.499Z","etag":null,"topics":["android","android-ui","tablayout-tabs"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weibeld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-24T14:27:28.000Z","updated_at":"2024-11-02T18:13:42.000Z","dependencies_parsed_at":"2022-07-08T22:30:25.992Z","dependency_job_id":null,"html_url":"https://github.com/weibeld/AndroidTabsExample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weibeld%2FAndroidTabsExample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weibeld%2FAndroidTabsExample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weibeld%2FAndroidTabsExample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weibeld%2FAndroidTabsExample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weibeld","download_url":"https://codeload.github.com/weibeld/AndroidTabsExample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055105,"owners_count":21040122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-ui","tablayout-tabs"],"created_at":"2024-11-06T19:05:08.253Z","updated_at":"2025-04-09T14:31:23.996Z","avatar_url":"https://github.com/weibeld.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"Android Tabs Example\n====================\n\nExample app showing how to implement tabs in Android.\n\n![App Screenshot](README_res/screenshot_small.png)\n\n\nTable of Contents\n-----------------\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Usage](#usage)\n- [Branches](#branches)\n- [Basics](#basics)\n- [Swipe Views](#swipe-views)\n- [Tabs](#tabs)\n  - [TabLayout Tabs](#tablayout-tabs)\n  - [ActionBar Tabs](#actionbar-tabs)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n\nUsage\n-----\n\n1. Import project into Android Studio\n2. Switch to the desired Git branch\n3. Hit *Run*\n\n\nBranches\n--------\n\nEach branch contains a fully working configuration:\n\n- [01_swipe_views_and_actionbar](https://github.com/weibeld/AndroidTabsExample/tree/01_swipe_views_and_actionbar):\nActionBar as app bar, ViewPager (swipe views), no tabs\n- [02_swipe_views_and_pagertitlestrip_and_actionbar](https://github.com/weibeld/AndroidTabsExample/tree/02_swipe_views_and_pagertitlestrip_and_actionbar): ActionBar as app bar, ViewPager (swipe views) with PagerTitleStrip (titles of current, previous, and next page), no tabs\n- [03_actionbar_tabs_DEPRECATED](https://github.com/weibeld/AndroidTabsExample/tree/03_actionbar_tabs_DEPRECATED): ActionBar as app bar, ViewPager (swipe views), **ActionBar tabs** (combined with ViewPager)\n- [04_swipe_views_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/04_swipe_views_and_toolbar): Toolbar as app bar, ViewPager (swipe views), no tabs\n- [05_swipe_views_and_pagertitlestrip_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/05_swipe_views_and_pagertitlestrip_and_toolbar): Toolbar as app bar, ViewPager (swipe views) with PagerTitleStrip (titles of current, previous, and next page), no tabs\n- [06_tablayout_tabs_fixed_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/06_tablayout_tabs_fixed_and_toolbar): Toolbar as app bar, ViewPager (swipe views), **fixed TabLayout tabs** (combined with ViewPager)\n- [07_tablayout_tabs_scrollable_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/07_tablayout_tabs_scrollable_and_toolbar): Toolbar as app bar, ViewPager (swipe views), **scrollable TabLayout tabs** (combined with ViewPager)\n\n\nBasics\n------\n\nTypically, an implementation of tabs in Android consists of:\n\n1. Swipe views\n2. Tabs UI element\n\nThese are two independent navigation patterns, but they can be combined with each other.\n\nIn general: swipe views *can (but don't need to)* be combined with tabs, and tabs *can (but don't need to)* be combined with swipe views. However, tabs benefit tremendously from being combined with swipe views, as explained below.\n\n\nSwipe Views\n-----------\n\nSwipe views allow to flip through a set of \"pages\" by swiping horizontally on the screen.\n\nCombined with tabs, this allows the user to switch to the next or previous tab by just swiping anywhere on the screen, rather than having to click on the tab itself. \n\n- Swipe views are implemented by the [ViewPager](https://developer.android.com/reference/android/support/v4/view/ViewPager.html) ViewGroup (declared in the activity's layout XML)\n- A page is typically implemented as a [Fragment](https://developer.android.com/reference/android/support/v4/view/ViewPager.html)\n- A [PagerAdapter](https://developer.android.com/reference/android/support/v4/view/PagerAdapter.html) supplies the ViewPager with the pages (fragments) to display. In the case of using fragments as pages, this PagerAdapter is a [FragmentPagerAdapter](https://developer.android.com/reference/android/support/v13/app/FragmentPagerAdapter.html) or [FragmentStatePagerAdapter](https://developer.android.com/reference/android/support/v13/app/FragmentStatePagerAdapter.html)\n\nThe swipe views architecture is illustrated below:\n\n![Swipe Views Architecture](README_res/swipe_views.png)\n\nSee branches [01_swipe_views_and_actionbar](https://github.com/weibeld/AndroidTabsExample/tree/01_swipe_views_and_actionbar) and [04_swipe_views_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/04_swipe_views_and_toolbar) for code examples.\n\n**References:**\n\n- https://developer.android.com/training/implementing-navigation/lateral.html#horizontal-paging\n- https://developer.android.com/training/design-navigation/descendant-lateral.html#paging\n- https://developer.android.com/design/patterns/swipe-views.html\n\n\nTabs\n----\n\nThere are currently two ways to implement a tabs UI element in Android:\n\n1. **TabLayout tabs** using [TabLayout](https://developer.android.com/reference/android/support/design/widget/TabLayout.html) from the [*Design Support Library*](https://guides.codepath.com/android/Design-Support-Library)\n2. **ActionBar tabs** using the ActionBar's [NAVIGATION_MODE_TABS](https://developer.android.com/reference/android/app/ActionBar.html#NAVIGATION_MODE_TABS) feature **(DEPRECATED)**\n\n\n### TabLayout Tabs\n\nThis is the preferred approach as it's easier to implement than ActionBar tabs and does not rely on an ActionBar.\n\nTabLayout tabs are especially easy to implement if they are used in combination with a formerly implemented ViewPager (see [Swipe Views](#swipe-views)), because then the tabs can be automatically populated by the ViewPager (i.e. no need to create and add the individual tabs manually). This is shown in the following:\n\n1. In the activity's layout XML, add a [TabLayout](https://developer.android.com/reference/android/support/design/widget/TabLayout.html) element above the ViewPager element (and below the Toolbar element, if a Toolbar is used)\n2. In the activity's onCreate method, call [setupWithViewPager(ViewPager)](https://developer.android.com/reference/android/support/design/widget/TabLayout.html#setupWithViewPager(android.support.v4.view.ViewPager)) on the TabLayout to populate and integrate the TabLayout with the ViewPager (requires that [getPageTitle](https://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageTitle(int)) of the PagerAdapter is overriden)\n\n**Note:** to use TabLayout, the *Design Support Library* must be added to the project. In the module build.gradle file, do:\n\n```\ndependencies {\n    compile 'com.android.support:support-v13:24.2.1'\n}\n```\n\nSee branches [06_tablayout_tabs_fixed_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/06_tablayout_tabs_fixed_and_toolbar) and [07_tablayout_tabs_scrollable_and_toolbar](https://github.com/weibeld/AndroidTabsExample/tree/07_tablayout_tabs_scrollable_and_toolbar) for code examples.\n\n**References:**\n\n- https://developer.android.com/reference/android/support/design/widget/TabLayout.html\n\n\n\n### ActionBar Tabs\n\n**Note that this approach was DEPRECATED in API level 21.**\n\nThis requires the usage of the old-fashioned ActionBar as the app bar (rather than the \"modern\" Toolbar).\n\nTo implement ActionBar tabs, the following steps are needed in the activity's onCreate method:\n\n1. Set ActionBar to tab mode by [setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)](https://developer.android.com/reference/android/app/ActionBar.html#setNavigationMode(int))\n2. Implement an [ActionBar.TabListener](https://developer.android.com/reference/android/app/ActionBar.TabListener.html)\n3. Create tabs as [ActionBar.Tabs](https://developer.android.com/reference/android/app/ActionBar.Tab.html) and add them to the ActionBar\n\nIf the tabs are used in combination with swipe views (see [above](#swipe-views)), the tabs must be bidirectionally integrated with the ViewPager:\n\n1. In [onTabSelected](https://developer.android.com/reference/android/app/ActionBar.TabListener.html#onTabSelected(android.app.ActionBar.Tab, android.app.FragmentTransaction)) of the ActionBar.TabListener, update the current page of the ViewPager ([setCurrentItem](https://developer.android.com/reference/android/support/v4/view/ViewPager.html#setCurrentItem(int)))\n2. Implement a [ViewPager.SimpleOnPageChangeListener](https://developer.android.com/reference/android/support/v4/view/ViewPager.SimpleOnPageChangeListener.html), and in its [onPageSelected](https://developer.android.com/reference/android/support/v4/view/ViewPager.SimpleOnPageChangeListener.html#onPageSelected(int)) method update the current tab of the ActionBar ([setSelectedNavigationItem](https://developer.android.com/reference/android/app/ActionBar.html#setSelectedNavigationItem(int)))\n\nThis ensures that when the user clicks on a tab, the ViewPager switches to the corresponding page (1), and vice versa, when the user swipes to another page, the corresponding tab is selected in the ActionBar (2).\n\nSee branch [03_actionbar_tabs_DEPRECATED](https://github.com/weibeld/AndroidTabsExample/tree/03_actionbar_tabs_DEPRECATED) for code examples.\n\n**References:**\n\n- https://developer.android.com/training/implementing-navigation/lateral.html#tabs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweibeld%2Fandroidtabsexample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweibeld%2Fandroidtabsexample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweibeld%2Fandroidtabsexample/lists"}