Wednesday, 27 January 2016

Android TabLayout example

04:03

Write code for   Tab activity   :




(1)write  code for  Main2Activity.java  file:
package tab.om.com.tabactivity;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class Main2Activity extends TabActivity {

   
public void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
main);

        Resources ressources = getResources();
        TabHost tabHost = getTabHost();

       
// Android tab
       
Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
        TabSpec tabSpecAndroid = tabHost
                .newTabSpec(
"Android")
                .setIndicator(
"", ressources.getDrawable(R.drawable.icon_android_config))
                .setContent(intentAndroid);

       
// Apple tab
       
Intent intentApple = new Intent().setClass(this, AppleActivity.class);
        TabSpec tabSpecApple = tabHost
                .newTabSpec(
"Apple")
                .setIndicator(
"", ressources.getDrawable(R.drawable.icon_apple_config))
                .setContent(intentApple);

       
// Windows tab
       
Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
        TabSpec tabSpecWindows = tabHost
                .newTabSpec(
"Windows")
                .setIndicator(
"", ressources.getDrawable(R.drawable.icon_windows_config))
                .setContent(intentWindows);

       
// Blackberry tab
       
Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
        TabSpec tabSpecBerry = tabHost
                .newTabSpec(
"Berry")
                .setIndicator(
"", ressources.getDrawable(R.drawable.icon_blackberry_config))
                .setContent(intentBerry);

       
// Blackberry tab
       
Intent intentBerry1 = new Intent().setClass(this, BlackBerryActivity.class);
        TabSpec tabSpecBerry1 = tabHost
                .newTabSpec(
"Berry")
                .setIndicator(
"", ressources.getDrawable(R.drawable.icon_blackberry_config))
                .setContent(intentBerry1);

       
// add all tabs
       
tabHost.addTab(tabSpecAndroid);
        tabHost.addTab(tabSpecApple);
        tabHost.addTab(tabSpecWindows);
        tabHost.addTab(tabSpecBerry);
        tabHost.addTab(tabSpecBerry1);

       
//set Windows tab as default (zero based)
        
tabHost.setCurrentTab(2);
    }

}

(2)then    write code for main.xml file  :
<?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:padding="5dp">

        <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"

            android:padding="5dp" />

    </LinearLayout>

</TabHost>
 
(3)now write code for  AndroidActivity.java file:
 
package tab.om.com.tabactivity;



import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;



public class AndroidActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.android);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });

    }



}
 

(4)write   code for    android.xml   file  :
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:fitsSystemWindows="true"

    tools:context="tab.om.com.tabactivity.AndroidActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"

            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



    </android.support.design.widget.AppBarLayout>



    <include layout="@layout/content_android" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

        android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



</android.support.design.widget.CoordinatorLayout>
 
(5)write   code for content_android.xml   file  :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/android"

    tools:context="tab.om.com.tabactivity.AndroidActivity">



</RelativeLayout>

(6)Now write code for  AppleActivity.java file:
 
package tab.om.com.tabactivity;



import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;



public class AppleActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_apple);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });

    }



}
 
(7)now  write code for  activity_apple.xml file:
 
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:fitsSystemWindows="true"

    tools:context="tab.om.com.tabactivity.AppleActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"

            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



    </android.support.design.widget.AppBarLayout>



    <include layout="@layout/content_apple" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

        android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



</android.support.design.widget.CoordinatorLayout>
(8)write code for content_apple.xml file:
 
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_apple" tools:context="tab.om.com.tabactivity.AppleActivity">



</RelativeLayout>
 
(9)now write code for  BlackBerryActivity.java file:
 
package tab.om.com.tabactivity;



import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;



public class BlackBerryActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_black_berry);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });

    }



}
 
(10)now write code for activity_black_berry.xml file:
 
 
 
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:fitsSystemWindows="true"

    tools:context="tab.om.com.tabactivity.BlackBerryActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"

            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



    </android.support.design.widget.AppBarLayout>



    <include layout="@layout/content_black_berry" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

        android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



</android.support.design.widget.CoordinatorLayout>
 
(11)now write code for Content_black_berry.xml file:
 
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_black_berry"

    tools:context="tab.om.com.tabactivity.BlackBerryActivity">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/textView"

        android:layout_alignParentTop="true"

        android:layout_alignParentRight="true"

        android:layout_alignParentEnd="true"

        android:layout_marginTop="170dp"

        android:layout_alignParentLeft="true"

        android:layout_alignParentStart="true" />

</RelativeLayout>
 
 
(12)now write code for  WindowsActivity.java file:
 
package tab.om.com.tabactivity;



import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;



public class WindowsActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_windows);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });

    }



}
 
(13)now  write code for activity_windows.xml file:
 
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:fitsSystemWindows="true"

    tools:context="tab.om.com.tabactivity.WindowsActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"

            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



    </android.support.design.widget.AppBarLayout>



    <include layout="@layout/content_windows" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

        android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



</android.support.design.widget.CoordinatorLayout>
 
 
 
(14)now write code for  content_windows.xml file:
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_windows" tools:context="tab.om.com.tabactivity.WindowsActivity">



</RelativeLayout>


Now write code   for xml file which are under  drawable   folder :
(1)icon_android_config.xml :
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected -->

    <item android:drawable="@drawable/ic_tab_android"

          android:state_selected="true" />

    <!-- When not selected -->

    <item android:drawable="@drawable/ic_tab_android" />

</selector>
(2) icon_apple_config.xml
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected -->

    <item android:drawable="@drawable/ic_tab_apple"

          android:state_selected="true" />

    <!-- When not selected -->

    <item android:drawable="@drawable/ic_tab_apple" />

</selector>
(3) ) icon_blackberry_config.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected -->

    <item android:drawable="@drawable/ic_tab_blackberry"

          android:state_selected="true" />

    <!-- When not selected -->

    <item android:drawable="@drawable/ic_tab_blackberry" />

</selector>
(4) icon_windows_config.xml
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected -->

    <item android:drawable="@drawable/ic_tab_windows"

          android:state_selected="true" />

    <!-- When not selected -->

    <item android:drawable="@drawable/ic_tab_windows" />

</selector>

output:






Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

4 comments:

 

© 2013 ANDROID TRAINING IN MUMBAI BY OM SIR. All rights resevered. Designed by Templateism

Back To Top