Android tutorial – Screen with tabs and swipe – part II – AppCompat

For the second part of the tabs and swipe tutorial we’ll make our app compatible with older Android devices. Make sure you have read the first part of the tutorial here.

As we are accustomed with the main Activity structure, Fragments and FragmentPagerAdapter, I’ll keep it short and just give the details on how to change the previous project to make it compatible.

1. Import the support library v7 from google (AppCompat v7). Use these instructions to install the project – make sure to use the instructions from “Adding libraries with resources”!
2. In MainActivity.java extend ActionBarActivity instead of FragmentActivity.
3. Change the imports to look like this:

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;

4. use actionBar = getSupportActionBar(); instead of actionBar = getActionBar();
5. make sure the activity with tabs has either android:theme=”@style/Theme.AppCompat” in the manifest declaration or a special/custom Theme extending Theme.AppCompat

Basically, only two files should be changed – MainActivity.java and manifest.xml.
The changed MainActivity.java should look like this:

package com.indyvision.test.tabswipe.activities;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;

import com.indyvision.test.tabswipe.R;
import com.indyvision.test.tabswipe.adapters.TabsPagerAdapter;

public class MainActivity extends ActionBarActivity implements
		ActionBar.TabListener {

	private ViewPager viewPager;
	private TabsPagerAdapter adapter;
	private ActionBar actionBar;

	private String[] tabs = { "tab 1", "tab 2", "tab 3", "tab 4" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		viewPager = (ViewPager) findViewById(R.id.pager);
		actionBar = getSupportActionBar();
		adapter = new TabsPagerAdapter(getSupportFragmentManager());

		viewPager.setAdapter(adapter);
		actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

		for (String tab_name : tabs) {
			actionBar.addTab(actionBar.newTab().setText(tab_name)
					.setTabListener(this));
		}

		viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				actionBar.setSelectedNavigationItem(position);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
	}

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		viewPager.setCurrentItem(tab.getPosition());
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {
	}

}

The manifest should look like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.indyvision.test.tabswipe"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.indyvision.test.tabswipe.activities.MainActivity"
            android:theme="@style/Theme.AppCompat"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

You can download the source code from here. Next time we’ll see how we can style our tabs.

Leave a Reply

You must be logged in to post a comment.