{"id":13396183,"url":"https://github.com/ogaclejapan/SmartTabLayout","last_synced_at":"2025-03-13T22:31:48.836Z","repository":{"id":27320357,"uuid":"30794722","full_name":"ogaclejapan/SmartTabLayout","owner":"ogaclejapan","description":"A custom ViewPager title strip which gives continuous feedback to the user when scrolling","archived":false,"fork":false,"pushed_at":"2020-06-03T06:02:33.000Z","size":14671,"stargazers_count":7088,"open_issues_count":127,"forks_count":1343,"subscribers_count":191,"default_branch":"master","last_synced_at":"2024-07-31T18:16:46.839Z","etag":null,"topics":["android","smarttablayout","viewpager"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ogaclejapan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-14T11:25:51.000Z","updated_at":"2024-07-26T04:14:33.000Z","dependencies_parsed_at":"2022-07-17T05:16:02.319Z","dependency_job_id":null,"html_url":"https://github.com/ogaclejapan/SmartTabLayout","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogaclejapan%2FSmartTabLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogaclejapan%2FSmartTabLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogaclejapan%2FSmartTabLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogaclejapan%2FSmartTabLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ogaclejapan","download_url":"https://codeload.github.com/ogaclejapan/SmartTabLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243493934,"owners_count":20299745,"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","smarttablayout","viewpager"],"created_at":"2024-07-30T18:00:42.021Z","updated_at":"2025-03-13T22:31:48.293Z","avatar_url":"https://github.com/ogaclejapan.png","language":"Java","readme":"# SmartTabLayout\n[![Maven Central][maven_central_badge_svg]][maven_central_badge_app] [![Android Arsenal][android_arsenal_badge_svg]][android_arsenal_badge_link] [![Android Weekly][android_weekly_badge_svg]][android_weekly_badge_link]\n\n![icon][demo_icon]\n\nA custom ViewPager title strip which gives continuous feedback to the user when scrolling.\n\nThis library has been added some features and utilities based on [android-SlidingTabBasic][google_slidingtabbasic] project of Google Samples.\n\n\n![SmartTabLayout Demo1][demo1_gif] ![SmartTabLayout Demo2][demo2_gif]\n![SmartTabLayout Demo3][demo3_gif] ![SmartTabLayout Demo4][demo4_gif]\n![SmartTabLayout Demo5][demo5_gif] ![SmartTabLayout Demo6][demo6_gif]\n![SmartTabLayout Demo7][demo7_gif]\n\n\nTry out the sample application on the Play Store.\n\n[![Get it on Google Play][googleplay_store_badge]][demo_app]\n\n\n# Usage\n\n_(For a working implementation of this project see the demo/ folder.)_\n\nAdd the dependency to your build.gradle.\n\n```\n// For androidx (1.0.0)\ndependencies {\n    compile 'com.ogaclejapan.smarttablayout:library:2.0.0@aar'\n\n    //Optional: see how to use the utility.\n    compile 'com.ogaclejapan.smarttablayout:utils-v4:2.0.0@aar'\n}\n\n// For legacy android support library (28.0.0)\ndependencies {\n    compile 'com.ogaclejapan.smarttablayout:library:1.7.0@aar'\n\n    //Optional: see how to use the utility.\n    compile 'com.ogaclejapan.smarttablayout:utils-v4:1.7.0@aar'\n\n    //Deprecated since 1.7.0\n    compile 'com.ogaclejapan.smarttablayout:utils-v13:1.7.0@aar'\n}\n```\n\nInclude the SmartTabLayout widget in your layout.\nThis should usually be placed above the ViewPager it represents.\n\n```xml\n\n\u003ccom.ogaclejapan.smarttablayout.SmartTabLayout\n    android:id=\"@+id/viewpagertab\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"48dp\"\n    app:stl_indicatorAlwaysInCenter=\"false\"\n    app:stl_indicatorWithoutPadding=\"false\"\n    app:stl_indicatorInFront=\"false\"\n    app:stl_indicatorInterpolation=\"smart\"\n    app:stl_indicatorGravity=\"bottom\"\n    app:stl_indicatorColor=\"#40C4FF\"\n    app:stl_indicatorThickness=\"4dp\"\n    app:stl_indicatorWidth=\"auto\"\n    app:stl_indicatorCornerRadius=\"2dp\"\n    app:stl_overlineColor=\"#4D000000\"\n    app:stl_overlineThickness=\"0dp\"\n    app:stl_underlineColor=\"#4D000000\"\n    app:stl_underlineThickness=\"1dp\"\n    app:stl_dividerColor=\"#4D000000\"\n    app:stl_dividerThickness=\"1dp\"\n    app:stl_defaultTabBackground=\"?attr/selectableItemBackground\"\n    app:stl_defaultTabTextAllCaps=\"true\"\n    app:stl_defaultTabTextColor=\"#FC000000\"\n    app:stl_defaultTabTextSize=\"12sp\"\n    app:stl_defaultTabTextHorizontalPadding=\"16dp\"\n    app:stl_defaultTabTextMinWidth=\"0dp\"\n    app:stl_distributeEvenly=\"false\"\n    app:stl_clickable=\"true\"\n    app:stl_titleOffset=\"24dp\"\n    app:stl_drawDecorationAfterTab=\"false\"\n    /\u003e\n\n\u003candroidx.viewpager.widget.ViewPager\n    android:id=\"@+id/viewpager\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:layout_below=\"@id/viewpagertab\"\n    /\u003e\n\n```\n\nIn your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager.\n(If you use a utility together, you can easily add items to PagerAdapter)\n\ne.g. ViewPager of v4.Fragment\n\n```java\n\nFragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(\n        getSupportFragmentManager(), FragmentPagerItems.with(this)\n        .add(R.string.titleA, PageFragment.class)\n        .add(R.string.titleB, PageFragment.class)\n        .create());\n\nViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);\nviewPager.setAdapter(adapter);\n\nSmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);\nviewPagerTab.setViewPager(viewPager);\n\n```\n\n(Optional) If you use an OnPageChangeListener with your view pager you should set it in the widget rather than on the pager directly.\n\n\n```java\n\nviewPagerTab.setOnPageChangeListener(mPageChangeListener);\n\n```\n\n(Optional) Using the FragmentPagerItemAdapter of utility, you will be able to get a position in the Fragment side.\n\n```java\n\nint position = FragmentPagerItem.getPosition(getArguments());\n\n```\n\nThis position will help to implement the parallax scrolling header that contains the ViewPager :P\n\n# Attributes\n\nThere are several attributes you can set:\n\n| attr | description |\n|:---|:---|\n| stl_indicatorAlwaysInCenter | If set to true, active tab is always displayed in center (Like Newsstand google app), default false |\n| stl_indicatorWithoutPadding | If set to true, draw the indicator without padding of tab, default false |\n| stl_indicatorInFront | Draw the indicator in front of the underline, default false |\n| stl_indicatorInterpolation | Behavior of the indicator: 'linear' or 'smart' |\n| stl_indicatorGravity | Drawing position of the indicator: 'bottom' or 'top' or 'center', default 'bottom' |\n| stl_indicatorColor | Color of the indicator |\n| stl_indicatorColors | Multiple colors of the indicator, can set the color for each tab |\n| stl_indicatorThickness | Thickness of the indicator |\n| stl_indicatorWidth | Width of the indicator, default 'auto' |\n| stl_indicatorCornerRadius | Radius of rounded corner the indicator |\n| stl_overlineColor | Color of the top line |\n| stl_overlineThickness | Thickness of the top line |\n| stl_underlineColor | Color of the bottom line |\n| stl_underlineThickness | Thickness of the bottom line |\n| stl_dividerColor | Color of the dividers between tabs |\n| stl_dividerColors | Multiple colors of the dividers between tabs, can set the color for each tab |\n| stl_dividerThickness | Thickness of the divider |\n| stl_defaultTabBackground | Background drawable of each tab. In general it set the StateListDrawable |\n| stl_defaultTabTextAllCaps | If set to true, all tab titles will be upper case, default true |\n| stl_defaultTabTextColor | Text color of the tab that was included by default |\n| stl_defaultTabTextSize | Text size of the tab that was included by default |\n| stl_defaultTabTextHorizontalPadding | Text layout padding of the tab that was included by default |\n| stl_defaultTabTextMinWidth | Minimum width of tab |\n| stl_customTabTextLayoutId | Layout ID defined custom tab. If you do not specify a layout, use the default tab |\n| stl_customTabTextViewId | Text view ID in a custom tab layout. If you do not define with customTabTextLayoutId, does not work |\n| stl_distributeEvenly | If set to true, each tab is given the same weight, default false |\n| stl_clickable | If set to false, disable the selection of a tab click, default true |\n| stl_titleOffset | If set to 'auto_center', the slide position of the tab in the middle it will keep to the center. If specify a dimension it will be offset from the left edge, default 24dp |\n| stl_drawDecorationAfterTab | Draw the decoration(indicator and lines) after drawing of tab, default false |\n\n*__Notes:__ Both 'stl_indicatorAlwaysInCenter' and 'stl_distributeEvenly' if it is set to true, it will throw UnsupportedOperationException.*\n\n# How to customize the tab\n\nThe customization of tab There are three ways.\n\n* Customize the attribute\n* SmartTabLayout#setCustomTabView(int layoutResId, int textViewId)\n* SmartTabLayout#setCustomTabView(TabProvider provider)\n\nIf set the TabProvider, can build a view for each tab.\n\n```java\n\npublic class SmartTabLayout extends HorizontalScrollView {\n\n    //...\n\n    /**\n     * Create the custom tabs in the tab layout. Set with\n     * {@link #setCustomTabView(com.ogaclejapan.smarttablayout.SmartTabLayout.TabProvider)}\n     */\n    public interface TabProvider {\n\n        /**\n         * @return Return the View of {@code position} for the Tabs\n         */\n        View createTabView(ViewGroup container, int position, PagerAdapter adapter);\n\n    }\n\n    //...\n}\n\n```\n\n# How to use the utility\n\nUtility has two types available to suit the Android support library.\n\n* utils-v4 library contains the PagerAdapter implementation class for _androidx.fragment.app.Fragment_\n* (Deprecated) utils-v13 library contains the PagerAdapter implementation class for _android.app.Fragment_\n\nThe two libraries have different Android support libraries that depend,\nbut implemented functionality is the same.\n\n## PagerAdapter for View-based Page\n\n```java\n\nViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)\n        .add(R.string.title, R.layout.page)\n        .add(\"title\", R.layout.page)\n        .create());\n\nviewPager.setAdapter(adapter);\n\n//...\n\npublic void onPageSelected(int position) {\n\n  //.instantiateItem() from until .destroyItem() is called it will be able to get the View of page.\n  View page = adapter.getPage(position);\n\n}\n\n\n```\n\n## PagerAdapter for Fragment-based Page\n\nFragment-based PagerAdapter There are two implementations.\nPlease differences refer to the library documentation for Android.\n\n* FragmentPagerItemAdapter extends FragmentPagerAdapter\n* FragmentStatePagerItemAdapter extends FragmentStatePagerAdapter\n\n```java\n\nFragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(\n        getSupportFragmentManager(), FragmentPagerItems.with(this)\n        .add(R.string.title, PageFragment.class),\n        .add(R.string.title, WithArgumentsPageFragment.class, new Bundler().putString(\"key\", \"value\").get()),\n        .add(\"title\", PageFragment.class)\n        .create());\n\nviewPager.setAdapter(adapter);\n\n//...\n\npublic void onPageSelected(int position) {\n\n  //.instantiateItem() from until .destoryItem() is called it will be able to get the Fragment of page.\n  Fragment page = adapter.getPage(position);\n\n}\n\n```\n\n*__Notes:__ If using fragment inside a ViewPager, Must be use [Fragment#getChildFragmentManager()](https://developer.android.com/reference/androidx/fragment/app/Fragment.html#getChildFragmentManager).*\n\n\n# Looking for iOS ?\n Check [WormTabStrip](https://github.com/EzimetYusup/WormTabStrip) out.\n \n# LICENSE\n\n```\nCopyright (C) 2015 ogaclejapan\nCopyright (C) 2013 The Android Open Source Project\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n\n[demo1_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo1.gif\n[demo2_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo2.gif\n[demo3_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo3.gif\n[demo4_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo4.gif\n[demo5_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo5.gif\n[demo6_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo6.gif\n[demo7_gif]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/demo7.gif\n[demo_app]: https://play.google.com/store/apps/details?id=com.ogaclejapan.smarttablayout.demo\u0026referrer=utm_source%3Dgithub\n[demo_icon]: https://raw.githubusercontent.com/ogaclejapan/SmartTabLayout/master/art/icon.png\n[googleplay_store_badge]: http://www.android.com/images/brand/get_it_on_play_logo_large.png\n[maven_central_badge_svg]: https://maven-badges.herokuapp.com/maven-central/com.ogaclejapan.smarttablayout/library/badge.svg?style=flat\n[maven_central_badge_app]: https://maven-badges.herokuapp.com/maven-central/com.ogaclejapan.smarttablayout/library\n[android_arsenal_badge_svg]: https://img.shields.io/badge/Android%20Arsenal-SmartTabLayout-brightgreen.svg?style=flat\n[android_arsenal_badge_link]: http://android-arsenal.com/details/1/1683\n[android_weekly_badge_svg]: https://img.shields.io/badge/AndroidWeekly-%23148-blue.svg\n[android_weekly_badge_link]: http://androidweekly.net/issues/issue-148\n[qiitanium]: https://github.com/ogaclejapan/Qiitanium\n[google_slidingtabbasic]: https://github.com/googlesamples/android-SlidingTabsBasic\n","funding_links":[],"categories":["Index `(light-weight pages)`","TabLayout","Index","Java","Libs","viewpager"],"sub_categories":["\u003cA NAME=\"Widget\"\u003e\u003c/A\u003eWidget"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogaclejapan%2FSmartTabLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fogaclejapan%2FSmartTabLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogaclejapan%2FSmartTabLayout/lists"}