https://github.com/afiqiqmal/custom-tablayout-android
Small hack on Custom TabLayout
https://github.com/afiqiqmal/custom-tablayout-android
android custom-tablayout tablayout
Last synced: about 1 year ago
JSON representation
Small hack on Custom TabLayout
- Host: GitHub
- URL: https://github.com/afiqiqmal/custom-tablayout-android
- Owner: afiqiqmal
- Created: 2016-06-10T07:40:12.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-20T17:27:06.000Z (almost 10 years ago)
- Last Synced: 2025-02-09T08:34:17.086Z (over 1 year ago)
- Topics: android, custom-tablayout, tablayout
- Homepage:
- Size: 4.88 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom-Tablayout-android
Simple tablayout hack to custom text, background and etc..
Above 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..
Note: I create it by my own. If you have better solution, you can suggest me :D TQ..
Below is the base init to custom tab layout
```java
Tablayout tabs = (TabLayout)findViewById(R.id.tabs);
//cast the selected tablayout to viewgroup
ViewGroup vg = (ViewGroup) tabs.getChildAt(0);
//count how many tabs in tablayout
int tabsCount = vg.getChildCount();
//iterative each tab
for (int j = 0; j < tabsCount; j++) {
//Get all element in each tabs and cast to viewgroup
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
//count the element in each tabs
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
// cast to View
View tabViewChild = vgTab.getChildAt(i);
}
}
```
How to use
To change the font of the tabs. Just use View instanceOf TextView
```java
// using built-in tablayout function to change indicator and text color but limited
tabs.setTabTextColors(ContextCompat.getColor(this, R.color.md_grey_500), ContextCompat.getColor(this, R.color.white));
tabs.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.transparent));
```
Custom Tabs
```java
// init your font
Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/knockout-htf49-liteweight.ttf");
ViewGroup vg = (ViewGroup) tabs.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
// Get TextView Element
if (tabViewChild instanceof TextView) {
// change font
((TextView) tabViewChild).setTypeface(tf);
// change color
((TextView) tabViewChild).setTextColor(getResources().getColor(R.color.white));
// change size
((TextView) tabViewChild).setTextSize(18);
// change padding
tabViewChild.setPadding(0, 0, 0, 0);
//..... etc...
}
}
}
```
To change background of the tabs
```java
ViewGroup vg = (ViewGroup) tabs.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
View view = vg.getChildAt(j);
//change drawable for each tabs
view.setBackgroundResource(R.drawable.backgroundtabs);
//if you want to diff drawable for each tabs for example tabs is 4
//if j == 0 view.setBackgroundResource(R.drawable.backgroundtabs1);
//if j == 1 view.setBackgroundResource(R.drawable.backgroundtabs2);
//if j == 2 view.setBackgroundResource(R.drawable.backgroundtabs3);
//if j == 3 view.setBackgroundResource(R.drawable.backgroundtabs4);
ViewGroup vgTab = (ViewGroup) view;
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
}
}
```
Add listener if you want to track the tab changes
``` java
tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// code what happen when tab is selected
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// code what happen when tab is unselected
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// code what happen when the tab is reselected
}
});
```
to change background of the tablayout
```xml
```
NOTES
if you want to use scrollable mode ...etc, You need to set the tabs size (i dont know why). If not, it will looks ugly
My case: i hardcode the width to 120dp (you can change it or just calculate by your own for your perfect size)
```java
int width = 120; // width - width of tabs
int tabsize = 120 * tabcount; // tabcount - number of tabs
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
if (sizeScreen() < tabsize)
vgTab.getLayoutParams().width = dpToPx(120);
public int dpToPx(int dp) {
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
}
public int sizeScreen(){
return (int)((Resources.getSystem().getDisplayMetrics().widthPixels)/ Resources.getSystem().getDisplayMetrics().density);
}
```
This is example of what im doing
```java
private void setupTabLayout(final TabLayout tabs) {
tabs.setTabTextColors(ContextCompat.getColor(this, R.color.md_grey_500), ContextCompat.getColor(this, R.color.white));
tabs.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.transparent));
if (sizeScreen()