Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove TabLayout left and right padding

I am using tab layout and here is my code

  <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"

        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"

        android:clipToPadding="false"
        />

Adding tab like this

//Creating tab

TextView tab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tab.setText("Home"); tab.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_home_black_24dp, 0, 0); tabLayout.addTab(tabLayout.newTab().setCustomView(tab));

TextView tab2 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab2.setText("Report");
tab2.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_trending_up_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab2));

TextView tab3 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab3.setText("Medicine");
tab3.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_home_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab3));

TextView tab4 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab4.setText("More");
tab4.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_trending_up_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab4));

and here is my phone screenshot

https://i.sstatic.net/kYNs1.png

Two things 1.How can I remove space which is taking from left and right of tab layout ?

2.How can I change the color of text and icon of active and inactive tab

like image 445
Nitesh Sharma Avatar asked Apr 20 '26 04:04

Nitesh Sharma


1 Answers

  1. to remove Padding from Tabs in Tab Layout

    In your TabLayout you have to set tabPaddingEnd and tabPaddingStart to 0dp.

    <android.support.design.widget.TabLayout
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"/>
    
  2. change color of icon of the selected tab of TabLayout by

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
    
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    super.onTabSelected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                    super.onTabReselected(tab);
                }
            }
    );
    
like image 182
Akshay Tilekar Avatar answered Apr 21 '26 18:04

Akshay Tilekar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!