August 15, 2015

Overriding the Default Android Tab View Style

Something I greatly struggled with when I first started out with Android was how to easily customize many of the user interface elements that every developer is given by the base android SDK.

Overriding the Default Android Tab View Style

Something I greatly struggled with when I first started out with Android was how to easily customize many of the user interface elements that every developer is given by the base android SDK. One of the more popular Android interface options that are utlized in many Android apps is the tab view. Depending on what theme you choose for your app, most people who implement the base tab UI element will be initially given three tabs with the initial names of Tab 1, Tab 2, and Tab 3. For my first app I choose to use the default Android Holo Dark theme which is a mostly dark theme with a light-blue accent color. For the purposes of the app I was developing at the time I needed to change this default accent color to a different color. I tried as many different ways to define the color as I could from directly defining a different accent color for the Android Holo theme, changing the color of the tabs from the XML Layouts, and attempting various setColor() methods I found inside the various tab classes. Frustratingly, nothing I did seemed to work. After some more robust digging and various google searches I eventually found out that I needed to build the tabs using a custom defined layout that utilized a different image asset than the default Holo theme. Below I'll show the code I used to initially setup the tabhost and define a single tab using the custom layout.

TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();

View tabIndicator = LayoutInflater.from(this).inflate(R.layout.YOUR_CUSTOM_TAB_INDICATOR_LAYOUT, tabHost.getTabWidget(), false);
TextView title = (TextView) tabIndicator.findViewById(android.R.id.title);
title.setText("Tab Name");

TabHost.TabSpec tabSpec = tabHost.newTabSpec("Tab");
tabSpec.setContent(R.id.YOUR_TAB_ID);
tabSpec.setIndicator(tabIndicator);
tabHost.addTab(tabSpec);

The key line of interest to us is...
LayoutInflater.from(this).inflate(R.layout.YOUR_CUSTOM_TAB_INDICATOR_LAYOUT, tabHost.getTabWidget(), false);

Inflating the tabIndicator with our custom layout gives us complete control over the look of the tab. If you are unsure how to design a custom layout for a tab indicator, there are existing asset generators for Android that you define whatever color theme you would like and it will generate all of the graphic assets for you to easily drop into your /res folder. Below I've linked the site that I personally used for generate my assets if anyone is interested.

http://android-holo-colors.com/

http://jgilfelt.github.io/android-actionbarstylegenerator/

Also if anyone is interested in a good list of asset creators to make things such as launcher icons or 9-patch drawables heres a solid list of services that include the two links above.

https://romannurik.github.io/AndroidAssetStudio/