Napster's Experiments with Freedom





Hi There, This is my personal blog. You might see some really personal stuff and more or less technical articles here. I used to fuse all my things together at one place. So, don't take it too seriously. I could not really manage more than one blog or profile at a time. You might think its a little odd to do it in that way. All of the posts here are made on the intention that it would be helpful for you at some point. I have tried to keep it as simple as possible without losing the quality. Thanks for reading.


View Subin Sebastian's profile on LinkedIn



Recent Tweets @

Reading time : Less than 30 minutes

As I have spend a few weeks to learn Android development, I found many good tutorials around the web on different issues that people face while developing applications for Android. While I had some issues with tab layout, I searched around for a simple example. But unfortunately, I was unable to find a simple one at all. Many of them covered tab layout in detail but none of them was simple for a newbie. This tutorial was created keeping in mind that simplicity newbie might expect.

Before getting into the tutorial, I assume you guys are using eclipse and ADT plugin for development. Otherwise, you might feel it is a little difficult to follow this tutorial.

Tab layout is a very common layout system which is used in general desktop applications and mobile applications as well. It can hold multiple pages in single view. So lets see how can we make something like in the image below!

First of all, you have to make a new Android project. If you are really new to Android development, you can refer one of my older posts here for this. After creating a new project, you will see something like in the below image on the package explorer on eclipse.

Now, as the first step, lets think about the tabs. If we take a look at the screen shot above, we can see there are images on each of the tab headers. We need two clones of each of the images. One in color and the other in grayscale. The color image will appear when we select the tab and the grayscale will appear when it is not selected. For the sake of your time, I’ve zipped those images I used for this tutorial safely, and you can download all of them at once from here. After downloading the zip file, extract it to HelloTab > res > drawable-mdpi. Make sure, you have got all of the six images you can see below in the drawable-mdpi folder.

Now, lets make layout files to make these images drawn properly in the tabs. The idea is nothing but define, which clone of the image should appear in the two different states of a tab. For this, create three xml files in HelloTab > res > drawable-mdpi, named one.xml, two.xml and three.xml. Now, put the following code into them correctly.

one.xml

<?xml version=”1.0” encoding=”utf-8”?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
    <item android:drawable=”@drawable/one_w”
          android:state_selected=”true” />
    <item android:drawable=”@drawable/one_g” />
</selector>

two.xml

<?xml version=”1.0” encoding=”utf-8”?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
    <item android:drawable=”@drawable/two_w”
          android:state_selected=”true” />
    <item android:drawable=”@drawable/two_g” />
</selector>

three.xml

<?xml version=”1.0” encoding=”utf-8”?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
    <item android:drawable=”@drawable/three_w”
          android:state_selected=”true” />
    <item android:drawable=”@drawable/three_g” />
</selector>

Now, the drawables are ready to be deployed. Now we need a tab host to hold the tabs. Open HelloTab > res > layout > main.xml, and replace the content with the following code.

<?xml version=”1.0” encoding=”utf-8”?>
<TabHost xmlns:android=”http://schemas.android.com/apk/res/android”
    android:id=”@android:id/tabhost”
    android:layout_width=”fill_parent”
    android:layout_height=”fill_parent”>
    <LinearLayout
        android:orientation=”vertical”
        android:layout_width=”fill_parent”
        android:layout_height=”fill_parent”
        android:paddingTop=”5dip”>
        <TabWidget
            android:id=”@android:id/tabs”
            android:layout_width=”fill_parent”
            android:layout_height=”wrap_content” />
        <FrameLayout
            android:id=”@android:id/tabcontent”
            android:layout_width=”fill_parent”
            android:layout_height=”fill_parent”>
        </FrameLayout>
    </LinearLayout>
</TabHost>

If you read the above xml file, you might see there is a frame layout inside the tab host. This frame will be available for all of the tab content area to enclose the contents. For this example, I have created another activity class to load stuff into the tab content area. So, lets make a layout file and an activity class. I have named them simple.xml and Simple.java respectively. Insert the following code make sure you have them in proper places as specified below.

simple.xml

<LinearLayout
    android:id=”@+id/linearLayout1”
    android:layout_width=”fill_parent” android:layout_height=”fill_parent”
    xmlns:android=”http://schemas.android.com/apk/res/android”
    android:orientation=”vertical” android:padding=”5dip”>
    <LinearLayout
        android:layout_width=”fill_parent”
        android:id=”@+id/linearLayout4”
        android:layout_height=”wrap_content”
        android:orientation=”vertical”>
        <TextView
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:textAppearance=”?android:attr/textAppearanceSmall”
            android:id=”@+id/textView1”
            android:textSize=”15dip”
            android:text=”Search In DataBase”>
        </TextView>
    </LinearLayout>
    <LinearLayout
        android:id=”@+id/linearLayout2”
        android:layout_height=”wrap_content”
        android:gravity=”center”
        android:layout_width=”fill_parent”>
        <EditText
            android:layout_width=”wrap_content”
            android:id=”@+id/editText1”
            android:layout_weight=”1”
            android:layout_height=”wrap_content”>
           <requestFocus></requestFocus>
        </EditText>
        <LinearLayout
            android:layout_width=”wrap_content”
            android:id=”@+id/linearLayout3”
            android:layout_height=”fill_parent”>
            <Button
                android:layout_width=”wrap_content”
                android:text=”Search”
                android:id=”@+id/button1”
                android:layout_height=”wrap_content”>
            </Button>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Simple.java

package hello.tab.tabhello;
import android.app.Activity;
import android.os.Bundle;
public class Simple extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple);
    }
}

Now, all the stuff are ready to be deployed, lets do it. Open the main java file, which is created on project creation. In my case the file name was, HelloTabActivity.java. By default, it extends Activity but we need it to extend TabActivity. Here is the complete code for this file, lets take a look.

HelloTabActivity.java

package hello.tab.tabhello;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class HelloTabActivity extends TabActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Resources res = getResources();
        Intent i = new Intent(this,Simple.class);
        TabHost mTabHst = getTabHost();
     mTabHst.addTab(mTabHst.newTabSpec(“tab_test1”)
            .setIndicator(“One”,res.getDrawable(R.drawable.one))
            .setContent(i));
     mTabHst.addTab(mTabHst.newTabSpec(“tab_test2”)
            .setIndicator(“Two”,res.getDrawable(R.drawable.two))
            .setContent(i));
     mTabHst.addTab(mTabHst.newTabSpec(“tab_test3”)
            .setIndicator(“Three”,res.getDrawable(R.drawable.three))
            .setContent(i));
     mTabHst.setCurrentTab(0);
    }
}

See, I use the same activity to load content into all of the tab content areas. You can use different activities to load into them. Just create another activity in the package, just like Simple.java and define layout for it in the res folder and use intents to load them, thats it! Now, everything is ready to run, before running the project, lets register the newly created activity, in the manifest file. That is register the activity Simple inside the AndroidManifest.xml. Here is the final manifest file after editing.

AndroidManifest.xml

<?xml version=”1.0” encoding=”utf-8”?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
      package=”hello.tab.tabhello”
      android:versionCode=”1”
      android:versionName=”1.0”>
    <uses-sdk android:minSdkVersion=”4” />
    <application android:icon=”@drawable/icon” android:label=”@string/app_name”>
        <activity android:name=”.HelloTabActivity”
                  android:label=”@string/app_name”>
            <intent-filter>
                <action android:name=”android.intent.action.MAIN” />
                <category android:name=”android.intent.category.LAUNCHER” />
            </intent-filter>
        </activity>
        <activity android:name=”.Simple”
                  android:label=”@string/app_name”>
        </activity>
    </application>
</manifest>

Its time to run! Lets do it… :)

Hope this tutorial was helpful. Feel free to ask me if anything goes wrong! You can download the entire eclipse project from here if you wish.

//See you in the after life
//Subin Sebastian

  1. subinsebastien posted this