Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Saturday, 5 November 2016

Create Tab Layout with Swipeable view in Android

Author:  |   |  No Comments | 

In this example, we will demonstrate that how to create tab layout with swipeable view.

Basically, we are using ViewPager and Fragement for creating swipeable view. ViewPager is used for main layout and Fragement is used for individual page viewer.

Let's see the example with steps :

First of all, create a new project File -> new -> Android Application Project and set the name of the project.

In MainActivity file , change activity and set FragementActivity, then add unimplemented methods and implement ActionBar.TabListener. Now see the code of MainActivity.

File Name : MainActivity.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
package com.example.swipingtab;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends FragmentActivity implements ActionBar.TabListener{
 
 ActionBar actionbar; //for adding tab into actionbar
 ViewPager viewpager;
 FragementPageAdapter fa;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  actionbar = getActionBar();
  viewpager = (ViewPager) findViewById(R.id.pager);
  fa = new FragementPageAdapter(getSupportFragmentManager());
  viewpager.setAdapter(fa);
  actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  actionbar.addTab(actionbar.newTab().setText("TAB 1").setTabListener(this));
  actionbar.addTab(actionbar.newTab().setText("TAB 2").setTabListener(this));
  actionbar.addTab(actionbar.newTab().setText("TAB 3").setTabListener(this));
  
  
  // to change the tab when page will be changed
  viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   
   @Override
   public void onPageSelected(int arg0) {
    // TODO Auto-generated method stub
    
    actionbar.setSelectedNavigationItem(arg0); // it will return the id of the tab item
   }
   
   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
    // TODO Auto-generated method stub
    
   }
   
   @Override
   public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub
    
   }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

 @Override
 public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
  // TODO Auto-generated method stub
  
 }

 @Override
 public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
  // TODO Auto-generated method stub
  
 }

 @Override
 public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
  // TODO Auto-generated method stub
  
 }

}

File Name : activity_main.xml


1
2
3
4
5
6
7
8
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

</android.support.v4.view.ViewPager>

Now create an adapter class to add in Fragement. Go to Right click on src sub package ->  new -> class -> write name of the file and browse superclass FragmentPagerAdapter

File Name : FragementPageAdapter.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package com.example.swipingtab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragementPageAdapter extends FragmentPagerAdapter {

 public FragementPageAdapter(FragmentManager fm) {
  super(fm);
  // TODO Auto-generated constructor stub
 }

 @Override
 public Fragment getItem(int arg0) {
  // TODO Auto-generated method stub
  
  switch (arg0) {
  case 0:
   return new Tab1(); // return Tab1 Activity
  case 1:
   return new Tab2(); // return Tab2 Activity
  case 2:
   return new Tab3(); // return Tab3 Activity
  default:
   break;
  }
  
  return null;
 }

 @Override
 public int getCount() {
  // TODO Auto-generated method stub
  return 3; // there are 3 tabs available so return 3
 }

}

Now, Create file for tab page. Go to Right click on src sub package ->  new -> class -> write name of the file and browse superclass Fragment

 same as create total three files for adding three tabs.

Also create three xml file for adding three tabs. Go to Right click on res/layout ->  new -> Android XML File -> write name of the file

 Now see the code of all files.

File Name : Tab1.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
package com.example.swipingtab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab1 extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  return inflater.inflate(R.layout.tab1, container,false);
 }
}

File Name : tab1.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#37CB16"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="164dp"
        android:text="TAB 1"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

File Name : Tab2.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
package com.example.swipingtab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab2 extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  return inflater.inflate(R.layout.tab2, container,false);
 }
}

File Name : tab2.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#10D8C3"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="164dp"
        android:text="TAB 2"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

File Name : Tab3.java


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
package com.example.swipingtab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab3 extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  return inflater.inflate(R.layout.tab3, container,false);
 }
 
}

File Name : tab3.xml


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#D810BA"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="164dp"
        android:text="TAB 3"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Output :

Desire Code Tab Layout Desire Code Tab Layout1 Desire Code Tab Layout2


, , , , , ,

0 comments:

Post a Comment

Like us on Facebook

Site Visitor

Powered by Blogger.