Advance Tabs Knol

If you want ot change the tabs look ot something like this:

Thank read the Advance Tabs Knol.

Tab Customization Sneak Peek

Left to fix is the drawable, fix my image states. and the text colors as the text label is taking the default text colors. I had to switch co around and replace the bottom strip first and than replace the tab indicator:

for (int i =0; i < tabWidget.getChildCount(); i++) {
        	/**
             * set height and width
             * under TabActivity
             * setting width has no effect
             * due to fill_parent
             * layout parameter
             *
             */
            tabWidget.getChildAt(i).getLayoutParams().height = height;
            tabWidget.getChildAt(i).getLayoutParams().width = width;

            /**
             * In TabWidget:
             * void setDrawBottomStrips(boolean drawBottomStrips) {
             * mDrawBottomStrips = drawBottomStrips;
             * }
             *
             * is not public thus we use reflection
             */
            try {
               mBottomLeftStrip = tabWidget.getClass().getDeclaredField ("mBottomLeftStrip");
               mBottomRightStrip = tabWidget.getClass().getDeclaredField ("mBottomRightStrip");
               if(!mBottomLeftStrip.isAccessible()) {
                    mBottomLeftStrip.setAccessible(true);
               }
                if(!mBottomRightStrip.isAccessible()){
                    mBottomRightStrip.setAccessible(true);
                }
               mBottomLeftStrip.set(tabWidget, getResources().getDrawable (R.drawable.tabs_one));
                mBottomRightStrip.set(tabWidget, getResources().getDrawable (R.drawable.tabs_one));
            } catch (Exception e) {
                e.printStackTrace();
            }
        	View vvv = tabWidget.getChildAt(i);
        	/**
        	 * I kept all drawables in selector so that the
        	 * we could get correct drawablea applied to
        	 * tabs as the selector pointed to has
        	 * both the tabs and the bottom tab-bar
        	 * drawables referenced
        	 */
        	vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_one_indicator));

        }
        

Bottom Tab strip Gone

I was able to remove the bottom strip off the tab bar:

Which means I should be able to also modify the dividers. The Advance Tab tutorial should be up in my Android Development Knols collection tonight.

Custom Tab Working

Its working. The solution is imperfect in that it will break when the API changes. The Knol tutorial should be up sometime today. in the Android U Design category. The main thing was to grab the drawables from he TAbWidget.

Tab Highlights Custom

I still have to fix some drawable selectors but its working:

Okay, now for the secret sauce:

        /**
         * grabs tab indicator drawables to fix
         */
        for (int i = 0; i < tabs.getChildCount(); i++) {
            View vv = tabs.getChildAt(i);
            vv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_indicator));
          }
        /**
         * grabs tabWidget drawables to fix
         */
        for (int i =0; i < tabWidget.getChildCount(); i++) {
        	View vvv = tabWidget.getChildAt(i);
        	vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bottom_left_right));
        }
    }

That sits in my onCreate method. the only bad things is it will break when the APi changes.