Use the version-aware component

Now that you have two implementations of TabHelper and CompatTab—one for Android 3.0 and later and one for earlier versions of the platform—it's time to do something with these implementations. This lesson discusses creating the logic for switching between these implementations, creating version-aware layouts, and finally using the backward-compatible UI component.

Add the switching logic

The TabHelper abstract class acts as a factory for creating version-appropriate TabHelper and CompatTab instances, based on the current device's platform version:

sealedclassTabHelper(protectedvalmActivity:FragmentActivity,protectedvaltag:String){
abstractfunsetUp()
abstractfunaddTab(tab:CompatTab)
// Usage is tabHelper.newTab("tag")
funnewTab(tag:String):CompatTab=
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
CompatTabHoneycomb(mActivity,tag)
}else{
CompatTabEclair(mActivity,tag)
}
companionobject{
// Usage is TabHelper.createInstance(activity)
funcreateInstance(activity:FragmentActivity):TabHelper=
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
TabHelperHoneycomb(activity)
}else{
TabHelperEclair(activity)
}
}
}

publicabstractclass TabHelper{
...
// Usage is TabHelper.createInstance(activity)
publicstaticTabHelpercreateInstance(FragmentActivityactivity){
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
returnnewTabHelperHoneycomb(activity);
}else{
returnnewTabHelperEclair(activity);
}
}
// Usage is tabHelper.newTab("tag")
publicCompatTabnewTab(Stringtag){
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
returnnewCompatTabHoneycomb(mActivity,tag);
}else{
returnnewCompatTabEclair(mActivity,tag);
}
}
...
}

Create a version-aware activity layout

The next step is to provide layouts for your activity that can support the two tab implementations. For the older implementation (TabHelperEclair), you need to ensure that your activity layout contains a TabWidget and TabHost , along with a container for tab contents:

res/layout/main.xml:

<!--ThislayoutisforAPIlevel5-10only.-->
<TabHostxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</TabHost>

For the TabHelperHoneycomb implementation, all you need is a FrameLayout to contain the tab contents, since the tab indicators are provided by the ActionBar :

res/layout-v11/main.xml:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

At runtime, Android will decide which version of the main.xml layout to inflate depending on the platform version. This is the same logic shown in the previous section to determine which TabHelper implementation to use.

Use TabHelper in your activity

In your activity's onCreate() method, you can obtain a TabHelper object and add tabs with the following code:

overridefunonCreate(savedInstanceState:Bundle?){
...
setContentView(R.layout.main)
TabHelper.createInstance(this).apply{
setUp()
newTab("photos")
.setText(R.string.tab_photos)
.also{photosTab->
addTab(photosTab)
}
newTab("videos")
.setText(R.string.tab_videos)
.also{videosTab->
addTab(videosTab)
}
}
}

@Override
publicvoidonCreate(BundlesavedInstanceState){
setContentView(R.layout.main);
TabHelpertabHelper=TabHelper.createInstance(this);
tabHelper.setUp();
CompatTabphotosTab=tabHelper
.newTab("photos")
.setText(R.string.tab_photos);
tabHelper.addTab(photosTab);
CompatTabvideosTab=tabHelper
.newTab("videos")
.setText(R.string.tab_videos);
tabHelper.addTab(videosTab);
}

When running the application, this code inflates the correct activity layout and instantiates either a TabHelperHoneycomb or TabHelperEclair object. The concrete class that's actually used is opaque to the activity, since they share the common TabHelper interface.

Below are two screenshots of this implementation running on an Android 2.3 and Android 4.0 device.

Figure 1. Example screenshots of backward-compatible tabs running on an Android 2.3 device (using TabHelperEclair) and an Android 4.0 device (using TabHelperHoneycomb).