How to set Custom tab in tab layout in android

Question

actvity_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:background="#ef9f9f"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

// MainActivity :

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    public ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
                .inflate(R.layout.custom_tab, null, false);

        final LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
        final LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
        final TextView text1 = (TextView) headerView.findViewById(R.id.tvtab1);
        final TextView text2 = (TextView) headerView.findViewById(R.id.tvtab2);
        tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
        tabLayout.getTabAt(1).setCustomView(linearLayout2);


        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

                if (tab.getText().equals("ONE")) {

                    text1.setVisibility(View.VISIBLE);
                } else {

                    text2.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

                if (tab.getText().equals("ONE")) {
                    text1.setVisibility(View.GONE);
                } else {
                    text2.setVisibility(View.GONE);
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

}

This is my code I want to set custom tab like when i select the first tab then indicator and tab width or weight of the first tab I should increase and second tab decrease show only image not text same if we select the second tab then first tab indicator or weight should decrease and second tab text and image should visibility on:

my current Screen:

in this u can see that tab one is selected image and text are visible tab second is not unselected so the only image is visible no text:

but my Expected tab is like this :

look in this when we select tab then indicator and width of tab increase and tab 2 decreases please suggest me how I will achieve this .thanx

Answer 1

Create Custom tab layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/tab_text_color_selector"
        android:textSize="@dimen/medium_text"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginStart="4dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:textColor="@color/colorPrimary"
        android:textSize="@dimen/medium_text"
        android:textStyle="bold"
        android:visibility="gone" />
</LinearLayout>

tabTitles = new String[]{getString(R.string.main_tab_call), getString(R.string.main_tab_chat), getString(R.string.main_tab_contact)};

  private void setupTabIcons() {
    for (int i = 0; i < tabTitles.length; i++) {
        mTabLayout.getTabAt(i).setCustomView(prepareTabView(i));
    }
}


private View prepareTabView(int pos) {
    View view = getLayoutInflater().inflate(R.layout.custom_tab, null);
    TextView tv_title = view.findViewById(R.id.tv_title);
    TextView tv_count = view.findViewById(R.id.tv_count);
    tv_title.setText(tabTitles[pos]);
    return view;
}

Answer 2

I copied the solution from here, Maybe it will be useful for you

 Display display = getWindowManager().getDefaultDisplay();
    int width = display.getWidth();

    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

   TabHost mTabHost = getTabHost();

   mTabHost.addTab(mTabHost.newTabSpec("tab_test1")
           .setIndicator((""),getResources().getDrawable(R.drawable.mzl_05))
     .setContent(new Intent(this, NearBy.class)));
   mTabHost.addTab(mTabHost.newTabSpec("tab_test2")
           .setIndicator((""),getResources().getDrawable(R.drawable.mzl_08))
     .setContent(new Intent(this, SearchBy.class)));
           mTabHost.setCurrentTab(0);
           mTabHost.getTabWidget().getChildAt(0).setLayoutParams(new
             LinearLayout.LayoutParams((width/2)-2,50));
      mTabHost.getTabWidget().getChildAt(1).setLayoutParams(new
                 LinearLayout.LayoutParams((width/2)-2,50));

You can try another code tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 50;

Answer 3

Use Below Code .It is have two option. (i) Create custom TabLayout (ii) Change custom tablayout text color

(i) Custom TabLayout

 <TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tab"
android:layout_width="match_parent"
android:textSize="15sp"
android:gravity="center"
android:textColor="@color/txtbox_text_color_darek"
android:layout_height="match_parent"
/>

Source code is:

        TextView tabOne = (TextView) 
        LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("KPIs" + " ");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.alert_gray, 
        0);
        Objects.requireNonNull(tabLayout.getTabAt(4)).setCustomView(tabOne);

(II) Change Color

     private void custom_tablayout_select_unselected_four(final TextView tabOne) {

     tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            if (Objects.requireNonNull(tabLayout.getTabAt(4)).isSelected()) {
                tabOne.setTextColor(getResources().getColor(R.color.text_color_darkblue));
            } else {


      tabOne.setTextColor(getResources().getColor(R.color.txtbox_text_color_darek));
            }

        }

        @Override`
        public void onTabUnselected(TabLayout.Tab tab) {
            // tabOne.setTextColor(Color.GREEN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            // tabOne.setTextColor(Color.GREEN);
        }
    });

}

Answer 4

HI you can easily achieve custom tab with tab layout , Try this one

  public void setupTabView(){
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        tabLayout.getTabAt(i).setCustomView(R.layout.custom_tab);
        TextView tab_name = (TextView) tabLayout.getTabAt(i).getCustomView().findViewById(R.id.txt_tab_name);
        tab_name.setText("" + tabNames[i]);
    }
}

And make one drawable file with name custom_tab

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

     <TextView
         android:id="@+id/txt_tab_name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center"
         android:textSize="14sp" />


</RelativeLayout>