CODEWITHSUNDEEP
androidandroid-fragmentstabsandroid-tablayout
Ankur_009
Ankur_009

Reputation: 3730

Duplicate tab in tabLayout in Android

When I am clicking on the tab a duplicate custom icon is created on the bottom of the current tab. How to get rid of this?

I am setting the custom title using below code:

private void setIcon(String title, int icon, boolean isSelected, int position) {

        LinearLayout tab = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.custom_tab, null);
        TextView tabTitle = (TextView) tab.findViewById(R.id.tab_title);
        final CircleImageView tabImage = (CircleImageView) tab.findViewById(R.id.tab_image);

        if (isSelected){
            //add shadow to image.
            tabImage.setBorderColor(ContextCompat.getColor(getActivity(),R.color.white));
            tabImage.setBorderWidth(10);
        }

        Glide.with(getContext()).load(icon).into(tabImage);

        tabTitle.setText(title);
        tabLayout.getTabAt(position).setCustomView(tab);
    }

What I am trying to do: When the user clicks on tab add the border of the outside of the image. So to do this I am adding addTabSelectedListener on the tablayout as below:

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

                //add shadow on selected tab
                setIcon(getTitle(tab.getPosition()), getIcon(tab.getPosition()),true,tab.getPosition());
            }

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

                //remove shadow from previous tab
                setIcon(getTitle(tab.getPosition()), getIcon(tab.getPosition()),false,tab.getPosition());

            }

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


            }
        });

But new tab icon is added just under the old icon instead of replacing the old icon.

What I have tried:

  1. use of tabLayout.removeTab(tab)
  2. use of tabLayout.removeTabAt(tab.getpostion());
  3. use of tabLayout.removeAllTabs();

All them result into NullPointerException.

Edit :

As Arpan Suggested:

View view = tab.getCustomView(); but how will I get the tabTitle and tabImage from this view?

Edit 2:

Ok I am able to do some part correct i.e. Image is loading correctly but title is moving at top instead of below.

Code:

LinearLayout customTab = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.custom_tab, null);
                final CircleImageView tabImage = (CircleImageView) tab.getCustomView().findViewById(R.id.tab_image);
                final TextView tabTitle = (TextView) tab.getCustomView().findViewById(R.id.tab_title);

                tabTitle.setText(getTitle(tab.getPosition()));



                Glide.with(getContext()).load(getIcon(tab.getPosition())).into(tabImage);

                tab.setCustomView(tabImage);

If I do this, Image set perfectly but title goes to the top of it. I know it is because I am not setting tabTitle in the tab. How will I do that?

If I use the linear layout and set it than it create duplicate tab.

Edit 3:

All done, I just call the setcustomViewAgain for tabtitle;

Upvotes: 0

Views: 854

Answers (1)

Arpan Sharma
Arpan Sharma

Reputation: 2162

AFAIK everytime in your setIcon() method you are creating a new instance of tab view.That seems to be the problem . What you should do is that you should pass view from the tab listener and pass that to set Icon .

Yous should pass tab.getCustomView() as view to you setIcon() function and get tabTitle and tabImage from that view.

EDIT For getting your textview you will have to do 

tvTitle = (TextView)tab.getCustomView().findViewById(R.id.tab_title);

Upvotes: 1

Related Questions