Blog

Author: Pranil Kanderi

The default tabs on an Android device do not look good and they are not easily customizable. You can provide a Drawable or a View as an indicator, and that would provide some customization. But for the tabs to look something like the below screen, it would not be possible to use either option.



One of the best solutions is to use Radio buttons. Radio buttons are a great solution since they can behave like tabs, where only one item is active at a time. Since they are buttons they can be customized as you want and can be placed where you would like. The Radio Buttons can be placed horizontally and below the RadioGroup a FrameLayout with all the other tabs included and visibility set to gone will do the trick.

Follow the detailed steps below to create your own version of custom tabs.

Here is a snippet of code to create a Radio Group that can be in the onCreate method of your activity:

protected void onCreate(Bundle savedInstanceState) {

              //Set your content view and initialize other views

              // Initialize the Views that would normally go as a
	      tabView1 = findViewById(R.id.Tab1);
	      tabView2 = findViewById(R.id.Tab2);
	      tabView3 = findViewById(R.id.Tab3);
	      tabView4 = findViewById(R.id.Tab4);

	      tabView1.setVisibility(View.VISIBLE);
	      tabView2.setVisibility(View.GONE);
	      tabView3.setVisibility(View.GONE);
	      tabView4.setVisibility(View.GONE);

	      tabs = (RadioGroup) findViewById(R.id.AllTabs);

	      tabs.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

	         public void onCheckedChanged(RadioGroup group, int checkedId) {

	            tabView1.setVisibility(View.GONE);
	            tabView2.setVisibility(View.GONE);
	            tabView3.setVisibility(View.GONE);
	            tabView4.setVisibility(View.GONE);

	            switch (checkedId) {
	               case R.id.RadioButton1:
	                  tabView1.setVisibility(View.VISIBLE);
	                  break;
	               case R.id.RadioButton2:
	                  tabView2.setVisibility(View.VISIBLE);
	                  break;
	               case R.id.RadioButton3:
	                  tabView3.setVisibility(View.VISIBLE);
	                  break;
	               case R.id.RadioButton4:
	                  tabView4.setVisibility(View.VISIBLE);
	                  break;

	            }
	         }
	      });

              //Other code
}

The layout of your tabs screen should look like this:

<?xml version="1.0" encoding="utf-8"?&rt;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:background="@drawable/app_bg"
	android:layout_width="fill_parent" android:layout_height="fill_parent"&rt;
	
	<RelativeLayout android:layout_width="fill_parent"
		android:layout_height="wrap_content"&rt;

		<RadioGroup android:id="@+id/AllTabs" android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:orientation="horizontal"
			android:checkedButton="@+id/RadioButton1"&rt;
			<RadioButton android:id="@+id/RadioButton1"
				android:background="@drawable/btnBg1" style="@style/TabButton" /&rt;
			<RadioButton android:id="@+id/RadioButton2"
				android:background="@drawable/btnBg2" style="@style/TabButton" /&rt;
			<RadioButton android:id="@+id/RadioButton3"
				android:background="@drawable/btnBg3" style="@style/TabButton" /&rt;
			<RadioButton android:id="@+id/RadioButton4"
				android:background="@drawable/btnBg4" style="@style/TabButton" /&rt;
		</RadioGroup&rt;
	</RelativeLayout&rt;


	<FrameLayout android:id="@+id/ViewsLayout"
		android:layout_width="fill_parent" android:layout_height="fill_parent"&rt;
		<include android:id="@+id/Tab1" layout="@layout/content_of_tab1"
			android:layout_width="fill_parent" android:layout_height="fill_parent" /&rt;
		<include android:id="@+id/Tab2" layout="@layout/content_of_tab2"
			android:layout_width="fill_parent" android:layout_height="fill_parent"
			android:visibility="gone" /&rt;
		<include android:id="@+id/Tab3" layout="@layout/content_of_tab3"
			android:layout_width="fill_parent" android:layout_height="fill_parent"
			android:visibility="gone" /&rt;
		<include android:id="@+id/Tab4" layout="@layout/content_of_tab4"
			android:layout_width="fill_parent" android:layout_height="fill_parent"
			android:visibility="gone" /&rt;

	</FrameLayout&rt;

</LinearLayout&rt;

Note that all the views that have been included in the FrameLayout have been set a visibility of ‘gone’, except for the first view that would act as the default tab.

And finally here is the style that was used for all of the RadioButton’s, which should be in your res/styles.xml:

	<style name="TabButton"&rt;
		<item name="@android:button">@null
		<item name="@android:layout_width"&rt;wrap_content</item&rt;
		<item name="@android:layout_height"&rt;wrap_content</item&rt;
		<item name="@android:layout_margin"&rt;3dp</item&rt;
	</style>

Hopefully that will help with better customization of tabs in Android.

PS::You can follow me on twitter @pranilkanderi or get updates of our work @mokriya