Search code examples
androidandroid-custom-viewandroid-tabs

ActionBar Tab with Custom View not switching


I have the following ActionBar with custom tabs:

enter image description here

If I want to switch tabs by clicking in the red areas below it works:

enter image description here

but if I click inside the custom view it doesn't switch the view (i.e. if i click in the below red areas):

enter image description here

(apologies for the bad drawings! -_-)

Here's the code (including setOnClickListener's) which I have tried:

    // Create the adapter that will return a fragment for each of the three
    // primary sections of the activity.
    mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());

    // Set up the ViewPager with the sections adapter.
    mViewPager = (ViewPager) findViewById(R.id.container);
    mViewPager.setAdapter(mSectionsPagerAdapter);


    // Set up the action bar.
    final ActionBar actionBar = getSupportActionBar();
    if(actionBar != null) {
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // When swiping between different sections, select the corresponding
        // tab. We can also use ActionBar.Tab#select() to do this if we have
        // a reference to the Tab.
        mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                actionBar.setSelectedNavigationItem(position);
            }
        });

        // For each of the sections in the app, add a tab to the action bar.
        for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
            // Create a tab with text corresponding to the page title defined by
            // the adapter. Also specify this Activity object, which implements
            // the TabListener interface, as the callback (listener) for when
            // this tab is selected.

            final int position = i;

            LayoutInflater layoutInflater = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);
            View rootView = layoutInflater.inflate(R.layout.tabs_add_item, null);

            if(rootView != null) {
                FontTextView tv = (FontTextView) rootView.findViewById(R.id.tab_title);
                tv.setText(mSectionsPagerAdapter.getPageTitle(i));

                RelativeLayout rl = (RelativeLayout) rootView.findViewById(R.id.tab);
                rl.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.i("ADDITEM", "layout Clicked");
                        mViewPager.setCurrentItem(position);
                    }
                });

                rootView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.i("ADDITEM", "view Clicked");
                        mViewPager.setCurrentItem(position);
                    }
                });

                actionBar.addTab(
                        actionBar.newTab()
                                .setCustomView(rootView)
                                .setTabListener(this));
            }
        }
    }

The relevant setTabListener's:

@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
    // When the given tab is selected, switch to the corresponding page in
    // the ViewPager.
    Log.i("ADDITEM", "TAB CLICKED");
    mViewPager.setCurrentItem(tab.getPosition());

    View v = tab.getCustomView();

    if(v != null){
        FontTextView tv = (FontTextView) v.findViewById(R.id.tab_title);
        tv.setCustomFont(getApplicationContext(), "fonts/seguisb.ttf");
    }
}

@Override
public void onTabUnselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
    View v = tab.getCustomView();

    if(v != null){
        FontTextView tv = (FontTextView) v.findViewById(R.id.tab_title);
        tv.setCustomFont(getApplicationContext(), "fonts/segoeui.ttf");
    }
}

@Override
public void onTabReselected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {

}

and of course the custom tab layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab"
    xmlns:vers="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="0dp">

    <uk.verscreative.smart5_a_day.views.widget.FontTextView
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:inputType="textCapCharacters"
        android:textColor="@color/white"
        android:text="TEXT"
        android:singleLine="true"
        vers:customTypeface="fonts/segoeui.ttf"
        />

</RelativeLayout>

If you guys need any more detail let me know! Thanks in advance!


Solution

  • I realised that my custom text view was match_parenting so I changed the setOnClickListener to this:

            // For each of the sections in the app, add a tab to the action bar.
            for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
                // Create a tab with text corresponding to the page title defined by
                // the adapter. Also specify this Activity object, which implements
                // the TabListener interface, as the callback (listener) for when
                // this tab is selected.
    
                final int position = i;
    
                LayoutInflater layoutInflater = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);
                View rootView = layoutInflater.inflate(R.layout.tabs_add_item, null);
    
                if(rootView != null) {
                    FontTextView tv = (FontTextView) rootView.findViewById(R.id.tab_title);
                    tv.setText(mSectionsPagerAdapter.getPageTitle(i));
                    tv.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            mViewPager.setCurrentItem(position);
                        }
                    });
    
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setCustomView(rootView)
                                    .setTabListener(this));
                }
            }
    

    add it works now!