{"id":15939555,"url":"https://github.com/afiqiqmal/custom-tablayout-android","last_synced_at":"2025-04-03T20:21:15.514Z","repository":{"id":85770182,"uuid":"60831584","full_name":"afiqiqmal/Custom-Tablayout-android","owner":"afiqiqmal","description":"Small hack on Custom TabLayout","archived":false,"fork":false,"pushed_at":"2016-08-20T17:27:06.000Z","size":5,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T08:34:17.086Z","etag":null,"topics":["android","custom-tablayout","tablayout"],"latest_commit_sha":null,"homepage":"","language":null,"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/afiqiqmal.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-10T07:40:12.000Z","updated_at":"2024-04-25T21:02:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"d3792329-9da4-426e-9bbf-6d51a3e3c478","html_url":"https://github.com/afiqiqmal/Custom-Tablayout-android","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"552eb94fcc485e625ab73932387f358d7b4c73d3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiqiqmal%2FCustom-Tablayout-android","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiqiqmal%2FCustom-Tablayout-android/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiqiqmal%2FCustom-Tablayout-android/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiqiqmal%2FCustom-Tablayout-android/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afiqiqmal","download_url":"https://codeload.github.com/afiqiqmal/Custom-Tablayout-android/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247070925,"owners_count":20878588,"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","custom-tablayout","tablayout"],"created_at":"2024-10-07T06:05:02.203Z","updated_at":"2025-04-03T20:21:15.488Z","avatar_url":"https://github.com/afiqiqmal.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom-Tablayout-android\n\n![alt tag](http://s33.postimg.org/scuddsfy7/Capture1.png)\n\u003cbr\u003e\n\u003cbr\u003e\n![alt tag](http://s33.postimg.org/jddnt20n3/Capture.png)\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cb\u003eSimple tablayout hack to custom text, background and etc..\u003c/b\u003e \u003cbr\u003e\n\nAbove images is where is tried to custom the tablayout to become the shape like that :D The designer design the UI like that and i have to came out a solution to custom it..\u003cbr\u003e\nNote: I create it by my own. If you have better solution, you can suggest me :D TQ..\n\u003cbr\u003e\n\u003cbr\u003e\nBelow is the base init to custom tab layout\n```java\n        Tablayout tabs = (TabLayout)findViewById(R.id.tabs);\n        //cast the selected tablayout to viewgroup\n        ViewGroup vg = (ViewGroup) tabs.getChildAt(0);\n        //count how many tabs in tablayout\n        int tabsCount = vg.getChildCount();\n        //iterative each tab\n        for (int j = 0; j \u003c tabsCount; j++) {\n            //Get all element in each tabs and cast to viewgroup\n            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);\n            //count the element in each tabs\n            int tabChildsCount = vgTab.getChildCount();\n            for (int i = 0; i \u003c tabChildsCount; i++) {\n                // cast to View\n                View tabViewChild = vgTab.getChildAt(i);\n            }\n        }\n```\n\n\u003cbr\u003e\n\u003cb\u003eHow to use\u003c/b\u003e\u003cbr\u003e\nTo change the font of the tabs. Just use \u003ci\u003eView instanceOf TextView\u003c/i\u003e\n\n```java\n        // using built-in tablayout function to change indicator and text color but limited\n        tabs.setTabTextColors(ContextCompat.getColor(this, R.color.md_grey_500), ContextCompat.getColor(this, R.color.white));\n        tabs.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.transparent));\n```\n\nCustom Tabs\n```java\n        // init your font\n        Typeface tf = Typeface.createFromAsset(getAssets(), \"fonts/knockout-htf49-liteweight.ttf\");\n        ViewGroup vg = (ViewGroup) tabs.getChildAt(0);\n        int tabsCount = vg.getChildCount();\n        for (int j = 0; j \u003c tabsCount; j++) {\n            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);\n            int tabChildsCount = vgTab.getChildCount();\n            for (int i = 0; i \u003c tabChildsCount; i++) {\n                View tabViewChild = vgTab.getChildAt(i);\n                // Get TextView Element\n                if (tabViewChild instanceof TextView) {\n                  // change font\n                  ((TextView) tabViewChild).setTypeface(tf);\n                  // change color\n                  ((TextView) tabViewChild).setTextColor(getResources().getColor(R.color.white));\n                  // change size\n                  ((TextView) tabViewChild).setTextSize(18);\n                  // change padding\n                  tabViewChild.setPadding(0, 0, 0, 0);\n                  //..... etc...\n                }\n            }\n        }\n```\n\u003cbr\u003e\n\nTo change background of the tabs\n```java\n        ViewGroup vg = (ViewGroup) tabs.getChildAt(0);\n        int tabsCount = vg.getChildCount();\n        for (int j = 0; j \u003c tabsCount; j++) {\n            View view = vg.getChildAt(j);\n            //change drawable for each tabs\n            view.setBackgroundResource(R.drawable.backgroundtabs);\n          \n            //if you want to diff drawable for each tabs for example tabs is 4\n            //if j == 0    view.setBackgroundResource(R.drawable.backgroundtabs1);  \n            //if j == 1    view.setBackgroundResource(R.drawable.backgroundtabs2);\n            //if j == 2    view.setBackgroundResource(R.drawable.backgroundtabs3);\n            //if j == 3    view.setBackgroundResource(R.drawable.backgroundtabs4);\n            \n            ViewGroup vgTab = (ViewGroup) view;\n            int tabChildsCount = vgTab.getChildCount();\n            for (int i = 0; i \u003c tabChildsCount; i++) {\n                View tabViewChild = vgTab.getChildAt(i);\n            }\n        }\n```\n\nAdd listener if you want to track the tab changes\n``` java\ntabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {\n            @Override\n            public void onTabSelected(TabLayout.Tab tab) {\n                // code what happen when tab is selected  \n            }\n            @Override\n            public void onTabUnselected(TabLayout.Tab tab) {\n                // code what happen when tab is unselected\n            }\n            @Override\n            public void onTabReselected(TabLayout.Tab tab) {\n                // code what happen when the tab is reselected\n            }\n        });\n```\n\nto change background of the tablayout\n```xml\n        \u003candroid.support.design.widget.TabLayout\n          android:layout_height=\"wrap_content\"\n          android:layout_width=\"match_parent\"\n          android:id=\"@+id/tabs\"\n          android:background=\"@drawable/stripetab\"    \u003c-- create stripe background like example image\n          app:tabTextAppearance=\"@style/CustomTabStyle\"/\u003e\n```\n\u003cbr\u003e\n\u003cb\u003eNOTES\u003c/b\u003e\u003cbr\u003e\nif you want to use scrollable mode ...etc, You need to set the tabs size (i dont know why). If not, it will looks ugly\n\nMy case: i hardcode the width to 120dp (you can change it or just calculate by your own for your perfect size)\n\n```java\n       int width = 120; // width - width of tabs \n       int tabsize = 120 * tabcount; // tabcount - number of tabs\n       ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);\n       if (sizeScreen() \u003c tabsize) \n           vgTab.getLayoutParams().width = dpToPx(120);\n       \n       public int dpToPx(int dp) {\n           DisplayMetrics displayMetrics = getResources().getDisplayMetrics();\n           return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));\n       }\n\n       public int sizeScreen(){\n           return (int)((Resources.getSystem().getDisplayMetrics().widthPixels)/ Resources.getSystem().getDisplayMetrics().density);\n       }\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\nThis is example of what im doing\n\n```java\n    private void setupTabLayout(final TabLayout tabs) {\n        tabs.setTabTextColors(ContextCompat.getColor(this, R.color.md_grey_500), ContextCompat.getColor(this, R.color.white));\n        tabs.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.transparent));\n\n        if (sizeScreen()\u003ctabsize){\n            tabs.setTabMode(TabLayout.MODE_SCROLLABLE);\n            tabs.setTabGravity(TabLayout.GRAVITY_FILL);\n        }\n        else{\n            tabs.setTabMode(TabLayout.MODE_FIXED);\n            tabs.setTabGravity(TabLayout.GRAVITY_FILL);\n        }\n\n        // CHANGE TAB TEXT FONT\n        Typeface tf = Typeface.createFromAsset(getAssets(), \"fonts/knockout-htf49-liteweight.ttf\");\n        ViewGroup vg = (ViewGroup) tabs.getChildAt(0);\n        int tabsCount = vg.getChildCount();\n        for (int j = 0; j \u003c tabsCount; j++) {\n            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);\n\n            if (j==0){\n                View view = vg.getChildAt(j);\n                view.setBackgroundResource(R.drawable.backgroundtabs);\n            }\n\n            if (sizeScreen()\u003ctabsize) {\n                vgTab.getLayoutParams().width = dpToPx(120);\n            }\n\n            int tabChildsCount = vgTab.getChildCount();\n            for (int i = 0; i \u003c tabChildsCount; i++) {\n                View tabViewChild = vgTab.getChildAt(i);\n                if (tabViewChild instanceof TextView) {\n                    ((TextView) tabViewChild).setTypeface(tf);\n                    ((TextView) tabViewChild).setTextSize(18);\n                    ((TextView) tabViewChild).setAllCaps(true);\n                    ((TextView) tabViewChild).setSingleLine(true);\n                    //set the text to marquee if text longer than tabs size\n                    ((TextView) tabViewChild).setEllipsize(TextUtils.TruncateAt.MARQUEE);\n                    ((TextView) tabViewChild).setMarqueeRepeatLimit(100);\n                    if (j==0){\n                        tabViewChild.setPadding(0, 0, 0, 0);\n                    }\n                    else {\n                        tabViewChild.setPadding(0, padding, 0, 0);\n                    }\n                }\n            }\n        }\n        \n        // add listener when tab is change\n        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {\n            ViewGroup vg = (ViewGroup) tabs.getChildAt(0);\n\n            @Override\n            public void onTabSelected(TabLayout.Tab tab) {\n                ViewGroup vgTab = (ViewGroup) vg.getChildAt(tab.getPosition());\n                if (tab.getPosition()==0)\n                    vg.getChildAt(tab.getPosition()).setBackgroundResource(R.drawable.backgroundtabs);\n\n                else if (tab.getPosition()==tabcount-1)\n                    vg.getChildAt(tab.getPosition()).setBackgroundResource(R.drawable.backgroundtabs_last);\n\n                else\n                    vg.getChildAt(tab.getPosition()).setBackgroundResource(R.drawable.backgroundtabs_middle);\n\n                int tabChildsCount = vgTab.getChildCount();\n                for (int i = 0; i \u003c tabChildsCount; i++) {\n                    View tabViewChild = vgTab.getChildAt(i);\n                    if (tabViewChild instanceof TextView) {\n                        tabViewChild.setPadding(0, 0, 0, 0);\n                    }\n                }\n                viewPager.setCurrentItem(tab.getPosition());\n            }\n\n            @Override\n            public void onTabUnselected(TabLayout.Tab tab) {\n                ViewGroup vgTab = (ViewGroup) vg.getChildAt(tab.getPosition());\n                vg.getChildAt(tab.getPosition()).setBackgroundResource(0);\n                int tabChildsCount = vgTab.getChildCount();\n                for (int i = 0; i \u003c tabChildsCount; i++) {\n                    View tabViewChild = vgTab.getChildAt(i);\n                    if (tabViewChild instanceof TextView) {\n                        tabViewChild.setPadding(0, padding, 0, 0);\n                    }\n                }\n            }\n\n            @Override\n            public void onTabReselected(TabLayout.Tab tab) {\n\n            }\n        });\n    }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafiqiqmal%2Fcustom-tablayout-android","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafiqiqmal%2Fcustom-tablayout-android","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafiqiqmal%2Fcustom-tablayout-android/lists"}