Custom Tabbar without using Tabhost in android

Hi All,

          Today I am going to explain the of making tab bar without using default tab host and fragments.
This is very simple to make a tab bar using views in android.

The code is as follows:

1.   Code for activity_main.xml :

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#523232"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Custom Tab"
            android:textColor="#FFFFFF" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/top"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_one"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="One" />

        <Button
            android:id="@+id/btn_two"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Two" />

        <Button
            android:id="@+id/btn_three"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Three" />

        <Button
            android:id="@+id/btn_four"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Four" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab"
        android:background="#0B4044"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:textColor="#F7FAB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="One" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab"
        android:visibility="gone"
        android:gravity="center"
        android:background="#269E54"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button2"
            android:textColor="#F7FAB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Two" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_three"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:background="#69D43B"
        android:gravity="center"
        android:layout_below="@id/tab"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button3"
            android:textColor="#F7FAB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Three" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_four"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab"
        android:visibility="gone"
        android:gravity="center"
        android:background="#69D43B"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#F7FAB4"
            android:text="Four" />

    </LinearLayout>

</RelativeLayout>

2. Now put below code in MainActivity.java :

 package com.example.customtabbar;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    Button one, two, three, four;
    LinearLayout lay_one, lay_two,lay_three,lay_four;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
      
        one=(Button)findViewById(R.id.btn_one);
        two=(Button)findViewById(R.id.btn_two);
        three=(Button)findViewById(R.id.btn_three);
        four=(Button)findViewById(R.id.btn_four);
      
        lay_one=(LinearLayout)findViewById(R.id.lay_one);
        lay_two=(LinearLayout)findViewById(R.id.lay_two);
        lay_three=(LinearLayout)findViewById(R.id.lay_three);
        lay_four=(LinearLayout)findViewById(R.id.lay_four);
      
      
        one.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
            lay_one.setVisibility(View.VISIBLE);
            lay_two.setVisibility(View.GONE);
            lay_three.setVisibility(View.GONE);
            lay_four.setVisibility(View.GONE);
            }
        });
      
        two.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                lay_one.setVisibility(View.GONE);
                lay_two.setVisibility(View.VISIBLE);
                lay_three.setVisibility(View.GONE);
                lay_four.setVisibility(View.GONE);
            }
        });
      
        three.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                lay_one.setVisibility(View.GONE);
                lay_two.setVisibility(View.GONE);
                lay_three.setVisibility(View.VISIBLE);
                lay_four.setVisibility(View.GONE);
            }
        });
      
        four.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                lay_one.setVisibility(View.GONE);
                lay_two.setVisibility(View.GONE);
                lay_three.setVisibility(View.GONE);
                lay_four.setVisibility(View.VISIBLE);
            }
        });
      
    }

 }
 

Note :  There no any change in manifest.xml

Output of the code:

1. When clicked on Button One:

2. When clicked on Button Two :

3. When clicked on Button  Three:

4. When clicked on Button Four: 

Thanks to all, Happy coding !!!!!!.