Making a TAB LAYOUT in Android (Part - 1)

I'll teach you guys to form a Tab layout in just 2 sessions . Just carry on with me .

What we need ?

• An xml layout (activity_main.xml)
• A class file for the above layout (MainActivity.java)
• A drawable file for styling the Tab_layout (bg_tabwidget.xml)
• A drawable for styling the skin of a single tab (bg_tab.xml)
• Two xml layout for pages displayed after tabs are clicked . (tab1.xml,tab2.xml) and their respective class files (Tab1.java,Tab2.java)
• Some changes in the Manifest file .

What are we going to do ?
-> We will make a page with two tabs and open pages one by one as we click the tabs one by one .

Step 1 : First we design the styles for the tab we are going to use . We make a folder drawable in the res directory in your project  . Right-click on the res folder in the Package Explorer and select New-> Folder .

Step 2 : Give a name to the new folder as drawable and click Finish .

Step 3 : Make a new xml file in the drawable folder and name it as bg_tab.xml  . The code for bg_tab.xml is given below .

bg_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
<solid  android:color="#FFFFFF"/>
 <!-- color of the border --><stroke android:width="2dip" android:color="#453"/> <corners android:radius="20dp" /> <padding android:left="5dip" android:right="5dip" android:bottom="5dip"/></shape>

Step 4 : Make another file in the same drawable folder named as bg_tabwidget.xml . The code for bg_tabwidget.xml is given below .

bg_tabwidget.xml .

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle >
        <solid  android:color="#C8C8C8"/>
        <!-- color of the border -->
        <stroke android:width="2dip"
                android:color="#453"/>
        <corners android:radius="20dp" />
        <padding android:left="5dip"
            android:top="5dip"
            android:right="5dip"
            android:bottom="5dip"/>
    </shape>

Step 5 : Make changes in the activity_main.xml file found in res-> layout folder .

The code for activity_main.xml is given below .

activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
       android:id="@android:id/tabhost"
       android:layout_width="fill_parent"\
       android:layout_height="fill_parent"
       android:padding="10dp"
       android:background="#FFFFF0">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TabWidget android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_tabwidget" />"
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@drawable/bg_tab" />
        </LinearLayout>
    </TabHost>

Step 6 : We make the page we will display when we click the first tab (TAB1) .Make a new xml file in the res-> layout folder in your project and name it tab1.xml .I'll display a simple message in it  .

The code for tab1.xml is given below .

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content in tab1"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Step 7 : We make the java class for the layout tab1.xml . make a new Class in src folder and name it as Tab1.java
Right click on src folder in your project and select New -> Class .

Give name to the class as Tab1 and click Finish .

Add the code shown below to Tab1.java 

Tab1.java

package com.mia.tablayout;

import android.app.Activity;
import android.os.Bundle;
     
public class Tab1 extends Activity{
     protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.tab1);
    }
    }

Step 8 : Make another layout and name it as tab2.xml which will be displayed as we click on TAB2 .

The code for tab2.xml is given below .

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content in tab 2"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Step 9 : Then the class file for for tab2.xml. name it as Tab2.java . The code for Tab2.java is given below .

Tab2.java

package com.mia.tablayout;

import android.app.Activity;
import android.os.Bundle;

public class Tab2 extends Activity{
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab2);

}
}

The other steps will be shown in the next post .

Stay Tuned with Made In Android