Android : How to create TabLayout with drawable for count textview?

Question

I'm trying to use the new TabLayout in the android design library
I wanted to create a TextView having drawable as background on a tab of TabLayout.
For example

I search Los Angeles in Search box I should get number of Books,Movie,Place in the TextView.

Example image:

Mayur Gangurde · Answer 1 · 2017-01-24T13:15:56.063

Refer this link Add Icons+Text to TabLayout https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-icons-text-to-tablayout

And this

https://gist.github.com/kevinpelgrims/8685c8e1a68e3cd9cff9

    @Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    Drawable image = context.getResources().getDrawable(imageResId[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    // Replace blank spaces with image icon
    SpannableString sb = new SpannableString("   " + tabTitles[position]);
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

Hey @mdg5435 in your reference example it just shows the textView with image but I want textview with a drawable background for search count which exactly I provided in example image — Nikhil, Jan 24 '17 at 13:04

Mohit Suthar · Answer 2 · 2017-01-24T13:08:12.470

Yes, you can acheive like this, you have to set custom view in each tab. First setup your viewpager with adapter after tabLayout.setupWithViewPager(viewPager); after this call this method and add your custom layout what you want

private void setCustomIndicator() {
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            View tab = LayoutInflater.from(this).inflate(R.layout.layout_custom_tab, null);
            TextView textName = (TextView) tab.findViewById(R.id.txtName);
            TextView textViewNo = (TextView) tab.findViewById(R.id.txtNo);
            if(i != 0){
                textName.setTextColor(ContextCompat.getColor(this, R.color.colorBlueLight));
                textViewNo.setBackgroundResource(R.drawable.round_blue_custom_tab);
            }

            textName.setText("One"+i);
            textViewNo.setText(""+i);
            tabLayout.getTabAt(i).setCustomView(tab);
        }
    }

and after change background in setOnTabSelectedListener

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (tab.getCustomView() != null) {
                    changeCustomIndicator(tab.getPosition());
                }
            }

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

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });
 private void changeCustomIndicator(int pos) {
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        View tab = tabLayout.getTabAt(i).getCustomView();
        TextView textName = (TextView) tab.findViewById(R.id.txtName);
        TextView textViewNo = (TextView) tab.findViewById(R.id.txtNo);
        if(pos == i){
            textName.setTextColor(ContextCompat.getColor(this, R.color.white));
            textViewNo.setBackgroundResource(R.drawable.round_red_custom_tab);
        }else {
            textViewNo.setBackgroundResource(R.drawable.round_blue_custom_tab);
            textName.setTextColor(ContextCompat.getColor(this, R.color.colorBlueLight));
        }
    }
    viewPager.setCurrentItem(pos);
}

score 0 · Answer 3 · answered Jan 24 '17 at 13:32

Use public TabLayout.Tab setCustomView (int layoutResId) Create a Layout with TextView and Button use this in Custom view.

accepted Use public TabLayout.Tab setCustomView (int layoutResId)

Create a Layout with TextView and Button use this in Custom view.

For reference:

setCustomView

Example

Hope this will helpful to you.

score 0 · Accepted Answer · answered Jan 30 '17 at 12:41

Hi Nikhil you have to use custom view for tab set the count value on search result change using event bus. To know about evet bus reffer EventBus: Events for Android

search_tab_layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center"
    android:background="@color/app_blue">

    <!-- Menu Item Image -->
    <TextView
        android:id="@+id/tabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/count"
        android:text="Book"
        android:textSize="12sp"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"
        android:paddingRight="8dp"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        app:customTypeface="mayriad_pro_regular"/>

    <TextView
        android:id="@+id/count"
        android:layout_width="18dp"
        android:layout_height="18dp"
        android:text="0"
        android:gravity="center"
        android:textSize="10sp"
        android:background="@drawable/cart_circle"
        android:textColor="@color/app_blue"
        app:customTypeface="mayriad_pro_semi_bold"/>

</LinearLayout>

Declare tab veiws onCreate

tab1 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null);

tab2 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null);

tab3 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null);

In onCreateOptionMenu use eventBus to fire event on search

@Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.menu_search, menu);
        SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        if (null != searchView) {
            searchView.setSearchableInfo(searchManager
                    .getSearchableInfo(getActivity().getComponentName()));
            searchView.setIconifiedByDefault(false);
        }

        SearchView.OnQueryTextListener queryTextListener = new SearchView.OnQueryTextListener() {
            public boolean onQueryTextChange(String newText) {
                // this is your adapter that will be filtered
                EventBus.getDefault().post(new SearchViewFilterEvent(newText));
                return true;
            }

            public boolean onQueryTextSubmit(String query) {
                //Here u can get the value "query" which is entered in the search box.
                return false;
            }
        };
        searchView.setOnQueryTextListener(queryTextListener);
        MenuItemCompat.setOnActionExpandListener(menu.getItem(0), new MenuItemCompat.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem menuItem) {
                adapter.setIsHideWashAndFold(true);
                tabLayout.removeTabAt(0);
                adapter.notifyDataSetChanged();
                llSpinner.setVisibility(View.GONE);
                tabLayout.getTabAt(0).setCustomView(tab);
                tabLayout.getTabAt(1).setCustomView(tab2);
                tabLayout.getTabAt(2).setCustomView(tab3);
                return true;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem menuItem) {
                adapter.setIsHideWashAndFold(false);                adapter.notifyDataSetChanged();
                llSpinner.setVisibility(View.VISIBLE);
                initView();
                return true;
            }
        });

        new Handler().post(new Runnable() {
            @Override
            public void run() {
                final View v = getActivity().findViewById(R.id.menu_search);

                if (v != null) {
                    v.setOnLongClickListener(new View.OnLongClickListener() {
                        @Override
                        public boolean onLongClick(View v) {
                            return false;
                        }
                    });
                }
            }
        });
    }

Android : How to create TabLayout with drawable for count textview?

4 Answers4